CSS - Mozilla DIV bottom padding anomaly?

Factual Questions
1

I’m trying to design a website without using tables (why do I torture myself so?).

I’ve encountered a strange anomaly in Mozilla rendering of DIVs and Googling has proved fruitless.

If I have a DIV wrapping around an image with zero padding, it renders as expected in IE 6 and 7 - namely the DIV finishes at the bottom of the image. However, in Mozilla-based browsers, and the new Safari for Windows, there’s a 5px pad at the bottom of the DIV.

Here’s a proof of concept.

The code has nothing extraneous in it:


<DIV><IMG></DIV>

but whatever I do - I have tried absolute height, I have tried negative padding - the padding is still there.

At this rate I’m going to have to swallow my pride and go back to tables, as my design is dependent on zero padding.

Is this a known bug? Is there a workaround?

2

I used to encounter bugs like that when there was a line break in the code. But you don’t appear to be victim of that one.

Try putting in “px” after each of the numbers, though. You have height as 260, but if you don’t specify pixels it can mess you around.

You should also have a more detailed declaration, to specify the strict or transitional HTML you are using.

3

There. Just tested it. First, remove the height from the border, then include a Transitional doctype declaration.

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”

4

Thanks for that, it worked! I didn’t mean to include the version with the height definition as the sample.

FTR that was an error - I even chewed out one of my underlings for omitting the units in a CSS file last week - and I had earlier included “px” in and it didn’t work either.

The only worry I have now is that the loose.dtd might mess up the box model bug in IE6, for which I was a declaring “rigid” (or whatever it is) DTD that was messing up the “margin: auto;” DIV centring in the actual page I’m working on. I shall have to find a computer with IE6 on it and test that with “loose.dtd” declared.

5

That’s IE for you. Better to use correct HTML with fixes for the IE bugs, than the other way around.

6

Thanks again, it’s looking good.

Does anyone know of a service that allows you to see a site as IE6 would?

7