Saturday morning blog housekeeping again

A reader who has the misfortune of using Internet Explorer got fed up with the way my new template looks on IE, with the right sidebar and/or the main panel being pushed down under the left panel. I hadn't been able to discover a fix, and the template looked fine in every other browser I had tried it on, including even the old Macintosh version of Internet Explorer (v. 5.2). I couldn't even replicate the bug at home, because even when I used Virtual PC with Windows 2000, the template looked OK. However, when I checked the template out on a PC at work, I would frequently see some or all of the problems being complained about.

I just threw up my hands and gave up for the moment.

Fortunately, not everyone else did. This reader found a potential fix, and I'm going to apply it today:

It's an unfortunate fact that Internet Explorer will always incorrectly expand any dimensionally restricted block element so that oversize content is unable to overflow, as the specs require that content to do. I will be comparing IE/win's way with the correct behavior as seen in Firefox. The W3C says a rigidly sized block box should allow oversize content to protrude or overflow beyond the edges of the sized box.

There is no real "fix" for IE/win's incorrect behavior, except to work around or avoid it.

More:

It's a "float drop", and it's caused by having oversized content in a fixed-width floated div that must fit into a particular spot in the layout. In this case, the oversized content is the URL string in the green float.

And:

One common cause of box expansion in IE/win is when you have oversized content such as a long "unbreakable" URL, with no spaces where word wrapping may take place.

The proposed workaround is this:

Try adding the word-wrap property with the value break-word.

Although this has no effect on Firefox, it does force IE/win to break up "unbreakable" text so that it no longer expands the width of the box containing the text.

Be aware that word-wrap is a proprietary Microsoft CSS rule. It is not part of the W3C specification at this time, and will invalidate the page unless that code is hidden inside a Conditional Comment, like this:

<***!--[if IE]>
<***style type="text/css">
***body {word-wrap: break-word;
}
<***!--[endif]-->

(Note: Remove the "***" before each line. I had to insert them to make the code visible, because otherwise it was treated as a comment and not shown.)

That style block is contained in the CC, which can go in the head section of the web page. Only IE/win will look inside the CC, while all other browsers and the W3C validator see only an ordinary HTML comment, and ignore everything inside. It's not a pure solution, but it does work safely on potientially damaging long text strings, and does validate too. Notice that this rule inherits to all page elements from the body element, providing page-wide protection.

I just applied this fix to the page. IE users out there, please let me know if it worked. It looks fine on Firefox and Safari; so at least I didn't screw anything up.