Brian Corrales

Guillotine Bug in IE 6

by brian.corrales on Feb.03, 2007, under Technology

It’s a pretty well-known fact among web developers that formatting never comes easy when the majority of the population uses Internet Explorer. Luckily, in the newly released IE 7, the Guillotine Bug has been fixed. From what I’ve seen, many of the IE bugs have been fixed in the new release. The problem is that most people are still using IE 6.

I just deployed a new online system and it went pretty smooth. I received a few emails about a few minor bugs, but overall the project went quite well. One of these bugs, was the Guillotine Bug. This bug chops off the bottom part of a floating div with links on it. Here’s an example of the source code that would produce this bug:

< div class="container" >
< div class="floater" style="float: left" >This floating div will have the bottom section cut off.< /div>

This is the main section that contains a link. The link should involve some javascript or ajax.
< /div>

Below is a graphical representation of how this set of code should appear:


On the initial page load, the page will look like the IE example and to the normal page viewer, the site appears to be working correctly. After clicking the link on the right column however, the layout is changed to the Guillotine example and most of the left column is cut off.

The answer is quite simple. After closing the container div, add the following:

< div style="clear: both" >< /div >

This gave me a ton of headaches, but luckily, I was given the following link: http://www.positioniseverything.net/explorer/guillotine.html. I’ve referenced this site to write this post and if you are interested in learning all the ins and outs of the Guillotine Bug, I suggest you take a look.

[?]
Share This

One comment to “Guillotine Bug in IE 6”

  1. Kory Hoopes

    Let’s just say that IE6 is the worst browser to ever hit the market. Luckily Microsoft release IE7 recently, it’s not great either but it is better, and I encourage everyone to upgrade!

    Another way to fix this problem is to use absolutely positioned divs inside of a relatively positioned div. This allows for the separation of the two divs but still allows for auto height adjustment for them.

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!