A few CSS questions
These are probably newb questions, but I'm a newb, so here goes...
1. Why can't I get a margin in IE to match a margin in Firefox? For example, if I float a div element to the left or right and then do a margin to the left or right at a certain % or number of px, it might be show up as 5mm in IE, but shows up as 10mm in Firefox. If I use "float" to position elements in columns, what is the best way to line up the columns horizontally? Or is there a better way to position elements in columns with CSS other than float?
2. Why do my block elements scale automatically when the text is resized in IE, but not in Firefox? How do I get them to automatically scale in Firefox?
Any help is appreciated. Thanks.
~Ryan
teammatt3 posted this at 21:55 — 13th June 2006.
He has: 2,102 posts
Joined: Sep 2003
1. I think the problem is the default margins of the browser. Try using
body {margin:0px; padding:0px;} That might fix it. I think having an outline div and then two floated divs inside it is the best way (that's what I use all the time.)
2. Can't help ya there, but I'm sure someone else here can
Renegade posted this at 22:54 — 13th June 2006.
He has: 3,022 posts
Joined: Oct 2002
Yeah, it could be the default margins and paddings of the elements you are using. With every site that I make, I always have the following:
body, body * {position:relative;
margin:0;
padding:0;
}
This gets rid of all the default margins and paddings (position:relative; is there for Opera[6]). I find it gives me more control if all the margins and padding is set by me.
thesocialx posted this at 04:05 — 14th June 2006.
They have: 14 posts
Joined: May 2006
Ha Ha. Awesome. It worked. That was really the one thing that was holding me back from CSS. Thanks a ton guys!
Neutron2k posted this at 10:14 — 14th June 2006.
He has: 113 posts
Joined: Jul 2005
THe problem with margins in IE is down to the fact that IE is NOT a w3c compliant browser, and it has had a bug with its 'Box model implementation' since version 5.
W3c reccomendation state that a browser should add an elements margin values to the Total width of the element. Internet explorer includes the margins IN the items width.
thus a div with a width of 50px and a margin of 10px each side in firefox, still has a total width of 50px. In IE however, it will be a width of 70px (50px + 10px margin each side).
I have written an article on this at http://www.n2kdesign.co.uk/viewarticle.aspx?aID=31
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.