Hello all,
I’m new here, but I’m not new to CSS. 
I’m actually quite good at it, but there’s one big annoying thing I always encounter while designing a new website:
The cross-browser margin/padding differences, EVEN with * { margin: 0; padding: 0;}.
Could someone please explain to me why there’s still a difference?
I hope it’s not hard-coded within the browser itself, because then it would be unsolvable, right?
I’m very precise with CSS-coding, so this bothers me a lot.
Thank you all!
Each browser has a default style already applied, so the differences in margins and paddings are attributed to the style set by each browser as written by whoever writes them. This is a custom that goes all the way back to ancient history from before people did much more than change the color of text. That way, a paragraph has spacing, an H1 has bold type etc. A CSS reset is usually what developers use to remedy the situation, to strip them all of thier styles. The one you just mentioned is the original star hack reset. There are other more involved and deeper resets, and, of course, they are all debated. Pick one that is right for you.
Here is the Eric Meyer’s reset:
Hi,
Welcome to Sitepoint
If you have removed the margins and padding from elements then they will be 100% consistent cross browser (apart from form controls (and a couple of other special elements) which have intrinsic browser styling applied with limited scope to change via css).
It may have been better for you to provide an example of where you see that something is different and then we can point you in the right direction. For example have you explicitly controlled the line-height also. Are the font-sizes different? Are there margin collapse issues being thrown into the mix.
There are bugs of course (especially in IE) but apart from bugs things are more or less always consistent within a pixel or two. There will be rounding errors and font width/height differences between browsers and systems but nothing that will really cause issues in a well designed site.
If you have a test case example then we can shed some more light on the problem
Thanks both of you.
The link sdt76 gave me, worked for the biggest part, thanks!
Didn’t know you had to state each element, instead of using the asterisk *.
The only inconsistency now, is the font-size, even though it’s resetted to 100%, and applied a custom size further down the css sheet.
So fonts cannot be truly equal on every browser? With my trained eyes I can also see very small thickness differences.
The asterisk is the universal selector and will select all elements in that position (The universal selector is not a hack and should not be confused with the * html hack).
*{margin:0;padding:0} will remove margin and padding from all elements and for some form elements that can have a bad effect so its best not to use it as a blunt tool but rather refine the rules you use individually with some rules of your own. The Meyer reset is rather overkill and you should develop a small reset of your own or just make sure you reset the margins and padding on the elements you use at the time you use them.
Read this thread for a good discussion on the pros and cons of using resets.
The only inconsistency now, is the font-size, even though it’s resetted to 100%, and applied a custom size further down the css sheet.
So fonts cannot be truly equal on every browser? With my trained eyes I can also see very small thickness differences.
100% would mean 100% of whatever the user has set for their default size or whatever the browser has set for a default size. You can never know what this is and you shouldn’t really care. There will always be differences depending on user settings, browser settings, DPI settings, font settings, anti alias settings, cleartype settings, platform and OS and so on…
You can never control these explicitly and you shouldn’t try. Just accept that font size and font rendering will vary depending on the above and code your layout accordingly. The web is not print and the same rules don’t apply.
With my trained eyes I can also see very small thickness differences.
Do websites need to look exactly the same in every browser. No.
Thanks for the insight Paul!
I’ll definately read that reset discussion.
Thanks again!
Paul is right, I mislabeled it a “hack” mostly because whenever I see the universal selector it usually being used as one. Not a bad thing necessarily, but it’s why I mislabeled it. You don’t actually HAVE to state each element. You can use the simple universal selector, but it may not go far enough for what you need.
I’ve rarely found difficulties using the Meyer reset when I have used it, but generally it does address things you may not use or need. But if you do find issues, don’t be afraid to go in and edit the reset. It’s not the Bible, just a stylesheet. I’ve done that a couple times. It’s just important that you find what works best for you.
I’d wager that the thickness differences have to do with cleartype and lack of clear type. On ancient IE browsers fonts were rendered without aliasing so they looked very thin and pixelated. Nothing you could do about that. Then Microsoft introduced Cleartype to smooth them out. I have found that every browser, including non IE, have different rendering. But in IE, it seems to be the thinnest, where the IE legacy is very thin, and it gets better as the browsers get newer. The Mac based Firefox/Chrome/Safari is the best font rendering I have seen, just my personal preference. I know what you mean though. As a designer it bothers me too.