The IE Word Wrap Doppelganger Bug

Amongst IE6’s usual Guillotine and Peek-a-boo bugs, it’s almost refreshing to see it still has the ability to throw something truly unique and creative at you.

This is a new bug we located on the SitePoint cover page this morning . The XHTML for the feature article isn’t particularly remarkable in any way that I’m aware of:

– DIV#feature is set at a percentage width to scale with the page
– the illustration is placed immediately before the title and floated right
– the H1 title, H5 author credit and P blurb all wrap to the left of the illustration

As images can’t resize themselves, you would fully expect the text to wrap around the illustration as you scaled down your browser window.

And you would be right… to an extent.

IE Word Wrap Bug

As you can see, when a word in the title link runs out of space in IE6, it wraps to the next line, but also leaves a partial copy of itself on the original line — an evil doppelganger.

Bizarre — it’s like the word is torn between taking the plunge, and sticking things out on the line it knows, hoping things will get better.

Continue scaling down the window and the doppelganger eventually topples over the edge and vanishes into the ether again. Of course, scale up a little again and it will reappear on command.

I’ve fixed it on the live site, but here’s a static version if you want to see it for yourself.

I have no explanation as to why this happens — it’s certainly associated with the link — but I have worked out a solution that seems to fix it, should you come across the same problem.

Firstly, the link needs to be switched from it’s default 'display:inline‘ to ‘display:block‘.

 
#feature h1 a {
display:block
}

This will prevent words in the link from wrapping ‘mid-word’, but won’t stop the doppelganger effect — it just duplicates a full word now. To banish the doppelganger, we have to add a padding of at least 1px to our header. Adding a border set to the background color works too, but is more chance of causing other layout problems — for instance, if the user over-rides the background color.

 
#feature h1  {
padding:1px 
}

This certainly works, but forces the extra padding on you — there may be a better solution.

I googled for another occurence of this bug and couldn’t find one, so I’m tipping it’s a bug triggered by very specific set of circumstances.

I still think it’s worth documenting here — the fix is much easier to implement than it is to find in the first place.

On further investigation it appears to be a variety of the ‘haslayout’ bug, meaning adding either ‘zoom:1′ (invalid CSS) or ‘height:1%’ to the header will fix the bug without altering the padding.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.designity.nl peach

    the ways of ie are mysterious

  • Anonymous

    zoom:1 is really the only way anyone should be recommending doing this for IE. Put it in a separate stylesheet (conditional comment) if validation is a must, but DON’T use height!

    Why not?

    Because IE7 will break if you do, and you’ll have to change it anyway.

    zoom, while non-standard, is pretty future proof, since it would just zoom an element to it’s current size, anyway.

  • http://www.sitepoint.com AlexW

    zoom:1 is really the only way anyone should be recommending doing this for IE. Put it in a separate stylesheet (conditional comment) if validation is a must, but DON’T use height!

    Fair point. Have to admit I’m in the process of setting up a new PC here and haven’t set up the IE7 beta on it yet.

  • Kaystarmaker

    sorry, i can’t seem to replicate this behaviour in IE6, it wraps like you would expect it to.

  • http://autisticcuckoo.net/ AutisticCuckoo

    An H5 immediately following an H1? *tsk* *tsk*

  • Greg

    No problem in IE7 Beta 2.

    It will be interesting when you see your ‘Daily Blogs’ in IE7 !!

  • svanpoeck

    My version of IE6 (6.0.2800.1106CO French version) does not reproduce this behaviour.

  • http://ian.sundermedia.com TheLunchBox

    By current version of IE6 doesn’t have the bug, but I have seen this in the past. On of the unfortunate things about IE6 is that out of the 50+ builds and fixes out there, you can only have 1 installed and there are a lot of little quirks like this that are inconsistent between builds.

    I’m looking forward to the day when IE6 is gone.

  • http://www.i-devs.com i-devs

    torn between taking the plunge, and sticking things out on the line it knows, hoping things will get better.

    You should forward this on to MS… great marketing copy for IE… short, to the point, instantly creates an emotional connection with the reader. Brilliant!

  • http://www.unitystudios.com michellew

    6.0.2800.1106 sp2

    I first noticed this back when the Google Calendar: All Your Appointments Are Belong to Us blog was posted last month. It was the first blog in the list for about a week and some days it wrapped correctly and other days it doubled up. I thought you were working on the site :)

  • malikyte

    If you use non-standard/validating code in a conditional stylesheet for IE, the page will still pass validation? I used max-width to fix haslayout problems in IE in a certain situation because Firefox/Opera actually do what you tell it to when you set height to something smaller than the font’s actual rendered height… However, zoom sounds like a much better option so long as the code will validate.

  • joe bloggs

    as said above ie7 sorts it BUT
    now every bloody user is using a different browser/version and its tricky to make a decent site to look the same accross all platforms if not impossible(without flash ver 5(many ent admins will block flash/updates bloody wsusses)

    stating the obvious but just complaining to the world lol

  • kranthi

    How to fix word wrap:break-word in IE7