positioning with IE & Mozilla

  • futurebuzz
  • Student
  • Student
  • User avatar
  • Posts: 75
  • Loc: Birmingham England

Post 3+ Months Ago

Hello,

Can anyone tell me if i can position a table or whatever in IE but in Mozilla make it a few px different all in the same code??

Like:

Code: [ Select ]
position: absolute; top:50px; left:100px; width:50; height: 50px; -moz-position: absolute; top:55px; left:105px; width:55; height: 55px;
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23458
  • Loc: Woodbridge VA

Post 3+ Months Ago

Is this because, your borders or margins look different in Moz? It's been awhile, but I'm pretty sure the pixel variation has something to do with the difference in how Mozilla parses border and or margin values. I'm trying to remember, but I'm almost certain there was a conversation about this somewhere else in this forum.

To answer your specific question, I don't think you can do it like you are asking. You may be able to do it with a custom javascript for browser sniffing and if it's IE it uses one stylesheet and if Moz another. But if I'm reading into your question correctly, you may be able to play with either margin or border settings to solve your problem. (more than likely margin)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

If ATNO is correct - the difference is the CSS box model. If you're not familiar with the box model take a look at this link...

http://www.w3.org/TR/REC-CSS2/box.html

IE measures the width of an object from border to border, where Mozilla measures the width in terms of the content.

You can force Mozilla to measure it the same way by adding these to your style definitions.

Code: [ Select ]
-moz-box-sizing:border-box;box-sizing:border-box;


I'm more comfortable in measuring things from border to border, so all of my HTML/XHMTL templates have this definition...

Code: [ Select ]
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}


//Learned it at Ozzu! :D
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23458
  • Loc: Woodbridge VA

Post 3+ Months Ago

Thanks dM. I'm sure that's the answer to the problem. I was just too busy earlier to look for it. But that looks spot on with what I was thinking.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I tend not to use padding, eg if I want a 10px padding in a div:

Code: [ Select ]
div{
  padding:0px;
  border-style:solid;
}
div p{
  margin:10px;
}
  1. div{
  2.   padding:0px;
  3.   border-style:solid;
  4. }
  5. div p{
  6.   margin:10px;
  7. }


although to be fair you have to mess around with the vertical margins for p to get the line space right....

That just seems to me to be an easier way to get the compatibility than messing around with browser-specific code.

I also start off by making the body have 0px margin and padding.
  • futurebuzz
  • Student
  • Student
  • User avatar
  • Posts: 75
  • Loc: Birmingham England

Post 3+ Months Ago

Fantastic!!!

Thanks guys, it worked.
  • nxt
  • Born
  • Born
  • nxt
  • Posts: 1
  • Loc: Prague

Post 3+ Months Ago

digitalMedia wrote:

Code: [ Select ]
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}




Brilliant - I've been dealing with this so long and it was such pain in the ... (you know - the thing some of us think with) ....suddenly, all my problems are solved! Thanx!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Just in case anyone is interested, the simplest valid way of getting mozilla and IE to give the same width, even with large padding and borders:

Code: [ Select ]
border:5px;
padding:10px;
width:470px !important; /*moz width*/
width:500px; /*IE width*/
  1. border:5px;
  2. padding:10px;
  3. width:470px !important; /*moz width*/
  4. width:500px; /*IE width*/


which works as much as I have tested even in opera. Just make sure you calculate the mozilla width properly and use the !important
  • blankrags
  • Born
  • Born
  • User avatar
  • Posts: 1

Post 3+ Months Ago

WOW! Such a simple solution to such an annoying problem. Thanks!
  • kailyn_morgan
  • Novice
  • Novice
  • kailyn_morgan
  • Posts: 22
  • Loc: london

Post 3+ Months Ago

oh... i was abt to give the same solutiona s the above only.. :)

I think the best is to use DIV for the same and also the codes given above are just fyn... do go ahead with them and I am sure you wont find any problem with them....


Cheers,
Kailyn Morgan
http://www.epurplemedia.co.uk
  • Megalith
  • Born
  • Born
  • Megalith
  • Posts: 3

Post 3+ Months Ago

Sorry for bumping such an old thread---I'm a total noob. How and where do I integrate DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

I don't understand what you're saying ... ?
  • Megalith
  • Born
  • Born
  • Megalith
  • Posts: 3

Post 3+ Months Ago

I'm asking, how exactly (where) do I integrate this code?

After some searching, I've also found some sites stating that you can have IE and Firefox share the same box model by specifying a particular DOCTYPE.

Didn't seem to work for me, though.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

What do you want to accomplish by "implementing" that code?
  • Megalith
  • Born
  • Born
  • Megalith
  • Posts: 3

Post 3+ Months Ago

I want Firefox and IE to share the same box model.

I'm currently coding a newsletter, and Firefox adds around 5px of space.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

The code goes anywhere in your CSS. Is that what you meant by 'where'? it's not specified in your html like the doctype - you put it into the external CSS sheet. I mean theoretically you could add it to the html but it's best practice not to do that.............

hope that helps at all :D

alternatively, make it a practice to put the padding onto the text as opposed to the container holding the text. that tends to work too. (the problem appears when you have 'margin' and 'padding' values on elements that have a defined width and height - mozzilla counts the padding as additional width to the one already specified (so a box with a width of '300px' and padding of '5px' will come out to 310px) and explorer doesn't count padding as additional.... or was it the other way around? hmmm.... it's something like that anyways :D
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6229
  • Loc: South-Africa

Post 3+ Months Ago

here is a link that could be of some assistance to you ...
website-design-forum/width-width-width-right-t21298.html
  • misksh
  • Born
  • Born
  • User avatar
  • Posts: 1

Post 3+ Months Ago

I added this code to my style:

div {-moz-box-sizing:border-box;}

It worked for me.
  • Method
  • Born
  • Born
  • Method
  • Posts: 2

Post 3+ Months Ago

digitalMedia wrote:

Code: [ Select ]
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}




I found this fixed the problem for IE/Firefox. However google chrome renders the box differently - when you apply padding it pushes the box to a larger size (the extra px specified by the padding) therefore screwing the layout (I also noticed font sizes look different in google chrome). And interestingly enough, dreamweaver cs3 interprets the rendering the same as google chrome (for box's, not fonts).

Does anyone know how to fix this google chrome problem?

BTW, google chrome's layout was OK before adding the above code.
  • Method
  • Born
  • Born
  • Method
  • Posts: 2

Post 3+ Months Ago

I am very much a newbie to css (my first look at it was yesterday).

However I have found a fix.

Code: [ Select ]

DIV{
    -moz-box-sizing:border-box;box-sizing:border-box;
    -webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;
}
  1. DIV{
  2.     -moz-box-sizing:border-box;box-sizing:border-box;
  3.     -webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;
  4. }


Dreamweaver still renders it in a bizarre fashion, but google chrome, firefox and IE7 are all happy.

Post Information

  • Total Posts in this topic: 20 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.