PDA

View Full Version : Why does this stuff not line up in Moz?

mouse
04-05-2003, 12:34 AM
For my personal/portfolio site, I've used CSS to position a few layers, in IE6 all is nice, in Moz, not so.

Could anyone take a look and tell me if it'll be possible to have it look identicle in both. I think it must be a problem with the login div.http://silverpaw3d.com/smilies/confoosed.gif

http://www.silverpaw3d.com/
brothercake
04-05-2003, 01:06 AM
You're positioning elements with a left, but not top value, and the browsers are differing over where in the flow they think the top should be. So, I firstly added this doctype to the page

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And then tweaked your CSS a little:

#container{
position: absolute;
left: 90px;
top:15px;
background: #fff;
}
#login{
position: absolute;
left: 243px;
top:15px;
background: #e4e4e4;
border: 1px solid #e4e4e4;
height: 82px;
width: 392px;
padding: 3px;
text-align: right;
}
.border{
position: absolute;
top:15px;
border: 1px solid #e4e4e4;
}

They're closer, but still not exactly the same.

It's generally much easier to design CSS layouts in mozilla, and then tweak them for IE; IE leads you down garden paths :rolleyes:
joh6nn
04-05-2003, 01:34 AM
Originally posted by brothercake
IE leads you down garden paths

that ain't no garden...
mouse
04-05-2003, 01:36 AM
Originally posted by brothercake

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Okay, that's worked quite nicely, thanks. Now this bit ^^^ interests me, excuse my ignorance but why does this part make a difference to the way IE renders the page?
brothercake
04-05-2003, 01:49 AM
It makes IE6 use the w3c box-model (where the size defines the content box), instead of the IE box model (where the size determines the border box).

There's another twist ... if you begin with the <?xml processing instruction, then IE6 goes back into quirks mode and uses the IE box model ....

But if you prefer that model you can make mozilla use it as well - check this out http://www.xs4all.nl/~ppk/css2tests/box.html