1px Gap in IE6 For Absolute Position Elements
Ever wonder why web developers hate IE? Because Microsoft IE team seem to be intentionally disobey the browser standards. Lot of people believe Microsoft do it intentionally; and I am on their side as well.
If you have an absolute position div placed with bottom style, IE might show the div element 1px above where it supposed to be. Here is a code example:
<html>
<head>
<style>
.header { position: relative; height: 149px;background:yellow; }
.absDiv { position: absolute; bottom: 0; background:red;}
</style>
</head><body>
<div class=’header’>
Bla Bla Bla
<div class=”absDiv”>La La La</div>
</div>
</body></html>
Problem
If you look at the output in IE6, you would see that absDiv appears 1px above the bottom of header div.
Fun part is it does not happen always. It happens ONLY if you have parent div has either width or height odd number.
Solution:
You can use any of these two approaches. There could be other solutions as well.
- You can define the parent div width and height even number.
- Instead of using bottom style for absolute positioning use top style.
(No Ratings Yet)
Loading ...
Leave your response!