Whoops!

posted at 00:29:29
By Flipping Heck!

Posted In
Site News

It does take the mickey a bit that I'd just been eulogising about the importance of Website design and having accessible content when I go and break my site for a couple of hours. Oh Dear!

Basically there was a problem with the content frame resizing not only in different browsers but in different resolutions as well. I've hacked the CSS about a bit and made different stylesheets for the most commonly used screen resolutions according to my Google Analytics. Those of you withy screen resolutions less than 1024 or above 1280 - sorry but you're in the minority and I've catered for the masses.

How rude of me!

Still at least it should look okay in I.E and FireFox. If anyone has any comments about what goes on in Saffari, let me know!

For those interested, here's the javascript to load the different stylesheets:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//document.write('Your settings are ' + screen.width + ' x ' + screen.height + ');
if (screen.width == 640) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style_1024.css">');
//alert("Style Sheet for 640 x 480 would have been loaded, but this is just a demo.");
}
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style_1024.css">');
//alert("Style Sheet for 800 x 600 would have been loaded, but this is just a demo.");
}
if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style_1024.css">');
//alert("Style Sheet for 1024 x 768 would have been loaded, but this is just a demo.");
}
if (screen.width == 1152) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style_1152.css">');
//alert("Style Sheet for 1024 x 768 would have been loaded, but this is just a demo.");
}
if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style.css">');
//alert("Style Sheet for 1280 x 960 would have been loaded, but this is just a demo.");
}
if (screen.width == 1600) {
document.write('<link rel="stylesheet" type="text/css" href="includes/style.css">');
//alert("Style Sheet for 1600 x 1200 would have been loaded, but this is just a demo.");
}
//  End -->
</script>
</head>

And here's the hack for the content frame:

/* Below Sets the Width for Internet Explorer and the style for IE/FF. */
.content {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width: 780px;
    minimum-width: 120px;
    margin:0px 230px 20px 230px;
    border-left:1px solid #0057ae;
    border-right:1px solid #0057ae;
    border-top:1px solid #0057ae;
    border-bottom:1px solid #0057ae;
    padding:10px;
    z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    top: 150px;
    background-color: #e3e7f1;
    }

*/Below sets the width only for FireFox it taks the rest from .content*/    
html>body .content {
    width:740px;
    }