Ahem yeah, what an overused word, but in this modern world of *gasp* browser competition it's starting to become more relevant.
I've pretty much finished putting content in, although I'll be re-writing vast tracts of it as I get time as much of the text is just placeholding to look pretty.
Now I'd like to complain about IE6, IE7 and Firefox.
Firefox: XSL transforms - why oh why do you read the <xsl:output> tag to work out what you're going to do with the transformed document? In what world does that make sense? If I'm outputting valid XHTML and my output type is XML, I expect you to render the XHTML, not get confused and fall over because the output document doesn't match your expectations.
IE7: max-width? Who decided to leave this out of the product? I mean really - one of the most useful CSS tags for making sure that my content doesn't escape the safety of the enclosure I've given it and it's not in IE7. My fix is included below the IE6 complaint.
IE6: margin: auto; - Why do you not do this? After resizing my images, I wanted them centered and the only way to get you to do this was to make an extra div with text-align: center set and place the image container inside that. What is up with that I ask you? I thought that when I turned CSS compliancy mode on with the XHTML DOCTYPE you might possibly, just possibly become CSS compliant but I guess I was just asking too much.
First off, my CSS for centering the images and text underneath them:
div.ImageContainerIEHack
{
}
/* This is the centered div which holds the image to the center */
div.ImageContainer
This solution centers all my images and that's great, but of course in the IE browsers the images are not controlled by max-width, so I run a script when the page finishes loading which goes through and resizes any images which have escaped the max-width property:
This code goes in my XHTML header:
This code goes in my XHTML body tag:
<
This code goes in my javascript file:
function OnWindowLoad(){ // Check For Availabilityif( !document.getElementById ) { return; }// Get The Main Content Divvar content = document.getElementById('RightContent');// Check For Availabilityif( ! content ) { return; }if( ! content.getElementsByTagName ) { return ; }// Get All The Imagesvar imgs = content.getElementsByTagName('img');// Check For Availabilityif( ! imgs ) { return; }// Go Through Them Allfor (var i=0;i<imgs.length;i++){// If They Have A Class, Then Ignore Themif (imgs[i].className){continue;}// Is The Image Too Large?if (imgs[i].width > 400){// NOTE: This Value Is The Same As The 'max-value' Used In CSS// However, Due To The IE Team's Incompetency, This Is How I Get Around Their Lack Of That Property// And Still Manage To Maintain Some Semblance Of Standards Validation..// Resizeimgs[i].width = 400; }}}
Obviously this code is specific to my stylesheet - it only looks for the images in my main body content div, and only resizes images which don't have an overriding tag.
In IE6 and IE7, this means that when the page first loads, the image still appears as its huge normal self, but that is quickly rectified once the page has fully loaded. If IE6 or IE7 has Javascript turned off, the user will get the big image - but that's a risk I'm going to take because it's such a rare occurence that anybody actually using those browsers is so security paranoid that they do that.
Note: In my version I've actually defined a function which adds multiple events to the window load event, as Dasblog(this blogging system) wants to register one of its own for no particular reason.
One of the alternatives to this is in the CSS itself, you can use some inline script which looks like this:
max-width:800px;width:expression(document.body.clientWidth > 800? "800px": "auto" );}
This however is awful, because it won't get validated, only IE understands it and it's an awful hack of what should be quite an elegant way of expressing style.
Below is an image which is about 1920x1200 in size, but has been trapped by the Javascript or CSS to behave itself:
A Big Screenie from Black and White 2
Remember Me