positioning with IE & Mozilla

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Oct 30, 2007
  • Posts: 2008
  • Loc: Belgrade, Serbia
  • Status: Offline

Post July 14th, 2008, 10:45 pm

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
Eagles may soar in the sky but weasels don't get sucked into jet engines.

celandine designblog
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 14th, 2008, 10:45 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post July 14th, 2008, 11:09 pm

here is a link that could be of some assistance to you ...
website-design-forum/width-width-width-right-t21298.html
Let's leave all our *plum* where it is and go live in the jungle ...
  • misksh
  • Born
  • Born
  • User avatar
  • Joined: Jan 04, 2009
  • Posts: 1
  • Status: Offline

Post January 4th, 2009, 8:54 pm

I added this code to my style:

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

It worked for me.
  • Method
  • Born
  • Born
  • No Avatar
  • Joined: Mar 07, 2009
  • Posts: 2
  • Status: Offline

Post March 7th, 2009, 3:39 pm

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
  • No Avatar
  • Joined: Mar 07, 2009
  • Posts: 2
  • Status: Offline

Post March 7th, 2009, 4:05 pm

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 160 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.