Welcome to WebmasterWorld Guest from 18.208.186.19

Forum Moderators: not2easy

Message Too Old, No Replies

Mozilla and positioning

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

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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]

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

Full Member

10+ Year Member

joined:May 1, 2003
posts:340
votes: 0


What exactly do you mean, and differently to what?
11:43 pm on Nov 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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;
}

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

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


complete guess!

What happnes if you add this:


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

Nick

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

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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?
11:54 pm on Nov 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 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

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

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 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

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

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 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

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

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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>

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

New User

10+ Year Member

joined:Aug 11, 2003
posts:7
votes: 0


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

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

Patrick

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

Senior Member

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 20, 2002
posts:3732
votes: 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]

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

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

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

Suzy