Welcome to WebmasterWorld Guest from 54.146.206.127

Forum Moderators: not2easy

Message Too Old, No Replies

Very strange IE bug with "One True Layout" full-height columns

Shifts page height when mousing over links under very specific conditions

     
2:17 am on Nov 2, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


I always wanted to find a browser bug. I think I've finally done it, and this one's a doozy!

To understand this bug, you'll first need to read about the Equal Height Columns [positioniseverything.net] technique. Then, create a new document using the code at the bottom of this post.

The bug appears to be triggered in all versions of IE, when mousing over links under certain specific conditions. When the bug is triggered, it instantly changes the height of the webpage, sometimes very dramatically. (On the sample below it's not too big of a deal, but on the layout I'm working on, it actually makes the page thousands of pixels tall and shifts the entire content clear down to the bottom as well - all when mousing over the links.)

But here's the thing - it only seems to happen when you have block-level floats that appear after a link which is set to change background color on :hover. Set the floats to display:inline or remove the background color for the :hover state of the links, and the bug won't be triggered.

I should mention that I haven't thoroughly investigated this yet, so it's possible that I'm missing important details. All I know for sure is that setting the floats to inline OR removing the background color will fix the bug; I haven't looked into othe ways it could be triggered and I haven't been able to find other fixes.

So anyway, here's some code that will trigger the bug. Watch the browser scrollbars when you mouse over the links. Look at it, play with it, try to fix it, whatever, but please post ANY thoughts or fixes here - this is a very baffling problem to me as I can't think of a single reason this should be happening! ;)

(Sorry for all the Lorem Ipsum, but I wanted the columns long enough to illustrate the concept.)

<edit> I just noticed that in this example, the page changes height even with the column <div>'s set to display:inline. For some reason, assigning that value to the <div>'s in my layout fixed the problem. Obviously I haven't gotten to the bottom of this bug quite yet, but I'm still working on it. </edit>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Full-Length Columns IE Bug</title>

<style type="text/css">

#container {
position: relative;
overflow: hidden;
width: 450px;
margin: 20px auto;
}

#navigation a:link, #navigation a:visited {
background-color: #fff;
color: #000;
}

#navigation a:hover {
background-color: #000;
color: #fff;
}

#column1 {
float: left;
width: 200px;
padding-bottom: 30000px;
margin-bottom: -30000px;
background-color: #f5f5f5;
}

#column2 {
float: right;
width: 200px;
padding-bottom: 30000px;
margin-bottom: -30000px;
background-color: #f5f5f5;
}

</style>

</head>

<body>

<div id="container">
<ul id="navigation">
<li><a href="">Link</a></li>
<li><a href="">Another</a></li>
<li><a href="">Final</a></li>
</ul>
<div id="column1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas cursus vestibulum nibh. Phasellus blandit cursus urna. Pellentesque quis risus. Donec sagittis, urna eu ornare vestibulum, diam libero sagittis massa, non feugiat dui turpis eu sem. In mollis lorem non quam. Aenean sapien diam, rutrum sit amet, consequat id, vestibulum id, augue. Praesent tempus, risus vitae congue ultrices, lacus pede vulputate nunc, et lobortis massa turpis sit amet magna. Etiam hendrerit nunc ut augue. Phasellus venenatis dui sed pede. Curabitur egestas mattis nisl. Aliquam erat volutpat. In hac habitasse platea dictumst. Nam turpis lorem, lacinia eget, fringilla ac, posuere id, leo. Fusce leo massa, vestibulum in, auctor id, suscipit sed, lorem. Pellentesque est neque, pellentesque et, consequat in, viverra et, lorem.</p>
<p>Duis quis augue. Donec malesuada odio vel felis. Aenean sed purus a ante auctor porta. Aenean non turpis. Nunc gravida iaculis leo. Vivamus lectus metus, varius vel, ornare a, volutpat in, nunc. Maecenas blandit. Quisque porta libero sed turpis. Pellentesque ut dolor. Cras gravida dui vel elit. Vivamus dui. Ut scelerisque. Maecenas feugiat nisl convallis lorem. Mauris nunc quam, sodales convallis, suscipit eget, cursus nec, augue. Sed hendrerit, pede eget scelerisque laoreet, massa elit malesuada odio, pharetra blandit est mi ut sem. Aliquam faucibus. Quisque velit erat, aliquet in, congue varius, rutrum eget, massa. Suspendisse potenti. Morbi placerat imperdiet lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Curabitur ultricies pretium orci. Integer sed ligula. Cras mattis. Quisque eu nunc ac nulla condimentum tristique. Vestibulum eu orci. Integer et magna. Morbi nec pede nec libero rutrum convallis. Proin dolor purus, gravida ac, laoreet eu, tempus pharetra, justo. Maecenas sagittis nonummy sapien. Integer ut nunc sed nibh dapibus sodales. Vestibulum nec tortor. Nunc aliquam, nibh dictum semper convallis, ipsum dolor gravida arcu, vitae ornare nulla est at lacus. </p>
</div>
<div id="column2">
<p>Nam diam. Curabitur porta. In et arcu. Vivamus varius, neque vel condimentum hendrerit, felis velit imperdiet quam, id posuere risus mi ut diam. Proin elementum mauris at metus. Suspendisse adipiscing ipsum nec ipsum. Nullam viverra, odio eget egestas euismod, lorem orci porta mi, ac accumsan purus libero ut diam. Donec semper odio id arcu. Integer porta nonummy lectus. Nullam sit amet est.</p>
<p>Sed ut enim. Phasellus libero metus, feugiat sed, pellentesque in, pretium non, nisl. Nulla in enim ut est accumsan feugiat. Proin non quam sed elit accumsan congue. In pretium. Proin porta. Integer sodales. Nullam at urna a tortor vulputate semper. Aenean varius, odio in interdum dapibus, erat felis lacinia est, ut blandit diam nibh at arcu. Nullam dignissim metus venenatis mauris. Donec varius. Maecenas congue egestas velit. Praesent nibh ante, lobortis et, sollicitudin vel, fermentum quis, tellus. Proin tempor arcu ut lacus porta aliquam. Nulla facilisi. Morbi vitae nisl.</p>
<p>Quisque egestas, erat sed euismod sagittis, dolor nisl sodales lorem, eu scelerisque pede neque imperdiet diam. Morbi rutrum augue in metus. Aliquam suscipit magna a sapien. Etiam sed risus. Cras iaculis. Proin lorem. Nullam imperdiet augue vitae erat. Ut sit amet augue. Quisque faucibus urna et quam. Mauris venenatis neque. Suspendisse ut lacus in purus sodales pulvinar. </li>
</div>
</div>

</body>

</html>

7:37 am on Nov 2, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi Matthew, that is a weird effect ;)

I tend to think it's similar to the "Guillotine" bug but although not being 100% certain if that is it, I pretty sure it is a "hasLayout" error, good ol' IE at least it's consistent..

adding a width, height or zoom to the <ul> fixes it as far as I can tell, giving it layout so it can cope with the link redraws.

Suzy