Resetting Again

Published 16 years, 11 months past

I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking.  Here’s the result of that thinking. 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The small changes involve a paring down of the possible quotation around blockquotes and qs.  Before, I was explicitly pushing in empty generated content boxes with content: "", but there was no need.  A simple quotes: none; takes care of suppressing any automatic quotation marks on those elements.

The much bigger change, the shift in thinking, is the removal of the inherit values in the first rule—the ones that wiped out any boldfacing, italicizing, or font variants in browsers other than Explorer.  (You can see them in the “reloaded” post.)  I know, I know, I already defended that practice:

[The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.

But over time, I’ve come to realize that this is more than just a throwaway development tool.  It really is the beginning of a baseline style sheet.  (Or can be.)  Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.

Of course, browsers might treat elements differently when it comes to boldness and decoration and such.  But unfortunately, without inherit as a viable solution (due to the lack of support in Explorer), we’re stuck accepting browser defaults.  This is one area where defaults are pretty well consistent across the board, so it’s a small risk to be taking.  And this certainly doesn’t preclude anyone from adding to these styles to create their own reset that explicitly handles elements like em and strong.

Which leads me to why I explicitly set ins and del.  In some browsers, inserted text is underlined.  This leads to confusion, because most people expect underlined text to be a link.  I decided to explicitly switch that off and leave a note about it, much as I did with :focus styles.

And why am I not zeroing out deprecated elements, like center?  Because they shouldn’t even be in the markup.  The way to handle deprecated elements is with something like Marco Battilana’s Big Red Angry Text, not silently neutering them.

Comments and suggestions are, as ever, welcomed.  I’m going to shift the end result to its own URL, as I promised I would long ago, so that there will be a permanent home outside of the various postings.  Hopefully that will happen before the week is out.

Comments (188)

  1. Pingback ::

    Reset Your Style at Alex Jones

    […] Meyer has updated his reset style sheet, outlining the reasons for his change in the post Resetting Again. The modifications, while small, are logical and affirm how important the Reset sheet has become to […]

  2. I’ve been using your previous “Reset reloaded” for tons of projects, I must say these changes makes a lot of sense – hereby I welcome my new reset. Thanks!

  3. Thanks again for all the work with these Eric, they certainly help make things a lot easier to start with! I will update our current development template version to this now and add your explainations in comments.

    Cheers from across the pond!
    Jon

  4. Thanks for sharing your work. I’ve been using your previous “reset style” and it increased my productivity.

  5. This is probably a basic question, but why did Marco Battilana put the align attribute for and in the BRAT? I didn”t realize that should be avoided. If so what is the better alternative?

    Thanks!

  6. whoops!! I was trying to reference <div> align attribute and <p> align attribute. Guess I’ll use the preview next time! ;-)

  7. So you kept the line-height: 1; statement?
    That’s probably the only line I will comment out on my projects!

    Not a big deal!

  8. Ingenious! Makes sense indeed, as Wolf says :)

  9. I did keep it, Quentin, because line-height is one of the things that is almost guaranteed to be different between browsers. I set it to 1 because it has an obvious result, and reminds me to change it to whatever the project needs. If you have a preferred default (say, 1.33), then by all means make that adjustment. This is, as I said in past posts, a starting point, not an ending point.

  10. Pingback ::

    Bram.us » Eric Meyer’s CSS Reset resetted.

    […] reset styles over the past few months, and came to a bit of a shift in his thinking.” The result can be found over at his blog. Just ingenious I must say! *updating reset.css* Spread the […]

  11. It might also be useful to add a line re-stating any elements “that usually” have padding/margin top and bottom such as:

    h1, h2, h3, h4, h5, h6, p, ul etc.

    Rather than setting them to 0. I realize you are just trying to give us the bare minimum here and not a complete style sheet.

    You may want to consider showing us another stylesheet that you use to rebuild all of these resets that you use for many projects.

    I find myself starting with the same stylesheet each time using both custom styles and reset styles.

  12. why did Marco Battilana put the align attribute for and in the brat? I didn”t realize the issue. what is the better alternative?

  13. I found a some unexpected side effects using IE6 with this new version.

    By moving the “background: transparent;” out of the table selector and into the main selector with the other tags, the following selectors would not put the correct colors in the table cell backgrounds. I believe it has to do with the td now having “background: transparent;” when it didn’t before. I fixed it by moving “background: transparent;” back to the table selector with border-collapse and border-spacing.


    #content table tr.rowA {
    background-color: #efefef;
    color: inherit;
    }
    #content table tr.rowB {
    background-color: #fafafa;
    color: inherit;
    }

    <div id="content">
    <table>
    <tr>
    <th valign="top" nowrap>Date</th>

    <th valign="top">Title</th>
    <th valign="top">Description</th>
    </tr>
    <tr class="rowA">

    <td valign="top" nowrap><a href="/flex3launch.html">Date</a></td>
    <td valign="top"><a href="/flex3launch.html">Title</a></td>

    <td valign="top"><a href="/flex3launch.html">Description.</a></td>
    </tr>
    <tr class="rowB">
    <td valign="top" nowrap><a href="/flex3launch.html">Date</a></td>

    <td valign="top"><a href="/flex3launch.html">Item</a></td>
    <td valign="top"><a href="/flex3launch.html">Description.</a></td>

    </tr>
    </table>
    </div>

  14. Great new reset sheet!

    One question though: How to make the “other” stylesheet more important. currently I have a stylesheet screen.css and the reset sheet via @import in there.
    the body background image defined in the screen.css gets ignored by Firefox though and the background is set to transparent (as defined in the reset.css).

  15. Not tried this new one yet – but thanks again Eric, I include a version of the last one now on all projects. And yes, it does indeed deserve it’s own home – an admirable work.

  16. Good stuff! I’m a big fan of the reset stylesheet – thanks for the update and the awesome brainwork behind it!

  17. Pingback ::

    INCG - Reset CSS | INCG

    […] jullie ook gebruik van Eric Meyer’s reset stylesheet? Ik gebruik het in ieder geval wel bij al mijn projecten. Voor de mensen die het niet kennen, de […]

  18. Trackback ::

    Deliggit.com | The social sites' most interesting urls

    meyerweb.com | Deliggit.com…

    meyerweb.com…

  19. Well, thanks for the feedback on line-height setting! Of course I’d adjust it…

    Good starting point anyways!

  20. For those wondering why [align] is used in BRAT, may I introduce you to the CSS text-align property. :)

    Speaking of text-align, why isn’t a text-align: left mentioned in the near-global selector? I’ve found it quite often I’ve had to turn it off for table headers. Especially when using them as row headers. The old reset style sheet had something for caption, td, th. Why isn’t it in the current version?

  21. Chris, I believe that’s a side effect of IE/Win’s rigged method of styling table rows: it allows the row’s background to be inherited by the cells. (Which is a no-no: backgroumd is a non-inherited property. The only way you could get that effect in CSS terms is by having a td {background: inherit;} rule, but of course IE/Win doesn’t support inherit. But anyway.) The reset styles wipe out that inherited value, as you discovered.

    You should be able to get back the effect you had by changing your selectors to read:

    #content table tr.rowA td
#content table tr.rowB td

    Honestly, I can’t decide if the reset styles exposing a browser bug counts as a bug or a feature.

  22. That shouldn’t happen, Dennis, at least not if I’ve understood you properly. Do you have a test case illustrating the problem you could share?

  23. To all asking why Marco did what he did in the BRAT styles: I’m afraid I’ve no answer. I’m lucky to be able to explain my own rationales. If I had to guess, I’d guess that he wanted to find elements using attributes that can be better addressed via CSS, but that’s only a guess.

  24. Why remove focus outlines, or make them unconventional? There’re needed for keyboard navigation and accessibility… and if you’re Dutch, the government will go and get you.

  25. Couldn’t you replace that very first long statement with:

    body, body * {…

    I know that would also effect tags you aren’t stating, like the depricated ones, but is that an issue? Are there tags you are specifically avoinding applying those rules to?

  26. Actually, I think I recall you mentioning that its due to form elements… if so, don’t worry… I can see they’d be a problem.

  27. Pete, note the comment right before that rule. It’s there to prompt the creation of specific focus styles, precisely for the reason that they’re needed. Again: this is a start, not an end.

    As you say, Fraser, it’s about form elements and not wanting to touch them if at all possible.

  28. Pingback ::

    Ess - Sibran Lens » Blog Archive » Update reset.css from Eric Meyer

    […] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ […]

  29. Hi Eric,

    So your post got me thinking again about how I do maintainable CSS development across webapps to give a common, distinct baseline look, but allowing customization per site/app.

    What approach do you tend to take when styling a new site? Use a reset like the above as a template – i.e. make a copy and start editing it? Perhaps @import it then start overriding? Or something else?

    Using a template means that as the baseline evolves, older sites remain the same as newer sites start to inherit the newer look, kinda nice from a Darwin POV but it does leave the older sites behind.

    On the other hand, using an @import for the baseline means that all the sites will be updated as the baseline is, but you need to test them all for regressions as you go.

    Sometimes it’s a tough decision to make.

    Cheers,
    /Mike

  30. Just curious, but what’s your reason for setting border-collapse:collapse and border-spacing:0 for tables? Those are mutually exclusive, as far as I know. The border-spacing property (which isn’t supported by IE) is ignored in the collapsing borders model.

  31. I have been using your “reloaded one” previously many times now and these changes are very welcome.
    One thing I added to the reset style sheet is the following rule, to hide the default border around linked images.

    a img { border: none }

    Some of you may argue that this doesn’t belong here, but I find it too convenient to drop it out.

  32. Thank you very much again for this CSS reset sheet!

  33. Tommy, it’s related to some old browser bugs, as I recall. Perhaps, given the advances made in browsers, I should revise it to simply say border-collapse: collapse and leave off the border-spacing part. Then again, maybe I should switch border-collapse to separate and add in a default value for empty-cells. Hmmm…

    Damjan, that shouldn’t be necessary because img is listed in the first rule and border is set to 0. Is it being overridden somewhere?

  34. Pingback ::

    links for 2008-01-16, or so says Harry Love

    […] Eric’s Archived Thoughts: Resetting Again Reset element styles (tags: css) Tags: Found Objects […]

  35. Perhaps it’s not such a bad idea to reset the defaults for both border models. :)

  36. Pingback ::

    » Blog Archive » MischMasch 2008-01-16 portenkirchner.net

    […] Meyer made some changes to his reset styles. He promises that there will be a separate page for the reset styles […]

  37. Hello Eric. Thank you for the mention of the BRAT. Much appreciated! Please allow me to follow up on some of the questions.

    Tim, the align attribute was added in as it should be dictated by the CSS, being part of the presentation layer and all. It reaffirms what Brain LePore stated about the text-align property as well as your guess as well.

    Really, the idea behind the BRAT it is to assure that deprecated elements weren’t being used by some of our favourite WYSIWYG editors, as well as properly separate the content layer from the presentation layer.

    And why am I not zeroing out deprecated elements, like center? Because they shouldn’t even be in the markup. The way to handle deprecated elements is with something like Marco Battilana’s Big Red Angry Text, not silently neutering them.

    I completely agree. In the big picture of trying to educate people, I would rather have the "in your face" approach rather than hide the mistakes under the rug, so to speak.

  38. I really like the the :focus outline reset. I always add focus to my links so this will be useful in future projects. I don’t know if I’ll reset all links, but for larger items like masthead links, this will be great. Thanks Eric.

  39. Please include some sort of licence with this, otherwise, how is anyone to use this? I don’t remember seeing any licence for use at all in the last reset stylesheet.

  40. Pingback ::

    Recent Links: January 14 to January 17 at Alex Jones

    […] Resetting Again […]

  41. Extremely useful. Thanks.

  42. Pingback ::

    Orhan Ekici » Eric Meyer yine resetledi

    […] Meyer default css dosyasını tekrar bizlere sundu. Buradan sayfaya […]

  43. Pingback ::

    Orhan Ekici » Elementlerinizi sıfırlayın

    […] rahatlık için ben şahsen tavsiye ediyorum zaten yapacağımız css dökümanımızın başına buradaki kodu […]

  44. Oh, for the love of…

    All right, I’ll put a license on it when I move it to its permanent home. But the idea that a license is needed for a collection of CSS rules about which the author has more than once explicitly said that people should use it as a starting point strikes me as the depths of lunacy. Not your lunacy, Dan: the lunacy of the current legal environment.

  45. Pingback ::

    links for 2008-01-17 « toonz

    […] Eric’s Archived Thoughts: Resetting Again (tags: css reset reference) […]

  46. Pingback ::

    Skylog » Blog Archive » links for 2008-01-18

    […] Eric’s Archived Thoughts: Resetting Again (tags: css) […]

  47. Eric, why do you remove quotes from the q element, when the W3C specifically says that the quotes are to be added automatically by the browser? (The element works especially well on modern browsers when quotes are nested.)

    Your Reset encourages people to place unnecessary quotes around their q markup, when we are all clearly instructed by the W3C to remove them from our q markup.

    I realize that IE doesn’t support quotes, and your reset merely sets all browsers on the same playing field, but if and when IE ever does get around to supporting the q element, we’re going to have to suppress that element on our sites forever in order to prevent double-quotes from appearing everywhere. That doesn’t seem like a good idea for the long term. I’d be very interested to hear your thoughts on this. Thanks!

  48. Pingback ::

    Ready Set Reset » Curtis Henson

    […] Meyer has updated his reset CSS styles again.  For those that don’t know, these reset CSS styles so you have a consistent starting […]

  49. Very Nice Eric. The inherit styles are the one thing that kinda annoyed me!

  50. A quick suggestion: What about background-color for body in general? One day a client told me the basically white website I made for him would look quite crappy and we found out that it’s got to do with Windows’ appearance settings. He had set general text fields/windows backgrounds to be gray and at least IE6 seems to set the page body background to the color of this setting. So it would be an idea to define white as standard background color there, I think.

  51. Pingback ::

    Joshua Clanton - Design for the WEB » Blog Archive » Linklist: Asking Questions, CSS Resets, and the Power of Procrastination

    […] Eric’s Archived Thoughts: Resetting Again Eric Meyer has updated his CSS Reset styles. […]

  52. Pingback ::

    Sexta-feira dos Web Standards #11 · project.47 - Portfolio e blog sobre Web Standards

    […] Resetting Again – Exemplo de CSS global reset, uma pr�tica que pode facilitar muito o in�cio do trabalho de qualquer site em CSS. Cada um possui a sua maneira de desenvolver, mas sempre � v�lido conhecermos outras maneiras de faz�-lo. […]

  53. I haven’t looked into default browser css too much, so this may be a dumb question…

    Which browsers actually need their styles reset for div and span? Are there browsers that don’t display those correctly by default, or are they just in there to be safe?

  54. Pingback ::

    Resetting Again

    […] Full Article at Eric Meyer blog Did you like this post? Digging and sharing is a great way to say thanks!          |  Subscribe to RSS […]

  55. Pingback ::

    olliekav.co.uk » Blog Archive » Global resets CSS

    […] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ […]

  56. Pingback ::

    mwhenry.com » Blog Archive » Front-end Development Link Roundup

    […] Resetting Again Eric Meyer once again pushes the state-of-the-art in CSS resets. […]

  57. Just a head’s up…
    We had a client with a lot of legacy markup including inline align="right" and align="left" attributes for images.

    IE6 and 7 were not honoring those align values and I found out it was because of the vertical-align: baseline rule being applied to the img element.

    Removing this rule from the img element solved the problem.

    Hopefully no one has to deal with a client that needs to support (refuses to change) such markup, but if so, just remember the css reset might be the place to troubleshoot.

  58. Pingback ::

    Eric Meyer's Latest CSS Resets » Freelance Escape

    […] Meyer has published an update to his CSS resets, this time leaving some breathing room for boldface and italic […]

  59. Eric, coming across the css resetting highlights the problems I have teaching web design. I’ve been teaching the basics for over 10 years now and the move to CSS over the years has been a real pain.In the days of table based layouts the students found it easy and it was easy for us to spot mistakes. Of course with css the problem can often be a myriad of things, or something one, two or ten steps back in the process (or just the browser). On the students side, they see the possibilities, go wild with columns and often end in tragedy! Perhaps the answer is always get them to ‘reset’, then proceed with care? Anyone who has conquered this or has suggestions can mail me on r.eskins@mmu.ac.uk.
    Cheers
    Richard

  60. Pingback ::

    Anne Truitt Zelenka » links for 2008-01-21

    […] Eric’s Archived Thoughts: Resetting Again (tags: via:zopemaven css design reference tips) […]

  61. Pingback ::

    Fatih Hayrioğlu’nun not defteri » 21 Ocak Web’den Seçme Haberler

    […] Eric Meyer css başlangıç dosyasını yenilemiş. Bağlantı […]

  62. James, I’m very leery of reliance on generated content. If you rely on generated quotes as recommended by the W3C, then in any non-CSS user agent, there will be no quotation marks. I would rather suppress generation of quotation marks and insert my own, the same way I would avoid or suppress automatic generation of list counters and have them in the content if they were crucial to the document’s integrity. (For example, legal codes.)

    Arne, I originally left that out because I didn’t want to set my own color preferences as a default for everyone else. As I’ve changed my outlook on resetting, though, I’ll consider adding them back in with a supporting comment. Thanks for the prod.

    Eric, the inclusion of div and span is largely a case of future-proofing.

    Andy, thanks for the heads-up. I hadn’t seen that problem before, and I’m aghast at the bug. More thought will be required.

  63. Eric, I wouldn’t worry about it too much. As I mentioned, hopefully no css developer has to support such outdated markup.

    I did fail to mention that your css reset has been a huge help, and I’m glad to see the removal of inherit from the latest revision.

    Thanks for all you do!

  64. Pingback ::

    links for 2008-01-22 « Richard@Home

    […] Eric’s Archived Thoughts: Resetting Again Eric has tweaked his useful ‘css reset’ stylesheet. (tags: css reset) […]

  65. Pingback ::

    betohayasida.net » Blog Archive » links for 2008-01-22

    […] Eric’s Archived Thoughts: Resetting Again (tags: css) […]

  66. Hi Eric. Love the reset styles. Really helps out to combat all of the browser inconsistencies. Consider adding the property zoom: 1; to your styles. Would this be helpful in combating ie and hasLayout? I use this to fix a lot of errors in ie. For example, disappearing borders that re-appear when you scroll past them in ie. What are your thoughts on this? What does the zoom: 1; feature even do as I have been using it for quite sometime without knowing its true purpose.

    Thanks

  67. Pingback ::

    Best Of January 2008 | Best of the Month | Smashing Magazine

    […] Resetting AgainEric Meyer’s latest take on the ultimate global reset file for cross-browser content presentation. The small changes involve a paring down of the possible quotation around blockquotes and qs. […]

  68. Hi Eric, and thanks for all of the time and effort you’ve put into this. I fully agree with your concern regarding non-CSS UAs and generated quotes, and my preferred solution is (also?) to hard-code quotes and use CSS to suppress quote-generation.

    One thing that I have to query about this latest revision, though, is your removal of this, which was in your Reset Reloaded version:

    blockquote:before, blockquote:after, q:before, q:after
    {
    content: "";
    }

    The removal raised a red flag for me, because Safari – as best I can tell from reading info online, since I don’t have access to the browser – does auto-generate quotes for q elements, but does not support the quotes property at all, so would (if I’ve understood correctly) display doubled quotes when there are hard-coded quotes in the markup. This certainly applies to a recent WebKit nightly that I tested in, and Konqueror 3.5.8, if not Safari itself. I’ve posted a proper write-up on my blog (apologies for the link if it’s against your policy), with a test page, and would very much appreciate it if you or some of the other knowledgeable folks here could have a look and see whether I’ve missed something glaringly obvious, or have found a potential sticking point.

    Thanks for any insight.

  69. Please include some sort of licence with this, otherwise, how is anyone to use this?

    Why would a licence be necessary to use this? (I’m not at all versed in legal stuff, hence my asking…)

  70. Hi Eric! While I appreciate the time and effort you put into developing this, how is this different from other “CSS reset” such as the YUI reset?

  71. Hi Eric. I think, its better to use font-size: 100.01% because IE Font Sizing Bug.

  72. Pingback ::

    5 CSS Tips to Make IE (You) Happy | Scarf*oo

    […] will render the page as similarly as possible. To do so, you can use one of the many suggested templates to create a reset.css file and include it before you include any other of your style […]

  73. Pingback ::

    Making the WordPress Menu Smarter - Beast-Blog.com

    […] : 0; /* For me this is new. Gets rid of the dotted outline. Thanks goes to Eric Meyer’s Resetting Again */ } /* Make the RSS link different, there is no “current” page state for this […]

  74. Pingback ::

    CSS bookmark at Curious Office

    […] The most thorough reset convention out there, in my view, is this one by Eric Meyer. Using it as a starting point for most projects is a good idea. […]

  75. Thanks Eric!

  76. Pingback ::

    coderkind.com » Blog Archive » Revised Meyer CSS reset stylesheet

    […] Here […]

  77. Pingback ::

    CSSVault Blog » Blog Archive » Eric Meyer Rethinking CSS Reset

    […] CSS guru Eric Meyer has spent some time rethinking CSS reset and has come up with a new stylesheet: […]

  78. Pingback ::

    links for 2008-02-04 : 7 seconden

    […] Eric’s Archived Thoughts: Resetting Again (tags: css webdesign howto) […]

  79. Pingback ::

    News » Best Of January 2008

    […] Resetting Again Eric Meyer”s latest take on the ultimate global reset file for cross-browser content presentation. The small changes involve a paring down of the possible quotation around blockquotes and qs. […]

  80. Pingback ::

    Max Design - standards based web design, development and training » Some links for light reading (5/2/08)

    […] Resetting again […]

  81. Hi Eric, just a quick note. Something I have added to your reset sheet is textarea { overflow: auto; } which hides the disabled automatic scollbars which IE places inside of textareas. Opera still gets them, but from what I can tell that’s the only browser which does. They still appear once the user has typed enough content to need them and it doesn’t seem to have any adverse effects anywhere.

    Thanks for the styles and all your work!

  82. Pingback ::

    Reset er resatt - igjen - fireisland.no

    […] Meyer CSS-Guruen har nok ein gong endra si utgåve av reset.css – som tilbakestiller nettlesaranes forhåndsdefinerte stilar. Noko av det som er endringar i denne […]

  83. Eric,

    Great that you’re continuing to try to improve your reset styles. I do use a reset when I design that is a variation of yours, though I remove all the deprecated elements from the list. Personally, I’m going to have to toss around on the ‘to inherit or not’ question a bit longer.

    As far as the request for licensing being declared, I definitely share your disgust with the current litigious environment we’ve become that necessitates everything explicitly be flagged as some-such-license or other. I took the easy way out on my blog (which has lots of code examples) and stuck a nice big ‘Creative Commons’ license on the whole thing. It’s the lazy solution perhaps, but it works for me.

  84. Pingback ::

    SitePoint Blogs » CSS Reset Reloaded. Again.

    […] he recently released a modified version that reworked some of those styles, and in doing so conceded that this really could be a consistent […]

  85. Pingback ::

    nachtgedanken » Blog Archive » reset css updated

    […] eric meyer meldet sich mal wieder mit einer aktualisierten version seines reset css. […]

  86. Pingback ::

    CSS: Base Style Sheet

    […] across different browsers. Here’s the style, and be sure to head over to the MeyerWeb to read the article about […]

  87. Outstanding work Eric!

    Like many others, you were my first structured introduction to CSS-based layout. Your work on the stylesheet resets continues a trend of innovation and excellence. Thank you for your hard work and I look forward to putting this into practice.

  88. Pingback ::

    mgipson.com » Blog Archive » Stripping My Style

    […] recently bookmarked a blog post from Eric Meyer called “Resetting Again” which helps deal with the issue. He has created a reset stylesheet which basically strips […]

  89. Pingback ::

    Eric Meyer uppdaterar sin reset style | Tb-one.se

    […] Jag använder detta själv till de flesta webbsidor jag gör och ny kan hitta nya koden här. Sprid denna post: These icons link to social bookmarking sites where readers can share and […]

  90. Pingback ::

    Eric’s Archived Thoughts: Resetting Again at StDNA - Splitting the DNA

    […] Eric’s Archived Thoughts: Resetting Again e44 […]

  91. Pingback ::

    links for 2008-02-12 « Bluebeck blog

    […] Eric’s Archived Thoughts: Resetting Again (tags: css reset webdesign reference) […]

  92. Trackback ::

    Ink and Coffee

    Eric Meyer’s Updated Global Reset CSS Stylesheet…

    I’m a bit behind on this one, but Eric Meyer has updated his global reset stylesheet. Eliminates many browser inconsistencies by assigning values to things like margins and padding, forcing them all to have the same font size, etc. A very useful …

  93. Pingback ::

    ®eflect, ®epent and ®eboot - Blog of Webdesigner Penny Haslop » links for 2008-02-11

    […] Eric’s Archived Thoughts: Resetting Again (tags: css webdesign Reference design) […]

  94. Pingback ::

    Life, it is a Travesty… » links for 2008-01-31

    […] Eric’s Archived Thoughts: Resetting Again Resetting CSS for optimal cross browser presentation. (tags: css meyer reset) […]

  95. /* tables still need ‘cellspacing=”0″‘ in the markup */

    Why should they, I wonder?

  96. hi eric,

    many thanks for a great contribution to the community that has a great impact on the way we all work! i just had a question, more than likely already answered, or a reason given, but i just noticed that the margins on input‘s aren’t reset and was curious to know why? My main issue was with checkboxes and the auto width that IE insists on setting that seems to pad them out, I don’t know if there is a way of getting round this without setting a width/height?

  97. Pingback ::

    » links for 2008-02-20

    […] Eric’s Archived Thoughts: Resetting Again (tags: css stylesheet) […]

  98. Pingback ::

    CSS-FAQ » Blog Archive » Update: Meyer’s popular reset style sheets get reset

    […] The above words from the designer himself are going to clear up some questions about the reset. This is sure to convince others that there is more to CSS than mere styling. […]

  99. Pingback ::

    Evitando problemas de compatibilidade em CSS » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards

    […] os objetos entre os browsers, mas não era suficiente. Foi então que conheci uma solução proposta por Eric Meyer, onde ele reseta todas as propriedades HTML para que fiquem iguais em todos […]

  100. hi,
    i was just hoping to see if anyone knew the answer to my post above…regarding margins/padding on inputs…just a bit confused.

    many thanks,
    tom

  101. Pingback ::

      Acabando de vez com os problemas de compatiblidade no CSS TeclaF1

    […] de “não seguir padrões”. Procurando por opções melhores, achei lá no Pinceladas da Web uma solução, proposta por Eric Meyer esse “milagre” consiste em zerar todos as propriedades HTML […]

  102. Eric,

    thank you for this. I’ve come back to web development after a break of about 3 years, and have IE7, Safari 3, and Firefox 3 to add to the knowledge I had garnered previously. I generally use Safari as my test browser of choice while developing, then do browser specific testing to weed out quirks, and hopefully this will make the latter task less time consuming.

  103. Pingback ::

    stylus blog » Blog Archive » reset CSS = rethink CSS

    […] have used Eric Meyer’s Reset, and recommend you do the same. Apart from its desired effect, it has also proved to be a valuable […]

  104. Pingback ::

    zoejessica.com » Blog Archive » links for 2008-03-10

    […] Eric’s Archived Thoughts: Resetting Again A better CSS stylesheet to reset browser defaults (tags: CSS coding webdesign) […]

  105. Pingback ::

    Taming the Beast: IE6-Proofing Your CSS | Outlaw Design Blog

    […] start our IE6-safe design by ignoring it. I personally am a strong advocate of using a reset stylesheet as the basis for your design; these remove inconsistencies in defaults between browsers […]

  106. Pingback ::

    Folder of Ideas • Pixl Design

    […] ever made but never used. And some stuff I do use. For example, I have a version of Eric’s CSS Reset with some modifications that I have done. It lives in this […]

  107. Eric,

    thank you for this. I try to use em whenever possible, however as mentioned above, with font size I use 100.01% to cure IE of it’s bug. The only other difference is I use

    a img { border: none }

    as Firefox on the Mac has a habit of putting blue borders around images.

    Otherwise, an excellent starting point!

    Regards,

    Karl

  108. Pingback ::

    Randomness | Notes Design

    […] Eric Meyer resets his reset.css […]

  109. Pingback ::

    CSS Reset Updated · Style Grind

    […] Eric Meyer has updated his reset style sheet, tweaking a few things and removing others. […]

  110. Pingback ::

    CSS : Poser les bases — Développement Web Libre

    […] des décalages ou des tailles. Il existe déjà pas mal de reset css notamment ceux d’Eric Meyer et de Yahoo! J’ai pris celui de Yahoo! YUI et je m’en suis servi de base : […]

  111. Pingback ::

    Battling with IE - 4 CSS methods | t.blog

    […] above is the old version of the reset. Eric Meyer has a new version of the browser reset, posted Jan […]

  112. Pingback ::

    analizando los distintos tipos de reset para CSS | francisco arenas

    […] ahora es uno de los resets de CSS más elegantes que conozco, Eric Meyer y su reset, no eliminan todo el formato, sino que modifica lo necesario para igualar los browsers y se […]

  113. Pingback ::

    Il Framework CSS ideale - TomStardust.com

    […] appunto solo il CSS Reset di Eric Meyer che uso come punto di partenza, perchè consente di avere una buona coerenza tra i vari browser […]

  114. Pingback ::

    MyCashflow blogi – Asiaa MyCashflow'sta, Interface-rajapinnasta ja verkkokauppabisneksestä yleisesti.

    […] välissä vuotta 2007 apuun tuli nerokas Eric Meyerin tyylien nollaus, joka jättää lomakkeet täysin koskemattomiksi. Näiden lomakkeiden mukana tuleva base.css […]

  115. Pingback ::

    mcdave.net » links for 2008-04-09

    […] Eric’s Archived Thoughts: Resetting Again (tags: css reset webdesign stylesheet reference design development) […]

  116. Pingback ::

    SMPL05 + PrasetyaMS.net

    […] as the foundation. That way, it’s far easier to layout the design. I also used, as always, Eric Meyer’s reset CSS. Those two are the most important layout tools (rules?) […]

  117. Eric,
    Thanks so much for this reset stylesheet. I think it is SO awesome.

    I made one tweak by resetting the button tag by setting margin/padding:0 and border:none.

  118. Pingback ::

    Fairweather Zealot » Blog Archive » The IA/UX Rogue Wave is Coming…

    […] Reset.css: Great information on using a stylesheet to reset conflicting browser defaults […]

  119. Pingback ::

    Questo tanto discusso CSS Reset « Opera Omnia

    […] due maggiori sono quelli di Eric Meyer, guru CSS, e quello di […]

  120. Pingback ::

    Taming the Best: IE6-Proofing Your CSS : Outlaw Design Blog

    […] start our IE6-safe design by ignoring it. I personally am a strong advocate of using a reset stylesheet as the basis for your design; these remove inconsistencies in defaults between browsers […]

  121. Pingback ::

    Opciones que tenemos para ‘resetear’ nuestro CSS « Alumnos ARTCOM:blog

    […] indicar una preferencia u orden de importancia por uno o por el otro, los ejemplos nos los proveen Eric Meyer en su segunda revisión y el otro ejemplo ha sido provisto por el equipo de desarrollo de Yahoo!. Ambos ejemplos vienen con […]

  122. Pingback ::

    Design em Foco » Resetar os estilos iniciais de CSS

    […] Resetting Again de Eric Meyer (versão atualizada). […]

  123. Pingback ::

    Base Style Sheet… Revised

    […] to have changed it some based on time, experience, and user feedback. The new article is title Resetting Again and I believe that is a great place to start any CSS layout. So be sure to head over there to get […]

  124. Pingback ::

    Quem nunca usou hacks que atire a primeira pedra [no IE] - Cleiton.net

    […] problemas já prevendo o inevitável. Como exemplos destes medicamentos podemos listar os Resets de CSS e afins, os hacks de correção de PNGs transparentes e outros […]

  125. Pingback ::

    » 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs « css4design : des css pour votre design html

    […] son Reset CSS. (L’exemple donné ci-dessous est la mise à jour en date du 15/01/2008, cf. Resetting Again) […]

  126. Pingback ::

    Seleckis.lv :: журнал Никиты Селецкого » » Reset CSS

    […] Reset CSS Написал свой Reset, который буду использовать в web-проектах. Конечно по мере исследований он будет дополняться. Раньше использовал известный ресет Эрика Мейера. […]

  127. Pingback ::

    Reset.css | IнTересности

    […] МегаГУРУ – Эрик Мейер – если кто-то не знает – именно его reset используется в таких популярных CSS фреймворках как 960.gs и Blueprint.css […]

  128. You F#$King Rock!!! I took your resetting CSS code and just inserted it at the top of my CSS sheet, and now all my pages look exactley the same in IE 7 and Firefox. You are are awesome!!! I can’t say enough good stuff about this!! I used to shy away from using CSS because of these browser issues. You have made me a believer in CSS for good!!! Thanks Again!!!

  129. what about a {outline:none} ?

  130. Pingback ::

    CSS Web Design Help » Cross Browser Compatibility

    […] tips are pretty straight-forward – using a doc-type and resetting your css at the top of the file (Eric Meyer’s reset is an excellent choice).  Others I hadn’t considered – avoiding Lucida (although that is […]

  131. Pingback ::

    Operación limpieza | DragóndeLuz.com

    […] Resetting Again de Eric Meyer* (Ene, 2008). […]

  132. Pingback ::

    فایل Reset.css چیست؟! « خاطرات یک برنامه نویس

    […] رو نوشته و اخیرا بروزش هم کرده و اون کسی نیست جز اریک مایر! (البته وبلاگش فـیـلـتـره!… از این آدرس میتونید به […]

  133. Pingback ::

    CSS Reset Updated — freshivore

    […] Eric Meyer has updated his reset style sheet, tweaking a few things and removing others. […]

  134. Pingback ::

    Blackotine» Archive du blog » IE6, la bête noire des intégrateurs

    […] l’utilisation d’un fichier CSS spécifique. J’utilise par ma part celui d’Eric Meyer. Attention cependant, si vous débutez en CSS, je vous déconseille la réinitialisation des styles […]

  135. Pingback ::

    Nate Armagost | Creating a Digg-Style Min-Width Layout

    […] My layout is fully flexible and I have tested it in Firefox (Win/Mac), Safari (Win/Mac), Opera 9 (Win), and Internet Explorer 7. It also works in Internet Explorer 6, but like Digg, it reverts to a static width. You can see the final working prototype here. Everything including the CSS should be inline so you should be able to do a View Source to copy the code. I included minimal styling and a CSS reset based off of Eric Meyer’s Resetting Again. […]

  136. Pingback ::

    The Web Life mobile edition

    […] reset.css script continues to be the industry standard when resetting […]

  137. Pingback ::

    Theodicius » On CSS Resets

    […] using CSS reset code for quite a while. My “weapon of choice” in that category has been Eric Meyer’s version. But lately I’ve been rethinking the proposition, mainly because of some […]

  138. Pingback ::

    The quickest realign ever at Andrea Gandino

    […] (even if some of them are cool, and handy for sure); I always build stuff myself, with only Eric Meyer’s reset stylesheet as a base. Of course, this implies much more thinking […]

  139. Pingback ::

    Resetting Again | Etamine Design

    […] Reset revue et corrigé par Éric Meyer. Le plus gros changement est la suppression de […]

  140. Pingback ::

    IE right extra margin problem | Live and Relax

    […] a solution for this and I come accross this link for the reset.css to make thing more cosistency: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ But still that is not the solution. IE users and other non Firefox users, tell me what you see. If […]

  141. Thanks Eric – your time and dedication has saved us all a lot of hard work and contributed to increasing the standard of our industry!

  142. @#129

    “what about a {outline:none} ?”

    this is covered in the first rule with outline:0.

  143. Pingback ::

    (CSS) Etre compatible avec tous les navigateurs - Pierre MARTIN

    […] peut sembler utopique, mais j’utilise déjà quelques unes de ces astuces dont la feuille de reset et c’est très efficace. Un article à lire coûte que coûte et à garder dans ses favoris […]

  144. Pingback ::

    An Event Apart Chicago | Trevor Davis

    […] then went on to talk about his infamous reset stylesheet. The main point of this part of Eric’s discussion was that you should not just drop in his […]

  145. Pingback ::

    How to Center a Website With CSS | Build Internet!

    […] reset any default values that could interfere with the CSS we are trying to write. More extensive “reset” stylesheets are available, but for the purpose of this exercise we will only reset the essentials, and keep the code to a […]

  146. Pingback ::

    Come ottenere sempre la compatibilità Cross Browser | MaiNick Web

    […] La prima cosa da fare è ripristinare i vostri stili. Disporre all’inizio del vostro css una soluzione di reset che rimuove il padding, margin e border e altre incongruenze dagli elementi. Un buon esempio è il codice reset.css di Eric Meyer. […]

  147. Pingback ::

    Utilizing CSS Best Practices: Making a Great Blank CSS Template File for Next Projects - aComment.net

    […] use this method of Eric Meyer as the base. I just removed “ins”, “del” and […]

  148. Pingback ::

    Maverick Conceptions » Blog Archive » Using Development Concepts in Design

    […] you know. Using existing components such as CSS Frameworks (960.gs, BluePrint CSS, YUI), Resets (Eric Meyer’s Reset CSS), JavaScript libraries (jQuery, Prototype, Mootools) and standard graphics (Feed Icons) […]

  149. Pingback ::

    Creating a Digg-Style Min-Width Layout | Nate Armagost

    […] My layout is fully flexible and I have tested it in Firefox (Win/Mac), Safari (Win/Mac), Opera 9 (Win), and Internet Explorer 7. It also works in Internet Explorer 6, but like Digg, it reverts to a static width. You can see the final working prototype here. Everything including the CSS should be inline so you should be able to do a View Source to copy the code. I included minimal styling and a CSS reset based off of Eric Meyer’s Resetting Again. […]

  150. Pingback ::

    CSS - Partir sur de bonnes bases | Kerblog

    […] et IE7). Il y a la possibilité également de passer par un reset css, tel que celui d’Eric Meyer, mais cette méthode n’est pas forcément la plus […]

  151. Pingback ::

    Quick CSS tips for getting IE 6 and IE 7 too play nice | James P Farrell

    […] Do Reset Browser Styles […]

  152. Eric,
    thanks for the reset.css.

    Andy Ford,
    I just encountered the same ‘vertical-align’ issue. A coworker is using some sort of .net plugin that uses javascript to generate markup. The markup uses ‘align=left’ in table tags to get the effect of float:left on the layout of multiple little tables. Since rewriting the markup seems to be out of the question, I am looking to wrap it in a span and add a fix like this: span.fixIE table {float:left;}

    When will bad markup be vanquished once and for all? Not soon enough.

  153. Pingback ::

    How to get Cross Browser Compatibility Every Time | ADM Blog

    […] Eric Meyer’s reset.css and place the code at the start of your styles. Bam! Clean, cross browser […]

  154. Pingback ::

    How to get Cross Browser Compatibility Every Time - namastec.info

    […] Download Eric Meyer’s reset.css and place the code at the start of your styles. Bam! Clean, cross browser styles. […]

  155. Pingback ::

    Sexy Music Album Overlays · Komodo Media

    […] the first thing I am going to do in lieu of a reset stylesheet is just reset what I am working with like […]

  156. Pingback ::

    Defending IE6 - blog - coda.coza

    […] my CSS: see Eric Meyer’s Reset Reloaded (and Again) as a starting point, or A Killer Collection of Global CSS Reset Styles if you have the […]

  157. Pingback ::

    Open Thread: Create the perfect CSS reset

    […] use Eric Meyer’s Resetting Again as my CSS reset sheet and with his knowledge, his style sheet serves as a start to browser […]

  158. Pingback ::

    Space For a Name - An Experiment in Design

    […] to a central alignment). Also, emphasized and strong text maintain their default appearance. Meyer has argued in favor of leaving these particular defaults as they are common enough and sensible enough to […]

  159. Pingback ::

    Create the perfect CSS reset | vitali software

    […] use Eric Meyer”s Resetting Again as my CSS reset sheet and with his knowledge, his style sheet serves as a start to browser […]

  160. Thanks Eric for this complete resetting solution. I incorporated it in my iWebSkel, which is basically “all you need” to start off a website design:

    iWebSkel: The Ultimate Website Skeleton!

    Thanks,

    — Federico

  161. Pingback ::

    Do you have naked HTML out there? | .eduGuru

    […] resets which are either loved or despised by developers out there. Worst comes to worst you can use Eric Meyer’s CSS Reset or Yahoo YUI Reset to obtain a completely flat style less content area to build upon. Although it […]

  162. Pingback ::

    WMC » Blog Archive » CSS Reset

    […] Dopo la versione originale di Reset.css e Reset Reloaded, Eric Meyer ha appena messo a punto e presentato la nuova versione in Resetting Again. […]

  163. Pingback ::

    Vos Virtual Network » CSS Grid Frameworks

    […] – An elegant and complete CSS Framework that includes a CSS reset (similar to Eric Meyer’s Reset) that eliminates deals with the discrepancies across browsers, a solid grid that can support most […]

  164. Pingback ::

    Web Design Tools and Resources

    […] Reset Eric Meyer’s | Yahoo YUI […]

  165. Thanks Eric! Great Work! I put this into its on separate file with following at the top:

    /* Complete CSS Reset
    Courtesy of Eric Meyer
    http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */

  166. Pingback ::

    Micah Iverson, Freelance Designer » 5 Useful CSS Tips

    […] a really nice clean bit of code for a CSS Reset that I use at the top of all of my CSS files. Click here to see his post on his code. If you are new to CSS I highly suggest checking out the rest of his site to help you get […]

  167. Pingback ::

    Center a Website Using CSS for All Browser

    […] CSS, avoids messing with percentages, and is compatible with all modern browsers. More extensive “reset” stylesheets are available, but for the purpose of this exercise we will only reset the essentials, and keep the code to a […]

  168. Pingback ::

    Don’t lose your :focus - Substance Labs

    […] reset stylesheet, is the one Eric Meyer has built and maintained. It works great and has solid reasoning behind […]

  169. Pingback ::

    Utilizing CSS Best Practices: Making a Great Blank CSS Template File for Next Projects | DevWebPro

    […] use this method of Eric Meyer as the base. I just removed “ins”, “del” and […]

  170. Thanks Eric!

    This isn’t the first time I’ve learned something from you.
    I wasn’t aware of the issues with tables, but then, I don’t use tables.

    Here’s some thoughts of my own:

    html{height: 101%} /* forces scrollbar even on short pages */

    and in the conditional IE only stylesheet:

    * {zoom: 1} /* now everything hasLayout for IE */

    Cheers

  171. Pingback ::

    Çagin Dönmez – A Web Professionals Blog » Blog Archive » Defending IE6

    […] my CSS: see Eric Meyer’s Reset Reloaded (and Again) as a starting point, or A Killer Collection of Global CSS Reset Styles if you have the […]

  172. #165 already mentioned it indirectly:
    IMHO adding a code header that specifies author and points to this site would be useful. That way people that stumble upon this reset sheet by accident (say an inherited website) know where to look for updated versions.

  173. Pingback ::

    Let’s Create the Perfect CSS Reset | Ad Hoc

    […] use Eric Meyer’s Resetting Again as my CSS reset sheet and with his knowledge, his style sheet serves as a start to browser […]

  174. Pingback ::

    A Comprehensive Guide to CSS Resets | DesignFools

    […] The Inman Reset is reminiscent of a terser version of Eric Meyer’s Reset CSS. […]

  175. Pingback ::

    Sexy Music Album Overlays | Illustrator cs6

    […] the first thing I am going to do in lieu of a reset stylesheet is just reset what I am working with like […]

  176. Pingback ::

    CSS Reset | Albert Montoya

    […]  Eric Myer’s reset 2.  Thierry Koblentz  base style sheet 3.   Russ Weakley simple reset 4.  Yahoo’s reset […]

  177. Pingback ::

    CSS Troubleshooting! | Obata Sears

    […] here’s the beginning of his browser reset: […]

  178. Pingback ::

    reset CSS = rethink CSS | stylus

    […] (some of which you will find at the time of writing this if you take a look around).I have used Eric Meyer’s Reset, and recommend you do the same. Apart from its desired effect, it has also proved to be a valuable […]

  179. I always use :focus {outline: 0;} in my style sheet. But now I’m trying to use SASS. SASS showing error to compile it :(

    I change it to *:focus {outline: 0;}, After that it got compiled successfully, But is it same thing to use *:focus or :focus?

    Or i should have to find other way?

  180. Pingback ::

    How to Center a Website With CSS | Barkamedia

    […] extensive “reset” stylesheets are available, but for the purpose of this exercise we will only reset the essentials, and keep the code to a […]

  181. CDN?

    It’d be great to have a meyerreset20080115.css hosted on Google or another CDN, then we can all just include it and forget about it eating bandwidth!

  182. ID.mausuli 99Cash Judi Online Terbaik

  183. Great post! We are linking to this great content on our site.
    Keep up the good writing.

  184. Can I simply just say what a comfort to uncover someone that genuinely understands what they’re discussing over
    the internet. You actually understand how to bring a problem
    to light and make it important. More people have to read this
    and understand this side of your story. I can’t believe you’re not more popular
    given that you certainly have the gift.

  185. My brother suggested І mіght likee tһіѕ website.
    He was entirely riցht. This pkst аctually madе my daү.
    Yoս cann’t imagine simply hoѡ much time
    I had spent for tһiѕ information! Thanks!

    Here iѕ myy web sitye UK Best Writing (customessayswriters.org)

  186. Trackback ::

    новогодние подарки для детей

    новогодние подарки для детей

    Resetting Again – Eric’s Archived Thoughts

  187. Superb blog! Do you have any helpful hints for aspiring writers?
    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like
    Wordpress or go for a paid option? There are so many choices out there
    that I’m completely overwhelmed .. Any recommendations?

    Thank you!

  188. You are so cool! I don’t believe I’ve read a single thing like that before.

    So great to find somebody with original thoughts on this subject.
    Seriously.. thank you for starting this up. This website is
    one thing that is needed on the web, someone with a little originality!

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview