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.

Comments

  1. Yea! It worked. Looks much better.
    Thanks for looking after us technology challenged individuals.

    ReplyDelete
  2. Bizarre. It hasn't worked for me. Mind you, as long as I can read the actual posts, I can live with it.

    ReplyDelete
  3. Update: if I go to 'full screen' mode (F11), then it does work.

    Ah, technology.

    ReplyDelete
  4. If your problem is with a too-long URL, rather than having to resort to some bizarre CSS code, why not use tinyurl to make yourself a shorter one? AFAIK, these things don't expire.

    ReplyDelete
  5. Whoa! The main page is completely messed up for me in Firefox 1.5 on Windows. Looks OK in IE though . . .

    ReplyDelete
  6. Of course, as soon as I mentioned it, the page looks fine again. Bah. Lousy internet.

    ReplyDelete
  7. Your pages have always looked OK on my PCs. I used to have IE 5 on Windows ME and it was OK and now I have IE 6 on Windows XP. Never had any problems, new template or old.

    Doesn't mean I actually LIKE the template tho . . .

    ReplyDelete
  8. For what it's worth.... the Diva blog has all the right-hand column stuff at the bottom of the page in IE, at least on the computers at the University. The Diva blog is basically a standard issue blogger template.

    ReplyDelete
  9. Works fine for me on IE.

    ReplyDelete
  10. No problems here.

    But then, I'm running Firefox on an iBook.

    Just wanted to let you know that combination works too, incase you were testing just Safari on mac and Firefox on another OS.

    ReplyDelete
  11. My experience is much like Magista's - in fullscreen mode (which I never use) it's ok, otherwise the right sidebar is at the botom of the page.

    Actually, until now I thought you'd just decided to abolish the right sidebar for some reason. It never ocurred to me to look at the bottom of the page...

    ReplyDelete
  12. I use IE and the blog looks fine to me in "full screen"-mode. Nice template anyway.

    ReplyDelete

Post a Comment

Popular Posts