IE disappearing floated elements in a relatively positioned container
These test cases document a bug I discovered in Internet Explorer with rendering of floated elements that have a relatively-positioned ancestor element.
The five examples below should all appear identical (apart from the text) in non-buggy browsers. IE, however, causes the image in the first example to disappear. As far as I can tell, it miscalculates the z-index of the floated element to be lower than it should be, causing it to render behind the container element's background and making it invisible to all intents and purposes.
The structural markup for each example is as follows:
<div>
<h2>Title</h2>
<p><img src="tulip.gif">Text</p>
<p>Extra paragraph.</p>
</div>
The behaviour is the same for IE5.0, IE5.5 and IE6.
Relative floating, no width
This div (yellow background) has position: relative; applied to it, and no explicit width declaration.
Quisque in mi non pede sagittis faucibus. Nam convallis. Fusce lacinia molestie diam. Proin ac lacus. Mauris iaculis ante ac odio. Ut turpis lacus, malesuada eu, feugiat vitae, facilisis sed, mi. Nam eget nisi eget dui convallis ullamcorper. Ut elit mi, rhoncus at, euismod et, vehicula nec, massa. Maecenas a felis eu nunc bibendum auctor. Sed mi est, sollicitudin eget, ultricies vitae, porttitor non, enim. Aenean felis. Duis at mi. Aenean leo. Curabitur est. Morbi viverra ligula quis risus. Praesent lacus. Etiam sed mauris. Cras faucibus varius magna. In hac habitasse platea dictumst. Quisque in tellus at arcu tincidunt posuere. Nunc eget sem tristique velit pretium vestibulum. Sed odio turpis, faucibus a, adipiscing at, condimentum eu, nunc.
To trigger the bug, the floated element must have an ancestor element:
- with a background-image or background-color
- with
position: relative
- without an explicit width
- without a negative z-index
Fix 1: Remove position: relative from the container div
This div has no position attribute applied (therefore static), and no explicit width declaration.
Quisque in mi non pede sagittis faucibus. Nam convallis. Fusce lacinia molestie diam. Proin ac lacus. Mauris iaculis ante ac odio. Ut turpis lacus, malesuada eu, feugiat vitae, facilisis sed, mi. Nam eget nisi eget dui convallis ullamcorper. Ut elit mi, rhoncus at, euismod et, vehicula nec, massa. Maecenas a felis eu nunc bibendum auctor. Sed mi est, sollicitudin eget, ultricies vitae, porttitor non, enim. Aenean felis. Duis at mi. Aenean leo. Curabitur est. Morbi viverra ligula quis risus. Praesent lacus. Etiam sed mauris. Cras faucibus varius magna. In hac habitasse platea dictumst. Quisque in tellus at arcu tincidunt posuere. Nunc eget sem tristique velit pretium vestibulum. Sed odio turpis, faucibus a, adipiscing at, condimentum eu, nunc.
Simply removing the position: relative on the ancestor element bypasses the bug.
Fix 2: Set an explicit width on the container div
This div has position: relative; applied to it, and a width declaration of 100%.
Quisque in mi non pede sagittis faucibus. Nam convallis. Fusce lacinia molestie diam. Proin ac lacus. Mauris iaculis ante ac odio. Ut turpis lacus, malesuada eu, feugiat vitae, facilisis sed, mi. Nam eget nisi eget dui convallis ullamcorper. Ut elit mi, rhoncus at, euismod et, vehicula nec, massa. Maecenas a felis eu nunc bibendum auctor. Sed mi est, sollicitudin eget, ultricies vitae, porttitor non, enim. Aenean felis. Duis at mi. Aenean leo. Curabitur est. Morbi viverra ligula quis risus. Praesent lacus. Etiam sed mauris. Cras faucibus varius magna. In hac habitasse platea dictumst. Quisque in tellus at arcu tincidunt posuere. Nunc eget sem tristique velit pretium vestibulum. Sed odio turpis, faucibus a, adipiscing at, condimentum eu, nunc.
Giving the ancestor element any declared width removes the problem.
Fix 3: Set position: relative on the floated element
This div is exactly like the first div (position: relative), but the floated image has position: relative; applied to it.
Quisque in mi non pede sagittis faucibus. Nam convallis. Fusce lacinia molestie diam. Proin ac lacus. Mauris iaculis ante ac odio. Ut turpis lacus, malesuada eu, feugiat vitae, facilisis sed, mi. Nam eget nisi eget dui convallis ullamcorper. Ut elit mi, rhoncus at, euismod et, vehicula nec, massa. Maecenas a felis eu nunc bibendum auctor. Sed mi est, sollicitudin eget, ultricies vitae, porttitor non, enim. Aenean felis. Duis at mi. Aenean leo. Curabitur est. Morbi viverra ligula quis risus. Praesent lacus. Etiam sed mauris. Cras faucibus varius magna. In hac habitasse platea dictumst. Quisque in tellus at arcu tincidunt posuere. Nunc eget sem tristique velit pretium vestibulum. Sed odio turpis, faucibus a, adipiscing at, condimentum eu, nunc.
Adding position: relative to the floated element shouldn't do anything, but this is IE, "quirky-bug-fixing-with-relative-positioning-R-us!"
Fix 4: Set a (negative) z-index property on the container div
This div is exactly like the first div, but the floated image has position: relative; applied to it.
Quisque in mi non pede sagittis faucibus. Nam convallis. Fusce lacinia molestie diam. Proin ac lacus. Mauris iaculis ante ac odio. Ut turpis lacus, malesuada eu, feugiat vitae, facilisis sed, mi. Nam eget nisi eget dui convallis ullamcorper. Ut elit mi, rhoncus at, euismod et, vehicula nec, massa. Maecenas a felis eu nunc bibendum auctor. Sed mi est, sollicitudin eget, ultricies vitae, porttitor non, enim. Aenean felis. Duis at mi. Aenean leo. Curabitur est. Morbi viverra ligula quis risus. Praesent lacus. Etiam sed mauris. Cras faucibus varius magna. In hac habitasse platea dictumst. Quisque in tellus at arcu tincidunt posuere. Nunc eget sem tristique velit pretium vestibulum. Sed odio turpis, faucibus a, adipiscing at, condimentum eu, nunc.
Since the bug seems to mess with the z-index of the floated element, it can be fixed by messing with the z-index of the container. Any negative value will do, but a) it could have dire consequences for the rest of your layout, and b) the whole element will disapper behind the body in Mozilla browsers.