firefox refuses to show my page layout correctly

[two4god07]

EI shows my layout the way it should be but firefox has it distorted just enough to make my layout look off.

I didn't build it for EI, it just works best in it.

I used this css to place my elements just where I wanted them.

#banner {
position: absolute; top: 0px; left: 180px;
}
#toc {
position: absolute; top: 200px; left: 180px;
padding-left: 15px; padding-top: 15px;
width: 150px; height: 500px;
border-top: thick solid maroon; border-right: medium solid maroon;
}
#content {
position: absolute; top: 200px; left: 330px;
width: 714px; height: 500px;
border-top: thick solid maroon;
}
#church {
width: 390px; height: 285px;
float: left;
margin-left: 10px;
}
#address {
padding-left: 420px;
}
#tag {
margin-left: 100px;
}

and in firefox, my content div has more height than toc and my border-right is overlapped. My tag id is off of the content area into the outside space.

Any idea how to make it look the same in both browsers? or at least relatively the same.

[two4god07]

would it help if i used float and margins rather than position?

[Wlauzon]

A good rule of thumb in CSS is to never ever ever use absolute positioning.

[swa66]

I don't expect it's absolute positioning that's causing a problem, however IE's broken box model might well be the cause.

Hard to try without the html structure.

For the real box model see here:
[w3.org...]

The trick to get it working in all browsers and IE:
- fix it for FF, test it in all non-IE browsers (safari, chrome, opera, ...)
- use conditional comments to restore what you have now to make IE <= 7 happy again. Take care: IE6 and IE7 might in the need different solutions, but conditional comments can do that easily.

[rocknbil]

Any idea how to make it look the same in both browsers?

See links in your other thread, does it validate and are you using a valid doctype? This will get you started . . .