Mozilla and positioning

Forum Moderators: not2easy

Message Too Old, No Replies

Mozilla and positioning

korkus2000

10:08 pm on Nov 1, 2003 (gmt 0)

Why does mozilla render pixels differently? What can I do to work around this?

[edit]typo[/edit]

[edited by: korkus2000 at 12:12 am (utc) on Nov. 2, 2003]

hartlandcat

10:54 pm on Nov 1, 2003 (gmt 0)

What exactly do you mean, and differently to what?

korkus2000

11:43 pm on Nov 1, 2003 (gmt 0)

I have set up a class that is positioned from top and left. In Opera and IE it is in the same position, but in mozilla it is a couple of pixels to the right. I also don't get a border when I define it. Maybe the css I am using is not supported by Mozilla? Here is the class:

.testclass{
position:absolute;
width:158px;
top:105px;
left:3px;
border:1px solid #FE682A;
}

Nick_W

11:48 pm on Nov 1, 2003 (gmt 0)

complete guess!

What happnes if you add this:


body,margin {
margin:0;
padding:0;
}

Nick

korkus2000

11:53 pm on Nov 1, 2003 (gmt 0)

That helps, but it is still 3 px to the right compared to IE and Opera. It is however enough for me to live with. Does mozilla have different position coordinates than IE and Opera? Also should that border work?

Nick_W

11:54 pm on Nov 1, 2003 (gmt 0)

I think we have to wait for SuzyUK, I think there is some bug calle the '3px jobbie' or somthing and I've seen her post about it...

I don't have a clue though ;)

Nick

MonkeeSage

12:00 am on Nov 2, 2003 (gmt 0)

Positioning might be due to differences in the box models, border loss is wierd, mabye because the element is inline or something(?)...see what happens if you add these lines...

.testclass{
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position:absolute;
width:158px;
top:105px;
left:3px;
border:1px solid #FE682A;
}

Ps. display: block; added just to see about the border thing, no need for it otherwise.

Jordan

korkus2000

12:03 am on Nov 2, 2003 (gmt 0)

Thanks Jordan, that did it. So is it the same in all Gecko browsers? Will the code work with the others?

BTW still no border.

MonkeeSage

12:55 am on Nov 2, 2003 (gmt 0)

Yeah, all Gecko browers (in theory) follow the w3c box model [w3.org] by default, but there is the '-moz-box-sizing' pseudo-attribute that can be used to change the box model used to render given elements. CSS3 has a 'box-model' attribute in the specs that does the same thing, and which Opera 7 supports [opera.com] (not sure about 6), though it's default box model, like IE is based on the DOCTYPE.

Some good info on the models is here (WebFX) [webfx.eae.net] and here (ppk [click cancel at the confirm prompt]) [xs4all.nl].

Tantek �elik also has a 'box model hack [tantek.com]' that is helpful.

I really wish they'd just pick one model (whichever one it is) and stick to it, lol. ;)

Jordan

SuzyUK

6:20 am on Nov 2, 2003 (gmt 0)

Hmmm.. I tried the class and it's rendering fine for me it must something else on the page too, I've never come across a problem like this with Moz's rendering..(it's the browser I design in primarily) and if they get it "wrong" they are ususally right!

btw..

body,margin {
margin:0;
padding:0;
}

is a typo it should be html, body

The 3px text jog bug, which I just wrote about in another post is an IE Bug however there was one version of Opera (7?) that rendered floats similarly to IE.. but this is not a float it's an absolutely positioned element, so I don't think it is this anyway!

I understand about the box-model rendering codes that Jordan gave, that's handy. I usually use IE Conditional comments to feed the different width to IE if required, but either way the borders should also render .. I'm stumped without a bit more code as I think as it must be something else..

can you post the rest of the page with CSS?

Suzy

korkus2000

1:07 pm on Nov 2, 2003 (gmt 0)

I am using Mozilla 1.5 to test with. For some reason no matter what I do I cannot get a border on anything. Really strange. Here is a test page that doesn't show a border. Everything else works fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.column{
background-color : 000000;
border : 1px solid FE682A;
color:ffffff;
}
</style>
</head>
<body>
<div class="column">
some text
</div>
</body>
</html>

patrickhouweling

1:27 pm on Nov 2, 2003 (gmt 0)

You forgot the '#' sign before the color codes, so:

background-color : #000000;
border : 1px solid #FE682A;
color:#ffffff;

Patrick

korkus2000

1:31 pm on Nov 2, 2003 (gmt 0)

That did it. Sometimes the obvious is the hardest to find. I had been working for a while trying to make borders show. Man! Thanks. Interesting that only the border blew up on that though. Maybe since I was declaring multiple styles on one line the parser just ignored it.

[edited by: korkus2000 at 1:32 pm (utc) on Nov. 2, 2003]

SuzyUK

1:32 pm on Nov 2, 2003 (gmt 0)

<edit>Patrick quicker on the button!</edit>

So hopefully it's only typos for you...

Suzy