March 12th, 2007 - by Paul OB

How many times have you heard someone say: “Why does my site look different in IE than in Firefox”?

This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers.

Margins and Padding

One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.

For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other

The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.

In some designs this may not be a problem but in cases where position is important, such as aligning with other elements on the page, then the design may look bad or at least not as expected.

Here are some styles taken from the default Firefox 2.0 stylesheet (html/css) and immediately shows what is going on here:

  1. body {
  2. display: block;
  3. margin: 8px;
  4. }
  5.  
  6. p, dl {
  7. display: block;
  8. margin: 1em 0;
  9. }
  10. h1 {
  11. display: block;
  12. font-size: 2em;
  13. font-weight: bold;
  14. margin: .67em 0;
  15. }
  16.  
  17. h2 {
  18. display: block;
  19. font-size: 1.5em;
  20. font-weight: bold;
  21. margin: .83em 0;
  22. }
  23.  
  24. h3 {
  25. display: block;
  26. font-size: 1.17em;
  27. font-weight: bold;
  28. margin: 1em 0;
  29. }
  30.  
  31. h4 {
  32. display: block;
  33. font-weight: bold;
  34. margin: 1.33em 0;
  35. }
  36.  
  37. h5 {
  38. display: block;
  39. font-size: 0.83em;
  40. font-weight: bold;
  41. margin: 1.67em 0;
  42. }
  43.  
  44. h6 {
  45. display: block;
  46. font-size: 0.67em;
  47. font-weight: bold;
  48. margin: 2.33em 0;
  49. }

As you can clearly see there are various properties that have been set but the most important are the margins and padding as they vary considerably. If you were to look at the default IE stylesheet you would find that there would indeed be few styles that were the same as the above.

What Can Be Done

Since we can never be sure whether the browser’s stylesheet has applied margin or padding to an element the only real option is to explicitly set the margins and padding ourselves. This way we can over-ride the default stylesheet so that we know exactly how each element will behave in each browser.

As we don’t really know what elements have default styling applied to them (across all browsers) we must set the margin and padding for every element we use. In most cases we are just talking about block level elements — you do not need to do this for inline elements such as em, strong, a, etc which seldom have any margin or padding applied to them. Although em and strong will have some styling already applied to them to give them their strong and emphasized look.

Here is how you can reset the padding and margin of block elements when you use them:

  1. html,body{margin:0;padding:0}
  2. p {margin:0 0 1em 0;padding:0}
  3. h1{margin:0 0 .7em 0;padding:0}
  4. form {margin:0;padding:0}

Take the body element for example, and notice that we have included the html element also, and then we have re-set padding and margins to zero. As explained above, various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.

If you did not reset the margins or padding and you simply defined something like this:

  1. body{margin:1em}

Then in Opera you would now have the default padding on the body plus the extra margin you just defined there by doubling the initial space around the body in error.

Also be wary of doing things like this:

  1. html,body {margin:0;padding:1em}

You have now defined 1em padding on the html element and 1em padding on the body element giving you 2em padding overall which probably was not what you intended.

Global White Space Reset

These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.

  1. * {margin:0;padding:0}

The universal selector (the asterisk *) matches any element at all and to turn all elements blue we could do something like this:

  1. * {color:blue}

(Of course they would only be blue as long as they have not been over-ridden by more specific styles later on in the stylesheet.)

The global reset is a neat little trick that saves you having to remember to reset every element you use and you can be sure that all browsers are now starting on even footing.

Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go. As with the problems already mentioned we also need to cater for some browsers that don’t use left margin but use left padding instead.

This can be quite a big issue if, for instance, you have not reset the default padding and margin to zero and try something like this.

  1. ul {padding:1em}

In browsers that have a default margin applied you will now get the default left margin of 16px (approx) and a default padding of 1em, giving you approximately twice the amount of space on the left side of the list. This would, of course, make the design look quite different in the various browsers and not something you would wish to do.

In essence the margin should have been reset to zero, either initially with the global reset, or by simply doing the following:

  1. ul {margin:0;padding:1em}

Now all browsers will display the same, but you will need to ensure that the 1em is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)

Drawbacks

However, as with all things that make life easier there is a price to be paid.

First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will its “depressed when clicked effect” and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.

You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so

Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.

There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.

You can’t add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn’t work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.

Here is an image showing the problems in Firefox and Opera:

Select element in Firefox and Opera

There is no easy fix — it’s something you have to live with if you use the global reset method.

If you do not have any forms in your site (unlikely) then you don’t have to worry about these issues or you can simply choose to ignore them if you think your forms are still accessible and don’t look too bad. This will vary depending on the complexity of your form design and is something you will need to design for yourself. If you are careful with the amount of padding you add then you can get away with a passable design that doesn’t look too bad cross-browser.

Another perceived drawback, of which there has been a lot of discussion, is whether the global reset method could have speed implications on the browsers rendering of the page. As the universal selector applies to every single element on the page, including elements that don’t really need it, it has been put forward that this could slow the browser down in cases where the html is very long and there are many nodes for the parser to travel.

While I agree with this logic and accept that this may be true I have yet to encounter an occasion where this has been an issue. Even if it were an issue I doubt very much that in the normal scheme of things it would even be noticeable but of course is still something to be aware of and to look out for.

The final drawback of using the global reset method is that it is like taking a hammer to your layout when a screwdriver would have been better. As I have noted above there is no need to reset things like em, b , i, a, strong etc anyway and perhaps it’s just as easy to set the margins and padding as you go.

As an example of what I mean take this code.

  1. * {margin:0;padding:0}
  2. p,ol,ul,h1,h2,h3,h4,h5,h5,h6 {margin:0 0 1em 0}

I have negated the padding on all elements and then given a few defaults for the most popular elements that I am going to use. However, when coding the page, I get to the content section and decide I need some different margins so I define the following:

  1. #content p {margin-top:.5em}

So now I have a situation where I have addressed that element three times already. If I hadn’t used the global reset or the default common styling as shown above then I could simply have said:

#content p {margin:.5em 0 1em 0;padding:0}

This way I have addressed the element only once and avoided all issues related to the global reset method. It is likely that you will apply alternate styling to all the elements that you use on the page anyway and therefore you simply need to remember to define the padding and margin as you go.

  1. form{width:300px;margin:0;padding;0}
  2. h1{color:red;background:white;margin:1em; padding:2px;}

Conclusion

The safest method is simply to define the margins and padding as you go because nine times out of ten you will be changing something on these elements and more than likely, it will involve the padding and margins. This saves duplication and also solves all the issue that the global reset may have.

The global reset is useful for beginners who don’t understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.

In the end it’s a matter of choice and of consistency. Whatever method you use make sure you are consistent and logical and you won’t go wrong. It is up to the designer to take control of the page and explicitly control every element that is used. Do not let the browser’s defaults get in your way and be aware that elements can have different amounts of padding and margin as determined by the browser’s own default stylesheet. It is your job to control this explicitly.

95 Responses to “No Margin For Error”

1 Golgotha

Wow Paul, you have written some great articles in the past, but this may be my favorite! Very helpful indeed!

It’s a long read, for a blog post, so I would recommend people print it and give it a read when they have the time. It’s worth your time.

2 Deathshadow

Very good article, though I disagree with the conclusion. For me it’s all about code reduction, and setting it in each and every element just increases the page size. I very rarely have paddings/margins in every element… Let’s say I have fifty or so id/classes, and five of them have margins set… Do I use the global selector once and then set the five, for a total of six classes set resulting in a 1k CSS file, or do I set it individually in all fifty classes and end up with a 6K CSS?

5K might not seem like a big deal, but over 1,000,000 unique serves of the CSS a month (which some of the sites I maintain DO reach) that’s 5 gigs of bandwidth… and the difference between hosting on a 1mbps unmetered and having to pay for a 10mbps or even 100mbps metered service.

Much less, more CSS = harder maintennance.

3 Paul OB

Yes – That’s fair comment. It does depend on the page in hand but there can be reductions in using the global reset method if you are careful with your planning.

My conclusion was with the safest method but possibly did not mean the optimal method :).

I often use the global reset method on sites that have few forms but on others where there are many complicated forms then I would prefer to keep my form elements under control individually.

Ultimately you always want the css file to be as small as possible and if the global reset method helps you do this and suits the way you code then its obviously worth using it.

[...] read more | digg story [...]

5 Joey Livingston

Great article, although this is becoming less of a problem with modern browsers.

6 Rob McM

This is good to get out there, global resets are the way forward.

I first found out about this here:
http://leftjustified.net/journal/2004/10/19/global-ws-reset/

7 fader

great stuff sir!

8 Fenixworkshop » Some good advice about CSS

[...] Blog Entry from Search This: No Margin For Error [...]

9 Ryan Doherty

Good article, have you seen the CSS Reset file from Yahoo? They have done something very similar for a while now:
http://developer.yahoo.com/yui/reset/

10 Matthew Hartman

Your on the money Paul, I have always had these problems, espcially with H1 tags. Instead if H1 tags I usually use an image as a heading which can get annoying at time.

Great article!

11 Cricket Worldcup

It’s a shame that we don’t have any sort of standards, the nuances and quirks between Firefox and Internet Explorer are glaring and quite annoying in trying to get functionality and design to appear as close as possible.

[...] Found this on Digg.com, where the top comment is “The primary reason they render differently is because IE sucks.” Which just about sums it up. But you should read the article anyways if you lose sleep over this kind of thing. [...]

13 Matt

Well, submit the bugs to Mozilla’s Bugzilla! It’s more helpful to submit the bug to various web browsers than it is to just complain about it, offer workarounds, and never mention the problem to people who can actually fix it.

14 Nicholas Rougeux

This is a good article for those wondering about all those inconsistencies.

The global reset method you mention is indeed good for beginners but it can cause more headaches than it cures.

I usually use a variation of the handpicked reset method but I add more of the commonly and semi-commonly used elements to cover all my bases. I also reset the font size for things like form and table elements so I can really start with a clean slate. For example:

button, code, h1, h2, h3, h4, h5, h6,
input, pre, select, table, td, textarea, th
{ font-size: 1em; }

blockquote, body, br, button, dd, fieldset, form, h1, h2, h3, h4, h5, h6,
html, label, legend, li, ol, p, pre, table, td, th, ul
{ margin: 0; padding: 0; }

That always does the trick for me no matter what I decide to use. It’s a little bit more than what you suggested but not much and certainly won’t hinder performance.

Great article.

15 Victor

Question:

I read this article out of sheer curiosity, I don’t do layouts any more.

So from a user’s perspective rather than a designer’s, could I replace the default stylesheet in FireFox 2.0 with one from IE and get pages that display more closely to what I would get in IE?

Thanks!

16 Paul Irish

I’ll echo Ryan and recommend YUI Reset CSS. It removes all styling, but gives you a nice level playing field to build up from.

17 Dan Kubb

I second the recommendation for the Yahoo CSS Reset file: http://developer.yahoo.com/yui/reset/. It not only resets padding and margin styles, but it resets other styles too.

If you link directly to the file, Yahoo even takes care of serving it saving bandwidth. Plus the more sites that link directly to the the same file, the better the chance the end-user’s browser already has it cached.

18 chaoskaizer

good articles. should add about ie haslayout too
http://www.satzansatz.de/cssd/onhavinglayout.html

19 Paul OB

Victor – I assume you could if you could find the IE stylesheet (I believe its buried in a dll somewhere) and then extract the relevant information and re-place firefox’s html.css with your version. Or just use the W3c’s recommended default for html 4.0
http://www.w3.org/TR/1998/REC-CSS2-19980512/sample.html

Matt – I don’t see the differences as bugs so there is nothing to report.

Joey – The issues are still there in modern browsers and will be for some time to come I’m afraid.

All -The main thing to remember is that you should be setting and controlling all these things yourself when you design the page. Just because a browser sets a top margin and bottom margin of 1em doesn’t mean that you have to live with that forever. You are the designer so take control and make it what it needs to be for your layout.

You wouldn’t use a paint program that has all your pictures drawn out for you would you?. You draw your own :).

[...] Why some sites render differently in various browsers? By Daniel Goldman March 13th, 2007 10:37 AM EST I just came across an elucidating article explaining why certain HTML tags display differently depending on the browser you’re using. [...]

[...] read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

22 botheredByBees » links for 2007-03-13

[...] No Margin For Error worried about pesky margin and padding problems in your CSS? Here’s a thorough article about why browsers render HTML differently – and more importantly, how to fix it. (tags: css html webdesign margin padding icab4171a) [...]

23 links for 2007-03-13 « Blog von Markus Golser

[...] Why does my site look different in IE than in Firefox Eine interessante Seite wo beschrieben wird wie man das Aussehen seiner Seite in den verschiedenen Browsern verbessern kann. (tags: css webdesign html browser) [...]

24 Tim McCormack

I recommend *against* the global whitespace reset because it wreaks havoc with form elements. Using a more restricted (whitelisted) reset, you can avoid the poor CSS support for form elements.

25 Golgotha

For those of you that have posted comments asking for help with your CSS. You need to go here if you would like help.

Thanks,
Mark

26 links for 2007-03-14 « B-link List

[...] No Margin For Error How many times have you heard someone say: “Why does my site look different in IE than in Firefox”? (tags: browser compatibility cross-browser design development html layout style tutorial css) [...]

27 Dan Schulz

I’ll second Mark’s suggestion to head to SitePoint. I’m always on there, so don’t hesitate to ask. Paul or I (or perhaps Mark Brown or even Kravvitz) will be more than happy to help. :)

28 Drake

I do suggest YUI rest, fonts and grid css. It’s fabulous and excellent for lots of issues like this. and the best of it is that it is gauranteed by Yahoo web team and lots of other web site developers!!

good for you

29 John

Putting on the optimistic hat: when the CSS3 negation selector gains widespread support, it should make resetting things globally a bit more flexible. ;)

30 blog.henman.ca » links for 2007-03-14

[...] No Margin For Error (tags: css webdesign browser) [...]

31 TechMount » Archive » Daily Friction #228

[...] Why HTML renders differently in different browsers – “Why does my site look different in IE than in Firefox”? is a common question in CSS forums. This is a back to basics article to explain the fundamental reason why your site may look slightly different in various browsers. [...]

32 Toile-filante » La toile en vrac - episode 10

[...] Pourquoi mon site s’affiche différement dans Firefox et dans IE? Comment les attributs margin et padding sont manipulés par les différents navigateurs? [...]

33 Devlounge | Friday Focus #22

[...] Programming – Why HTML renders different in different browsers A thorough article from this authors point of view on why html with render different in every browser. This is why cross-browser compatibility is so important people! [...]

[...] read more | digg story [...]

35 Digg - Means Business

[...] What a difference a day makes! On March 12th Search-This’ traffic hit an all-time high; a ridiculous high. Thanks to Paul O’Brien’s CSS article, “No Margin For Error” and the social phenomenon known as Digg. [...]

36 James Andrews

Brilliant. This artical has solved a major problem in the layout on of my website.

Thanks

Jamie

[...] No Margin For ErrorThis is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers. [...]

38 10 Quick Tips for an Easier CSS Life

[...] This is covered in depth in this article”No Margin For Error”. [...]

39 CSS Rewind: Great CSS Articles

[...] No Margin For Error [...]

40 morganusvitus

The site looks great ! Thanks for all your help ( past, present and future !)

41 Best of March 2007 | Smashing Magazine

[...] No Margin For Error How many times have you heard someone say: “Why does my site look different in IE than in Firefox”? This is a common question in the CSS forums and one I encounter almost on a daily basis. Therefore I am going to go right back to basics for this article and explain the fundamental reason why your site may look slightly different in various browsers. [...]

42 Rudy Computee

Thank you for your help. My css had a crazy huge padding on one element that no browser would read except ie.

I used your global reset to see if it was something that ie did. Nothing changed, so I knew the css sheet had to contain a very wrong number somewhere.

that global reset is a good way to test if it is bad code or bad browser

Thanks again

43 Robert

Thank you for this very precise article.

44 Why HTML Renders Differently · Style Grind

[...] of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each bro… to give styling to certain elements. This usually involves setting default margins and padding to [...]

45 links for 2007-04-30 » mhinze.com

[...] No Margin For Error (tags: css) [...]

46 Where’s My Margin Gone? (or why 1+1=1)

[...] won’t be long before you run into margin issues and while we have covered the general issues in a previous article I would like now to talk a bit about collapsing margins. If you are not familiar with how vertical [...]

47 Nomad-One

I just tried a few of these techniques and it made all the difference. I think for those who breathe CSS they may find their own solutions which suite the gurus, but for me using CSS for only about 1.5 years now It’s a dream come true, I have really had major stress about these browser inconsistencies. Thx for the help!

48 Vik

THANK YOU :D
That helped a lot!
Everything I needed!
(I think there were some errors though…)
But yeah overall, it helped a lot.

49 Paul OB

Hi Vik,

Glad it was helpful.

If you noticed some errors then please identify them so that they can be rectified :)

However – I don’t usually make (many) mistakes so you may have misconstrued something :)

50 Padding difference between IE6 FF using lists

[...] between IE6 FF using lists I starting to advise against the use of the universal selector: No Margin For Error and scroll down ’til you get to Global White Space Reset __________________ [a web design [...]

[...] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this [...]

[...] Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? [...]

53 timethief

Hi there,
Thanks for all the work that went into this article. The explanation was very clear and detailed. I appreciate that because it was exactly what I was looking for.
Happy blogging :)

54 Paul OB

@timethief – Thanks :) Glad it was of some use.

55 Ashish Jha

article was informative.cleared few of my doubts.now i know why some readymade style sheets have * {margin:0;padding:0} .but with this code in css files,w3 validator won’t validte my css file. is validationof any use as far as css is concerned.
Also please tell me which is a better way 1)a single global big css file or 2) small css files for every browser.

56 Paul OB

@Ashish:”* {margin:0;padding:0} .but with this code in css files,w3 validator won’t validte my css file. ”

Hi Ashish,

I think you are confused because * {margin:0;padding:0} is 100% valid and passes validation without error. The universal selector (the asterisk (*)) is a valid selector. (You may be confusing it with * html but that is also valid even though it is a hack.)

You should always validate your css file because at the very least it will pick up typos and silly omissions such as missing semi colons or brackets. IE is the only browser that you really need a hack for and in most cases you should use hacks that validate anyway. If you are using a non-validating IE hack then put it in an IE only conditional comment css file so that the main styles sheet isn’t polluted

Re your questions 1 and 2 there is no easy answer as it all depends on the site in question and the size of the css files.

If you are talking about hacks then the safest way is to use conditional comments to supply IE the hacks that it needs. However these files should be very small because even on large sites you only need a few hacks at most. Don’t include a whole separate stylesheet for each version on IE as that is a waste of bandwidth and will make maintenance harder.

If you weren’t meaning hacks and just talking about multiple stylesheets then that all depends on the site in question. If you have a very large site with many different sections then there is no point in putting all the css in one file and forcing the visitor to load the css for all 1000 pages when they are only visiting one.

In these cases you should split the files into logical sections with a few common css files that can be used on all pages. You then separate the rest of the css into logical sections containing the unique elements for those sections. Many large sites may have up to 30 different css files although at any one time they probably won’t link to more than five at a time.

If its a small site then one css file will probably be good enough.

57 Horizontal Menu Using Lists Problem

[...] Horizontal Menu Using Lists Problem That’s not really the best solution. No Margin For Error __________________ Go Pink for October – Go Pink in Support of Breast Cancer Awareness [a web [...]

58 How do the symbols * . and # apply to IDs differently?

[...] the universal selector using this mean to apply the properties to ALL elements. Read this article – No Margin For Error __________________ [a web design portfolio - Currently AVAILABLE for work | web design | [...]

59 Learning CSS

[...] Margin Issues - Margins are a pain. [...]

60 Which Browser and Version « wpbloggingtips

[...] CSS Tip: Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? [...]

[...] very thorough article about why browsers render HTML differently.read more | digg story Share This Related post: Annual St. George marathon set for Saturday; 6,800 runners [...]

62 Tobey

Very useful information. You really hit a problem that many site-owners suffer from. Thanks a lot for shring!

Cheers -

63 güzellik

The best of it is that it is gauranteed by Yahoo web team and lots of other web site developers.

64 Which Browser and Version « one cool site

[...] CSS Tip: Another post of interest that I encourage you to read answers this common question: Why does my site look different in IE than in Firefox? [...]

65 healthsearchonline

I used your global reset to see if it was something that ie did. Nothing changed, so I knew the css sheet had to contain a very wrong number somewhere.

66 fitness

Thanks for all the work that went into this article.

67 bodrum hotels

thank you. If its a small site then one css file will probably be good enough.

68 Jazztrio Jazz Supply

Thanks for the article cleared up some things (well mostly margin issues actually) that I had to mess around with alot when re-writing our webpage using css.

Jens

69 Sam

This article helped me after hours of searching the web, I found this and it helped a bunch.

Thanks

70 Beeson

Thank you so much, now my web site is IE and Firefox friendly. Awesome to have come across this web site.

71 Gaurav_M

Thanks man…Now at least i will learn to tame cross browsers compatibility..Thanks for wonderful share

[...] for more help with cross-browser CSS read this [...]

73 nemu

hi paul. thanks so much for this article. it’s very helpful. :)

74 Me

Thanks so much for this! I googled across this after getting frustrated with the margin difference between Firefox and IE. This is really helpful. I’ll go back and change some margins in the morning. For now bedtime!

Great article!

75 Hardeep

I’ve been completely stumped as to why my site was appearing differently in IE7 compared to Firefox. This has helped clear that up (hopefully it will sort it out).

Thanks a bunch!!

76 Steve

This is an old article but it helped me get everything looking almost the same in the big 4 browsers. Thanks!

77 Doug C.

Mr. O’Brien, I take my hat off to you, sir. After weeks of fumbling around the Web trying to find the codes to properly align the content on my blog I found this. Bookmarked, Dugg, and shared.

:)

[...] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this [...]

79 Elmer

Nowhere else had I read about browsers plugging in their own default stylesheets, yet this simple concept is key to understanding why they behave differently. Thank you very much for your great explanation. It will help me a lot!

Elmer

80 Neichelle

This made my day, it’s cleared up a bunch of issues for me. Thanks you so much for this!

81 Swallow my design » Hello world!

[...] This is covered in depth in this article “No Margin For Error”. [...]

[...] This is covered in depth in this article “No Margin For Error”. [...]

83 sriraj

HI

I am new to css i got a task that text scrolling is working in FF but not in IE6 & IE7 can u please tell me where I have to make changes .and also in iE6 shading coming around the images but its working good in FF and IE7.Please clarify these two issues.

Thanks
sriraj

84 Paul OB

Hi Sriraj,

You should seek help in the sitepoint forums:

http://www.sitepoint.com/forums/forumdisplay.php?s=&daysprune=&f=53

The posts here are only concerned with discussing the techniques in the article.

85 sandrar

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

86 Nemanja

Paul, thank you very, very much, this article made all the difference in the world to me today! Brilliant.

87 Sylwester w Górach

Preety good article i eaven use some of it to make my web sites better.

Thak You

[...] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this [...]

89 If you have forms on your site…

[...] .. read this basic css margin article – it covers some form specific details that are excellent. read me [...]

[...] and forums; all of which I tried. It wasn’t until I found Paul OB’s article “No Margin For Error” that I discovered I wasn’t the only one who has encountered this [...]

91 Kris

Almost four years, and a couple of versions of IE, later and this article is still as relevant as when it was first written. I stupidly viewed a recent web project in IE, only to discover rendering ‘issues’ in Firefox, Opera and Chrome. The actual ‘issue’ lies with Internet Explorer of course, which does indeed suck in a rather large fashion. I can’t believe that there isn’t some sort of industry standard for all browsers – why should web designers have to worry about cross-browser compatibility, when Microsoft could simply comply with the rest of the rational world?

Not does IE cause layout issues, it takes the longest time to download (about 3 times longer than FF, Chrome or Opera), tries to force a pile of crappy unwanted add-ons onto the user (instead of letting you choose your add-ons later) and guess what happened the first time I ran IE8?…

…”Internet Explorer has encountered an error, and needs to close”…

…different day, same old Microsoft. I couldn’t understand how people could use anything other than IE up until I started designing websites a couple of years back – now I’ve went from being Microsoft’s biggest fan to one of their (many) critics.

Great article by the way. I wish I had read it before getting stressed out by margins etc.

92 Kars

Hi Kris, so true what you’re telling. Hate MSIE!

93 MiB

Paul, beside your observations on form elements I find both your prerequisites and conclusions quite odd.

Why would anyone use the global * when they can reset margins and paddings on the elements they use with a multiple selector?
The solution aren’t catch-all solutions instead of real knowledge, but proper knowledge and a detailed systematic approach to using css.designs.
I got inspiration for my personal system from Michael Bowers 2007 book “Pro CSS and HTML Design Patterns” on apress (1-59059-804-0).

94 Paul OB

@MiB: Thanks for your comments.

Re:”I find both your prerequisites and conclusions quite odd. ”

You’ll need to make specific points and detail your reasons if you want a proper discussion on this matter as saying “it’s quite odd” is in itself….. a little odd.:)

RE:”Why would anyone use the global * when they can reset margins and paddings on the elements they use with a multiple selector?”

I’m not quite sure what you are getting at but people would use *{margin:0;padding:0} instead of the mile long reset (http://meyerweb.com/eric/tools/css/reset/) because it is easier to implement and easier to remember.

However, as I have mentioned in the article it’s not my preferred method (these days I prefer a very small reset and then just reset things as I use them).

Re:”The solution aren’t catch-all solutions instead of real knowledge, but proper knowledge and a detailed systematic approach to using css.designs.”

I believe that’s basically what I was saying from the start and the article was about explicitly controlling the elements that you use and raising awareness of the implications that arise from styles applied via the UAs stylesheet.

The article is over 4 years old now but still stands up quite well to scrutiny and is just as pertinent today as it ever was.

95 The History of CSS Resets | WordPress Crunch

[...] are hyperlinks (<a>), images (<img>), headings (<h1> through <h6>), and the margins and padding given to various [...]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading


    Warning: fopen(./wp-content/themes/big-blue/my_blogroll.php): failed to open stream: Permission denied in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 5

    Warning: fread() expects parameter 1 to be resource, boolean given in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 6

    Warning: fclose() expects parameter 1 to be resource, boolean given in /home/mangeletti/search-this.com/wp-content/themes/big-blue/get_blogroll.php on line 7
  • Smashing Magazine