Here is another case where IE bombs, but Netscape, Mozilla and Opera all
I have a div nested within another div.
The parent div is positioned absolute.
The nested div has a height of 16px, and a line-height of 16px.
Within the nested div, I have an image 16px high, then a span of anchors
with font-size: 10px.
I have margin, border, and padding all set to 0px. In the body tag
AND the parent div's ID selector.
This nested div also has a background image that is 16px high, and a
I then added a second after the 1st nested one (same parent as the
This div is, with a top border of 1px, and bottom border of 2.
Each border is a different color, and the div's background is a 3rd
The div has a height of 1px, and a line-height of 1px.
In all browsers except IE, I show the 16px high image, and anchors to
right of it. (I had to do a position:relative; top: -5; to get the
to line up with the image). DIRECTLY under that (pixel line #16 in the
browser), it shows by second div's top border, then 1 pixel background
color, then 2 pixel bottom border. Just the way I wanted it.
In IE, there are 2 pixels deep of the 1st nested div's background color
starting at pixel line #16. THEN the 2nd nested div shows (starting on
This only happens when the image in the 1st nested div is there.. If I
the image, the extra space is gone. The image is set with width="100"
height="16", and in the style sheet, the img tag is set with margin:
padding: 0px; border: 0px; (also tried with border: none;)
Is this another IE bug?
My doctype is set to XHTML 1.0 Strict, and I have removed the XML
declaration (which was causing IE to go into "quirk" mode".
Additionally, unless I have some content such as withing the 2nd
nested div, the background 1px ends up being 16px deep instead.
Any help would be appreciated.. I can explain further if necessary.
-Walter K. Zydhek
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/