odd Firefox presentation

[Garadon]

I got the following page.

http://www.the-hive.dk/~donp/

it show very odd in Firefox, in IE it does as I expect it to do

[DougBTX]

The link normallay given out at this stage is this one:

http://tantek.com/CSS/Examples/boxmodelhack.html

I wouldn't use that fix though. Read it regardless, it tells you why IE is getting things "wrong".

Instead, I would tell you:

Never set padding or borders in the same place that you set width or height.

You have:


<div class="menu">

</div>

.menu{
border:2px white solid;
padding : 10px;
width:15%
}

I've cut out the non-important bits.

To follow the rule in bold above, I would do something like this:


<div class="menu"><div class="i">

</div></div>

.menu{
width: 15%
}
.menu .i {
border: 2px white solid;
padding : 10px;
}


"i" stands for "inner" here, I just made it up.

And that should be fine. If the extra div really pisses you off, you can use the info at the link above.

hth,
Douglas

[Garadon]

My problem werent with the dimension of the boxes but with the fact that the divs didn't act like boxes at all.

[DougBTX]

Your problem is that you expect everything to work like it does in IE. IE treats width as min-width, so it is impossible to set width in IE (basically).

With the exception if IE, setting width on a box will make that box that width. You set the width of your box to something smaller than the width of the content, so the content spilled out of the box. IE just made the box bigger, ignoring your incorrect setting for width.

hth,
Douglas