3px problem that's not related to IE

Without seeing your entire HTML and CSS, it's quite hard to help you

That is my entire HTML, if you paste it into a file you'll see the problem.

you mean you don't have a doctype, head and body sections, etc?

you mean you don't have a doctype, head and body sections, etc?

ofcourse, you can repeat the problem with the code I gave. Here you go:

untitled

#mydiv {
background-color: red;
}

You can do one of three things. You could specifically set the height of the div to 180px, OR set the image to vertical-align: bottom; OR set the image to display: block;.
The reason this is happening is that the image is an inline element and space is reserved for the descenders of a font below the image. With no height on the containing div, it just expands to encompass this space.

you mean you don't have a doctype, head and body sections, etc?

ofcourse

you see, this is why we specifically ask for all the code in the first post. It saves us having to constantly ask for it.

@ hoicem:

Please don't take offense. Probably the single greatest source of problems is the lack of a complete and proper DTD. That's followed closely by html syntax errors.

As you are new to the forum, we can't know how aware you are of their importance, nor can we know your comfort level with the use of well structured, semantic html. As a result, we generally ask to see a complete document, even if it's a minimal test case[1] such as you brought us.

As Gran'ma used to say, the devil is in the detail.

Once we have more confidence in your abilities, a snippet, accompanied by a statement such "in standards mode, IE/Fx/Opera/et al, blah, blah, blah" or "this seems to work in IE only in quirks mode …" may be sufficient.

Bear with us if we sometimes sound churlish on this issue. There is good reason for it.

cheers,

gary

[1] We really like to see minimal test cases. It shows the poster has done some work on his own to isolate the problem, plus it strips away all the extraneous markup and styles we would otherwise have to wade/dig through.

@ Wolfie

Have you tested this? Would it create an overflow situation for the inline box? Just curious. If you don't get back, I'll probably set up some tests when I get a chance.

You forgot to mention you could float the image, creating an implicit block element.

cheers,

gary

right, that's what I tried to do. I've done a lot of searching the last couple days and when people post their whole page code it's hard to understand, therefore I stripped mine down.

I wasn't aware the doc type mattered to replicate the problem. Thanks for the solutions.

regards

the 'descenders of a font'. Could you explain what this means please?

Descenders are the bits of fonts that extend below the baseline - for example, letters g, p, q, y.

You forgot to mention you could float the image, creating an implicit block element.

cheers,

gary
I was curious about that and did indeed test (in Firefox only). I was wondering if the space would still be reserved and the top be cut off or pushed out, in overflow, but that didn't happen. You're absolutely right (as usual), I forgot to mention the float!

You missed a couple of things, Wolf. The overflow occurs at the bottom, and IE enlarges any container with hasLayout to include its content.

My test suite shows that fixing the image container's height is not a robust solution. My test image is a 50