Monday, January 15, 2007 12:01:09 AM (GMT Standard Time, UTC+00:00)
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.
Resizing and Centering Images without losing CSS or XHTML compliancy.
First off, my CSS for centering the images and text underneath them:
div.ImageContainerIEHack
{
/* NOTE: This also has the effect of centering the image and text inside the div too, so that's ok. If I didn't want that, I could override text-align in the next div. */
text-align: center;
}
/* This is the centered div which holds the image to the center */
div.ImageContainer
{
margin: 20px auto 20px auto;
padding: 0px 0px 0px 0px;
width: auto;
}
div.ImageContainer
p
{
/* Just center up and be small and black. */
color: #000000;
font-size: 10px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
div.ImageContainer
img
{
/* This should conveniently be centered and look pretty. */
margin: 0px auto 0px auto;
border: solid 1px #0000FF;
/*NOTE: IE does not support this property, but I have Javascript in place to resize */
/*This is for those that are ultra careful and turn off javascript */
/*Let's just assume for a second here that those are the same kind of people that would be using a standards compliant browser :) */
/*Me? Well I use IE7 and leave javascript turned on - like 90% of the people out there. */
max-width: 400px;
}
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:
<!-- My Glorious Javascript. Ho Ho Ho. -->
<script src="../Scripts.js" type="text/javascript"></script>
This code goes in my XHTML body tag:
<
body onload="OnWindowLoad();">
This code goes in my javascript file:
function OnWindowLoad()
{
// Check For Availability
if( !document.getElementById ) { return; }
// Get The Main Content Div
var content = document.getElementById('RightContent');
// Check For Availability
if( ! content ) { return; }
if( ! content.getElementsByTagName ) { return ; }
// Get All The Images
var imgs = content.getElementsByTagName('img');
// Check For Availability
if( ! imgs ) { return; }
// Go Through Them All
for (var i=0;i<imgs.length;i++)
{
// If They Have A Class, Then Ignore Them
if (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..
// Resize
imgs[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