CSS tip of the day

[Xrproto]

I've been asked this several times lately: "Why is X element not in the same position in IE and Firefox when I set the margins &/or padding."

To put it simple every browser has it's own default style sheet...so at the start of your style sheet zero the margin & paddings out like this.

html,body{margin:0;padding:0}
p{margin:0.2em 0 1.2em;padding:0.3em}
h1{margin:0 0 .7em 0;padding:0}
h2{margin:0 0 .7em 0;padding:0}
form {margin:0;padding:0}
div{margin:0;padding:0}
ul {margin:0;padding:0}

Now when you go through and make a class for some elements and start using margins and padding you won't have to worry. Of course you only need to zero out the ones you're using...no since in a useless line.

Here is a global reset but last I checked it messed with the form elements in firefox.

*{margin:0;padding:0}

Oh yeah if you are one that uses;
/* whatever browser */
*margin:whatever; (or what ever you used to compensate)

You'll want to remove those because there won't be a need.

Well this should eliminate the majority of your alignment issues cross browser.

While you're at it....throw img{border:0} in there two. I hate when I see border=0 for every image file..

 

[JamesH]

Usually when I start coding, I zero out using something like * {padding:0px} and do padding, margin, border, and something else, can't remember. For some reason '*' seems to be a default or something? Anyways, thanks for the tip, I'll definitely use it next time.

 

[Xrproto]

Usually when I start coding, I zero out using something like * {padding:0px} and do padding, margin, border, and something else, can't remember. For some reason '*' seems to be a default or something? Anyways, thanks for the tip, I'll definitely use it next time.

Yup that's the global *. I'm not sure if it's fixed with firefox but it use to mess up form elements...if you're not using form elements the global one works great.

 

[nis]

Avoid setting the sideways padding on an element with a fixed width. IE will screw you over if you do. Hell, Ie will screw you over whatever you do, but thats just the way it is.

I read a post somewhere once that said something like when bowsers determine the width of an element, the right browsers will take the width of the element itself, any borders and paddings and add them together. IE will take the width of the element itself only.

Example time: You want a dive 200px wide and with a border of 2px solid black and 10px paddings all around. Firefox will set the width of the div+borders+paddings to 200, this is what we want. IE on the other hand will set the width of the div to 200, then add 2*2 pixels for the border, and then add 2*10 pixels for the padding.

I think thats the way it is, or were before the new version of IE. But then again, this is dredged fro some rather murky depths of my memory, so don't build a religion on it.

My first advice still stands though. If you set a width on an element, don't add side-paddings/borders to the same element.