Ahh - what gives?

[Xylina]

Grrr....

I'm trying to redo the website for the office. I'm trying as hard as I can to use CSS positioning and div's instead of tables. As you can see by the screen shot, everything looks just right in IE, but when I looked at it in FireFox, it looks different. I'm not sure where to begin to fix this. Any suggestions?

Screen Shot

CSS

HTML

Thank you,

Xy

[WebJoel]

Your HTML:
<div class="c4">
<div class="c5">

<p class="c2">Test Test</p>

</div>
</div>
Nests c5 inside of c4. c4 and c5 are both 748px wide. And the class="c2" is also 748-px wide... (see CSS, below)


Your CSS:
div.c1 {margin-left: auto; margin-right: auto; width: 748px; }

div.c2 {margin-left: auto; margin-right: auto; width: 748px; border: 2px solid #FF9900; } (which equals 752-px wide)

div.c3 {margin-left: auto; margin-right: auto; padding: 6px; width: 748px; } (which equals 760-px wide)


Therefore, you are putting a 760-pixel wide <p> inside of a 752-pixel DIV which is also inside of a 748-pixel DIV... (huh??) I see a problem here...

If c1 is 748-pixels wide, make c5 be 100% (all that is available in it's container) and make c3 be 100% (again, all that is available in it's container). Stating defacto pixel width here is hurting you in compliant browsers. IE merely renders it the way that it thinks you wanted/intended it. Compliant browsers comply-as-written (ergo, why they are called "compliant")

[Xylina]

Thank you for that information - i never even noticed that - i'm still very new to CSS and HTML.

Xy