box model problems.

[supersteve3d]

Hi all,

Just when I thought I got it figured out..

Please take a minute to look at my site.
www.stevelim.com

The borders are being predictable in IE 6 but not firefox.

I have 3 columns..
B=border , P=padding, W=width

<B10><P10><W130><P10><B10> <B10><P10><W500><P10><B10> <B10><P10><W150><P10><B10>

Total width for the wrapper is 900px by my calculations. Firefox displays it all weird. IE is ok. Its usually the other way around.

[Centauri]

Quite possibly a problem with margins. In your css there is the line:

body { background: #555 url(back.jpg) no-repeat; font:0.7em Tahoma, Arial, Verdana, sans-serif; color:#444; marin:0; padding: 0;}

Spot the spelling mistake?

Cheers
Graeme

[WebJoel]

You also have something strange going on with the LI.

Here is one of those examples of 'even though is validates as correct, it still displays wrong on Firefox therefore, there is an error in here somewhere'... (note the overlapping text in image, attached

[Centauri]

Yes, the text on that page is very small, prompting the use of the "increase text size" button .... which then promptly breaks the layout as WebJoel's pic shows.

[supersteve3d]

Hi all,

Thanks for the pointers. I have fixed the errors mentioned. However, as I expected, they are not related to the problem I'm having.

This seems to have to do with the very large margins and how firefox and IE translate them. This works fine when I remove any borders (just width + padding).

http://www.stevelim.com

vs. with borders it breaks.

http://www.stevelim.com/index_border.html

[supersteve3d]

Interesting that just adding borders to the center column breaks it.

from..

#center	{	background-color:#ddd;	float: left; width: 560px;	margin-left: 150px; padding: 10px;}

to..

#center	{	background-color:#ddd;	float: left; width: 540px;	margin-left: 150px; padding: 10px; border-left: 10px; border-right:10px; }

and boom. Notice that I reduced the width to compensate for the new borders on either side. This works for padding but somehow blows up for borders?