Image in an inline <div> quirks with Mozilla

Image renders outside the <div>

[BlobFisk]

Hi All,

I've run into a very strange Mozilla (v1.6 on WinXP/Pro) and Netscape (v7.1) problem. I have a table of data including a progree bar. I am using a <div> with a fixed width (and border) and an image inside that has it's width set based on the % completion.

CSS:
.smStatus {
width: 100px;
height: 6px;
padding:0;
border: 1px solid #000;
margin: 0 ;
}

.smStatus img {
height:6px;
border: none;
margin: 0;
}

HTML:
<td><div class="smStatus"><img src="gif/green.gif" alt="Current Status: 46%" width="46"></div></td>

Things behave exactly as I want them to on IE and Opera, however Mozilla/Netsaope are misbehaving. They are rendering the <div> but is putting the status image below the div!

My HTML and CSS all validates, so I am at a loss....

All suggestions appreciated!

[oberon]

Normal behaviour and another IE bug, images are inline elements, not block level elements, add display:block; to the image. BTW, Opera 7.5b3 behaves just like Mozilla here in strict mode.

[BlobFisk]

Hi oberon,

Thanks for the reply! I'm afraid that I don't quite understand what you are saying. Images are inline and I am using it as an inline element (if I used it as a block element then I'd understand why things would go haywire).

I don't quite see how this explains the Mozilla madness that I'm seeing....

[aeve]

I don't have a clue as to why mozilla is doing this, but I agree that it certainly seems like this time its mozilla's bug. You might want to file a report at bugzilla and see what the developers have to say.

I think oberon might be on the right track though, the problem seems to be coming from the line-height -- if you add

line-height: 0;

to the div or the table cell the problem disappears.

Adam

[BlobFisk]

Thanks a million aeve - that did the trick nicely!

A very strange one and an instance of a browser bug other than IE!

[oberon]

This is NOT a Opera/mozilla bug, it is an IE bug. All inline elements have a line-height inherited from their nearest block container, this line-height results in a white space around the image. Since you set a maximum height for div (6px), the inline image which has an heigh of 6px + theinherited line-height goes outside of the container.

Two solutions therefore :
1 changing the default display to block (my proposal) to cancel line-heigth inheritance
2 explicitely setting line-height to 0

[BlobFisk]

Thanks for clarifying oberon!