meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Reset Reloaded

After a bit of time to bake and a few more suggestions from readers, I have what I’m willing to call the final version of my take on the topic of reset styles. To wit:

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

So what changed from the last iteration?

  1. I added background: transparent; to the first rule. It’s probably not as necessary as some of the other bits here, but it seemed like a good thing to add.

  2. Added a :focus rule to try to suppress link outlining. Why? So that you remember to define your own. You should make sure to define an outline, as it’s an important accessibility aid. If you have a universal default, one that applies no matter what the project, then replace my rule with your own.

  3. There’s now a body rule that sets a baseline line-height that will be inherited by the rest of the document (and can be overridden easily), and sets a foreground and background color. Originally, I avoided setting the colors, but decided it was better to put them in. Of course, if you have preferred color defaults other than black on white, edit the declarations to suit your taste.

  4. The a img, :link img, :visited img rule has been dropped. This is because the only browser family it really affects is Gecko line, and they all honor author styles as having precedent over user agent styles (as they should!). So this is already covered by the first rule.

  5. Added a rule for caption, th, td to be left-aligned and normal-weight.

  6. Added a blockquote, q rule to suppress quotes by way of the quotes property. This has the same intent as the previous rule, but approaches it along a different route.

I also asked for help in figuring out how to simulate inherit in IE/Win. In the end, it seems to me like doing so isn’t really necessary for most people. As I said before:

[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.

So that works for me, and I think for most people who have outlooks similar to mine. But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as many of these resets as humanly possible. In that case, you have two basic choices.

  1. Use the script and syntax contributed by Jonathan Snook and Dean Edwards. Note, however, that Dean himself doesn’t recommend doing this, feeling that it’s too computationally expensive for such a small effect. Dean has a lot of experience with scripting around IE/Win’s limitations, so I give his views on this a lot of weight. On the other hand, I’d like to see IE/Win be able to honor inherit, or at least get the same behavior, so I might still use the script. (Though I’d be even happier with a script that just tacked itself onto instance of inherit in a style sheet, like Dean’s IE7 script does for other CSS stuff.)

  2. Put in your own expressions, along the lines suggested by Priit and thacker. It’s not quite the same thing, but it’s a pretty decent approximation.

Like I say, these aren’t necessary unless you’re really sold on the idea of IE/Win being forced into line with everyone else and don’t mind paying the computational overhead. If so, then you can extend your own reset styles as needed.

That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”. Nor am I saying that everyone must use them or else be cast into darkness. Remember before that I termed these “my take on the topic of reset styles” (emphasis added). Your take may be subtly or greatly different. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. Simply the act of taking those defaults into consideration and thinking about them closely puts you ahead of 99% of your peers. I do think that reset styles are quite useful; otherwise, I wouldn’t have written about them here, and certainly not to the extent that I have. My hope is that people will use them as a launch pad for their own resets and for deeper thinking about styling and browsers.

My thanks to everyone who commented, not just those I linked above. And yes, I’m going to get to that “weirdness of form elements” post in the near future.

Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations. So I guess that makes this post now “final.0.1″.

Addendum 4 May 07: background-image: transparent? There’s a big ol’ WTF. Apparently my cold medication has warped me a lot more than I believed. I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds. So, not quite final, apparently.

366 Responses»

    • #1
    • Comment
    • Tue 1 May 2007
    • 0907
    Jim Cook wrote in to say...

    I must say that I am equally as impressed with this as I am by the refining process. It was very pleasing to read the comments, to see how input helped shape the reset. Kudos to you for being so open and objective. I really am very impressed that you do not seem to subscribe much to the “Cult of Meyer” (I do, even though the robes we wear are a bit funky) and remain very open to comments and constructive criticism. You remain tremendously helpful. Thanks for this; I’ll be deploying it in my next project.

    • #2
    • Comment
    • Tue 1 May 2007
    • 0909
    thacker wrote in to say...

    Meyer–

    You put a lot of thought and work into this. Put up a Paypal link — you deserve payment for this. Thank you.

    I am going show some blatant ignorance with this question:

    Is this reset beneficial for print and handheld media style sheets?

    Thank you very much.

    • #3
    • Pingback
    • Tue 1 May 2007
    • 0913
    Received from »Reset Reloaded«: Browserstyles zurücksetzen: DECAF°blog

    […] Eric Meyer: Reset Reloaded […]

    • #4
    • Pingback
    • Tue 1 May 2007
    • 0957
    Received from »Reset Reloaded«: Browserstyles zurücksetzen – SELFHTML aktuell Weblog

    […] Eric Meyer: Reset Reloaded […]

    • #5
    • Comment
    • Tue 1 May 2007
    • 1117
    Tim wrote in to say...

    Another “blatantly ignorant” question. What is the best way to use this? Should you have a “resets.css” page that you link to and then link to another page that has your css? Or do you modify the “resets” as you go?

    Thanks!

    • #6
    • Comment
    • Tue 1 May 2007
    • 1150
    David Mead wrote in to say...

    Thanks for the time you put into this Eric.

    Though I’m going to be sticking with the “Universal Reset” for the time being, the refinements you made with the table, :focus and blockquote elements are great as I invariably end up writing something like that but then have to do battle with the CSS. Nice to get those things cleared off-the-bat.

    • #7
    • Comment
    • Tue 1 May 2007
    • 1156
    thacker wrote in to say...

    Tim–

    The way I am using it .. understand that I am not an expert so take it in that vein, please.

    I use the reset as a separate style sheet with a designated media type of projection and screen. [I have done this until I gain some insight into the impact upon hand-held and print devices of this reset. Braille media types generally ignore CSS, if not mistaken.]

    I use a significantly modified reset on some existing content where I have depended upon a few browser defaults, ie. list and definition types. Again, it is a separate style sheet.

    Meyer has sold me on the issues of tossing browser dependency default styles and of the logic behind semantics.

    During development, I toss in the inherit JavaScript IE CSS within a conditional commented style sheet. This may very well be overkill but before deployment to a production server, the IE JavaScript CSS is removed.

    From there, individual style sheets are added to style the specific content.

    • #8
    • Comment
    • Tue 1 May 2007
    • 1345
    Tim wrote in to say...

    Thanks for the clarification thacker! That was going to be my initial approach but then I wondered about which style would be applied. I know if you assign the same element different styles on the same stylesheet it takes the last one, but I didn’t know how to ensure that it would take “my” style (as opposed to the reset style) when they are on different sheets.

    • #9
    • Pingback
    • Tue 1 May 2007
    • 1510
    Received from Peter Kröner - Die Kunst des Machbaren » Archiv » Browserstyles loswerden mit Reset Reloaded

    […] dies etwas einfacher zu gestalten, hat Eric Meyer heute die finale Version seines Anti-Stylesheets veröffentlicht. Dieser setzt zuverlässig alle Browserstyles außer Kraft und erlaubt es dem […]

    • #10
    • Comment
    • Tue 1 May 2007
    • 1533
    pepelsbey wrote in to say...

    Only border: solid 0 transparent rule can remove ugly border from FIELDSET element in Opera 7, so it may be helpful.

    • #11
    • Comment
    • Tue 1 May 2007
    • 1636
    Holger wrote in to say...

    Maybe I’m just missing something, but … why not just write “html, html *” for the first rule?

    • #12
    • Pingback
    • Tue 1 May 2007
    • 1726
    Received from Fatih Hayrioğlu’nun not defteri » 02 Mayıs 2007 Web’den seçme haberler

    […] CSS’in Üstadı Eric Meyer CSS başlangıç dokümanını yenilemiş. Link […]

    • #13
    • Comment
    • Tue 1 May 2007
    • 2009
    Jason wrote in to say...

    Why not add padding: 0; to the td’s styles instead of requiring old-style markup? I’ll admit that I don’t know if IE will honor it in quirks mode, but I’d be willing to bet that anyone using the reset CSS will be putting IE into standards mode anyway.

    • #14
    • Pingback
    • Tue 1 May 2007
    • 2020
    Received from BarelyBlogging » Blog Archive » links for 2007-05-02

    […] Eric’s Archived Thoughts: Reset Reloaded Final “reset css” code. (tags: css) […]

    • #15
    • Comment
    • Tue 1 May 2007
    • 2022
    Marko wrote in to say...

    Maybe it is good idea to use *{} for first rule. I use that option.

    • #16
    • Comment
    • Tue 1 May 2007
    • 2051
    Philippe wrote in to say...

    The rules for body could just as well be set on the root element: html. That would be my preferred option. Any argument for targeting specifically body ?

    Oh, and nitpicking :-). border:none instead of border:0, as border-style trumps other border properties.

    • #17
    • Comment
    • Tue 1 May 2007
    • 2130
    Jeff wrote in to say...

    How about cursor: default; or cursor: text; ?

    • #18
    • Pingback
    • Wed 2 May 2007
    • 0041
    Received from Keys to Consistent CSS | W3 EDGE | Boston, MA

    […] Eric Meyer has done it again (yes I’m a cult follower). It was awesome to sit through the live walk through of most of the principles that Eric presented in his final version. […]

    • #19
    • Comment
    • Wed 2 May 2007
    • 0312
    Koziołek wrote in to say...

    Hi!
    In first rule better is:

    font-size:62.5%;

    Why? All popular browsers has default font size equal 16px. If we set font size equal 62.5% then font size is equal 10px at screen (but not set 10px, IE6 not resize this rule). Now we have 1em = 10px, so 1..1em=11px etc. It is easyer way to calculate font size.

    // sorry for terrible language.

    • #20
    • Pingback
    • Wed 2 May 2007
    • 0352
    Received from CSS Reset für Browser

    […] Meyer, seines Zeichens CSS-Guru, hat jetzt eine Lösung gebaut, mit welcher die Designer bei allen Browser mehr oder weniger die gleichen Voraussetzungen […]

    • #21
    • Pingback
    • Wed 2 May 2007
    • 0425
    Received from Heiko Eckert - Blog - » Browser-Standard-CSS rücksetzen

    […] zu überschreiben um sie dann im Laufe des Codes neu zu deklarieren. Eric Meyer hat dazu eine nützliche und unglaublich praktische Vorlage […]

    • #22
    • Comment
    • Wed 2 May 2007
    • 0507
    Trey Philips wrote in to say...

    Is there any hope for our dreaded <hr>s, our awful horizontal rules?

    • #23
    • Comment
    • Wed 2 May 2007
    • 0525
    Brownspank wrote in to say...

    I noticed that your line-height value didn’t include a unit… Isn’t a unit required for all non-zero values?

    • #24
    • Comment
    • Wed 2 May 2007
    • 0539
    Markavian wrote in to say...

    Hey, great job. I’m glad I found this - its a task I often have to approach when designing new layouts and I’d recently considered creating my own ‘reset’ file.

    Its nice to see I was thinking along the same lines as other developers, and I welcome not having to write/test this in my own time.

    Kind regards,
    - Markavian

    • #25
    • Pingback
    • Wed 2 May 2007
    • 0600
    Received from The New Basement Tapes » Reset Reloaded

    […] Eric’s Archived Thoughts: Reset Reloaded […]

    • #26
    • Comment
    • Wed 2 May 2007
    • 0614
    Gabriel Radic wrote in to say...

    Eric, you may want to include a fix for the IE button padding issues.

    http://jehiah.cz/archive/button-width-in-ie

    • #27
    • Comment
    • Wed 2 May 2007
    • 0635
    tom wrote in to say...

    hm, wouldn’t it be easier, if we write something like this:


    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    }

    ?

    for the first 2 entries?

    i know, with the star selector everything is catched but i always have to play with borders and fonts for input, textarea and so on.

    am i on the wrong way?

    thanks in advance
    regards, tom

    • #28
    • Comment
    • Wed 2 May 2007
    • 0638
    Victor Hallberg wrote in to say...

    #11: Becuase you don’t want some elements (for example <input>, <select> and <textarea>) from being restyled (and break their appearance) in many cases.

    • #29
    • Pingback
    • Wed 2 May 2007
    • 0648
    Received from The Spanner» Blog Archive » My two favourite word in the English dictionary… DE-FAULT!

    […] So, rather than me try to list a half-arsed set of defaults, I direct you to Eric Meyer, whose written what he considers to be his “final” version of a reset for CSS. […]

    • #30
    • Comment
    • Wed 2 May 2007
    • 0651
    Oliver Coningham wrote in to say...

    Hi,

    Is anyone else still getting the header tags in IE6 and 7 as bold?

    Thanks!

    • #31
    • Comment
    • Wed 2 May 2007
    • 0655
    Jack Sleight wrote in to say...

    I know it doesn’t really matter, but why are “font” and “s” included in the first rules tag list? No one should really be using these, as they’re depreciated, and if you include these, then why no the likes of “strike”, “u”, and “center”? For the same reason, why “applet”?

    • #32
    • Comment
    • Wed 2 May 2007
    • 0702
    Jack Sleight wrote in to say...

    Hmmm, oops, I just noticed you do have strike, my mistake, but I still don’t get why are some depreciated tags in there, and some not?

    • #33
    • Comment
    • Wed 2 May 2007
    • 0731
    Gareth Adams wrote in to say...

    Jack: The word is deprecated (expressed the disapproval of) rather than depreciated (reduced purchasing value) although a enough people seem to mix them up that it’s in danger of changing the meaning and blurring the distinction between the two.

    While I like the idea of this stylesheet, I’m not sure I’m happy with the effect on the <q> element. While I see the reasoning, the web has been held back a lot by people pandering to IEs inability to meet particular standards. Removing the expected styling will cause people to either not use <q> (There’s no point – it does nothing) or use it incorrectly by adding their own quotation marks.

    • #34
    • Comment
    • Wed 2 May 2007
    • 0755
    Jochen wrote in to say...

    Why, thanks Eric, this looks sweet. My only suggestion would be to exclude the ol-tag from the margin reset because it will disable the browser to automatically determine the space needed based on how much space the numeration actually needs. Defining this manually is fine as long as you have control over the number of li-tags inside any given ol but if you have to deal with ol’s of varying length it can be helpful to leave this to the browser.

    • #35
    • Comment
    • Wed 2 May 2007
    • 0801
    Jochen wrote in to say...

    Woops, actually it’s the padding I was talking about, not margin.

    • #36
    • Comment
    • Wed 2 May 2007
    • 0811
    Codmate wrote in to say...

    Why not:

    * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: transparent;
    }

    • #37
    • Comment
    • Wed 2 May 2007
    • 0841
    Martin Jansson wrote in to say...

    It seems that background:transparent in the first rule breaks the following rule in Explorer 6:

    #head {
    padding-bottom:10px;
    background:url(/cimg/bkg_head.png) repeat-x 0 100%;
    }

    About every other time I reload the page, only half of the background image is shown. It helps if I give my #head-element layout, but if I remove background:transparent it works without giving layout.

    • #38
    • Comment
    • Wed 2 May 2007
    • 0847
    Taras Mankovski wrote in to say...

    Hello Everyone,
    Does any one know, how does this compare to YUI CSS Reset? I use it everyday to see if there is an advantage to switching.
    Thank you
    Taras

    • #39
    • Comment
    • Wed 2 May 2007
    • 0901
    Bruno Bergher wrote in to say...

    @Philippe and Holger
    If you use the Firebug extension in Firefox and select any element in a page with any * or html * declaration, you will notice the style is computated in each and everyone parent element to the one you are inspecting. It undoubtedly must create some computational overhead, and should probably be avoided.
    But I’m not 100% sure on this, and probably Eric could clarify this one.

    • #40
    • Comment
    • Wed 2 May 2007
    • 0956
    Emile wrote in to say...

    Is it really necessary to name all tags for the reset, isn’t it possible to describe them as *?

    • #41
    • Pingback
    • Wed 2 May 2007
    • 1009
    Received from CSS Reset Reloaded | monc’s kitchen

    […] Meyer has yet another refined take on a CSS reset technique. Interesting ideas, even though I do not agree on all of it. I prefer the […]

    • #42
    • Pingback
    • Wed 2 May 2007
    • 1023
    Received from David Golding Design | | Web and Print Solutions

    […] at Meyerweb.com has put together a nice package of CSS trickery that will reset the styles for all browsers. I encourage you to check that out as well as his […]

    • #43
    • Comment
    • Wed 2 May 2007
    • 1023
    Oliver Nassar wrote in to say...

    What about radio input boxes???

    • #44
    • Comment
    • Wed 2 May 2007
    • 1037
    Jack Sleight wrote in to say...

    Gareth Adams: Oops, my mistake :) . I thought it looked wrong, but I Googled it, and you’re right, a lot of people make that mistake.

    • #45
    • Comment
    • Wed 2 May 2007
    • 1050
    Eric Meyer wrote in to say...

    Some one-to-one responses. A couple of one-to-many responses (on universal selection, form elements, etc.) to follow, either as a comment or a post.

    Jason: table cells have their padding zeroed in the first rule.

    Philippe: ah, but border: 0; is functionally equivalent to border: none solid 0;, so I did what you suggest, only with three fewer characters.

    Jeff: an interesting suggestion, but I’m deeply wary of messing with the browser’s UI (as opposed to default document layout). One interesting fence case is the underlining of links: I intentionally don’t reset link decoration. It’s just too much like a UI behavior. My choice probably makes total sense to some, and is total nonsense to others—but the latter can always add a decoration reset.

    Trey: not so far as I know. It would be nice, wouldn’t it? If someone comes up with a really good reset rule for <hr />s, I’d love to see it.

    Brownspank: please see “Unitless Line Heights“.

    Oliver: yes, that will happen without addding in the IE inherit simulators mentioned in the second half of the post. There’s no other way to un-bold them without endangering the usual inheritance behavior, as documented in earlier posts on this topic.

    Jack: I included deprecated elements that are inline, and things like applet and embed because they still get used an awful lot. I can’t really explain why I left out center (for example) and kept font. So, in the absence of any clear reason, feel free to make the alterations that suit you.

    Gareth: at this stage of the game, it only makes sense to strip off automatically-generated quotation marks. To some degree, it is catering to IE, but we have to cater to all browsers we support. Does anyone take issue with catering to Firefox’s (and everyone besides Safari’s) lack of support for text-shadow by not doing white-on-white text with a black shadow? To another degree, it’s also suppressing generated content that maybe shouldn’t be generated, though that’s a huge debate we probably don’t want to have in the comments of a post. The subject of generated content in general is kind of touchy and fuzzy, all at once.

    Jochen: zeroing out all list indentation is intentional, even given the issue you bring up. It’s up to the author to figure out how much they need; besides, so far as I’m aware, most browsers don’t automatically calculate an indentation distance based on the number of list items.

    Martin: that shouldn’t happen at all. Not that I doubt you; just there’s no CSS reason on God’s green Earth why there should be a problem. Do you have a test case you could post, along with information on which IE versions evince the problem? Thanks!

    • #46
    • Comment
    • Wed 2 May 2007
    • 1059
    Dirk wrote in to say...

    I’m going to get to that “weirdness of form elements” post in the near future.

    After a troublesome approach of achieving consistent flexible forms, I’m looking forward to it, Eric! We are about to discuss the reset of form elements at the (german speaking) SELFHTML-Blog right now. In my opinion, it’s not that beneficial to touch them and therefore lose their default browser styles - at least concerning the borders. That’s why I’m really interested in your upcoming thoughts about resetting form elements.

    • #47
    • Comment
    • Wed 2 May 2007
    • 1146
    Scott Cropper wrote in to say...

    A lot of you commenting about the use of * instead of listing individual tags needs to read a prior post of Eric’s, “Reset Reasoning”.

    • #48
    • Comment
    • Wed 2 May 2007
    • 1245
    Steven Garrity wrote in to say...

    I too wondered how this compares to the Yahoo Interface Library (YUI) CSS Reset.

    Eric, can you elaborate on why you may have chosen not to use (or build on) the YUI CSS Reset?

    Thanks.

    • #49
    • Pingback
    • Wed 2 May 2007
    • 1300
    Received from Eric Meyer el gurú de css saca su versión de Reset.css · Diseño Web

    […] estilo del navegador y podrás identificar más facilmente lo que aún tienes pendiente, además de otras grandes ventajas. El archivo css es: PLAIN TEXT […]

    • #50
    • Comment
    • Wed 2 May 2007
    • 1339
    Eric Meyer wrote in to say...

    And now, the one-to-many responses.

    To those who advocated using the universal selector, please see the post “Reset Reasoning” for an explanation of why I specifically don’t want to use the universal selector. Some disagree with me, and that’s no problem. The fifth paragraph in that post, beginning with “This is why so many people zero out their padding and margins on everything by way of the universal selector.”, is where I address that particular point.

    That’s also where I explain why I left out various form elements like input and textarea. I haven’t dug into that topic in detail yet, but I at least give a high-level overview of the reasons as part of that post.

    For those who asked about a comparison of this to Yahoo!’s reset.css, I mentioned in “Reset Styles” that their styles go too far in some areas, and not far enough in others (in my opinion, of course). I started with their styles and made the changes I thought were needed or desirable. So you could consider my work a variant on theirs, or a fork, or a sequel, or maybe just an alternative.

    I hope this helps clear things up a bit.

    • #51
    • Comment
    • Wed 2 May 2007
    • 1431
    Steel Frog wrote in to say...

    Finally a solution that will cure my textarea/input woes! Thank you!

    • #52
    • Comment
    • Wed 2 May 2007
    • 1432
    PENIX wrote in to say...

    Glad to see someone making a standard base for css in an “open source” fashion. Can’t wait for final version 2.0.

    • #53
    • Comment
    • Wed 2 May 2007
    • 1446
    Martin Jansson wrote in to say...

    I’ve made a test case for my Explorer bug, take a look at http://marja.se/tests/reset.

    As I said in my previous comment, the background image of my #head div disappears when I have background: transparent in my main reset rule, but it appears if I give the element layout. However, if I remove the background declaration from the rule, the image shows up as it should, even without layout.

    I’m running IE6.0.2900..2180 on Windows XP under Parallels in Mac OSX. The bug is also present in my stand alone version of IE5.5 in the same environment.

    • #54
    • Comment
    • Wed 2 May 2007
    • 1458
    Alfred wrote in to say...

    Doing this will probably makes the page take more time to render… someone confirm this

    • #55
    • Comment
    • Wed 2 May 2007
    • 1506
    Eric Meyer wrote in to say...

    Thanks, Martin! I’ll hit it with various versions of IE and see what transpires.

    Not likely, Alfred—at least, not so much slower that it would be perceptible to humans—but I’d like confirmation one way or the other myself. If using reset styles does cause a perceptible slowdown in multiple browsers, that’s obviously something people should know.

    • #56
    • Pingback
    • Wed 2 May 2007
    • 1522
    Received from Game Makker » Blog Archive » CSS Reset

    […] A huge thanks to Eric for this time-saving file. Eric Meyer’s CSS Reset. Start on a blank canvas. […]

    • #57
    • Comment
    • Wed 2 May 2007
    • 1543
    Joe wrote in to say...

    I’m a little confused, so I just have a question. Why would we want CSS to remove quotes from Q tags, when browsers are supposed to insert the quotes and nest them on their own? If we have CSS remove those quotes, then content authors are more likely to insert their own quotes into the document. But, the very idea of inserting quotes into Q tags goes against the (W3C) way of using Q tags.

    “Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element.” - W3C

    I know that IE bungles this, but I get the feeling like your solution just encourages improper use of the Q tag, violating the above statement. Would you explain this decision for us? Thanks.

    • #58
    • Comment
    • Wed 2 May 2007
    • 1604
    Stefan Klose wrote in to say...

    Great Work, Eric. But what about some quite uncommon things like cursors and auditive elements?

    • #59
    • Comment
    • Wed 2 May 2007
    • 1620
    Tim Wright wrote in to say...

    Good stuff Eric, I remember you talking a little about this at AEA-Boston.
    This is how I deal with my <hr/> tags:

    <style type="text/css">
    hr{
    border: 0;
    border-top: 1px solid #555;
    margin: 0;
    height: 1px;
    }
    </style>

    <!–[if IE]>
    <style type="text/css">
    hr{ position:relative; top:-7px;}
    hr + *{ position:relative; top:-14px; }
    </style>
    <![endif]–>

    This doesn’t work in IE6, but I imagine dean edwards’ script can deal with that. It’s still pretty close.

    • #60
    • Pingback
    • Wed 2 May 2007
    • 1821
    Received from strom und meer » Blog Archive » Links am 02. Mai 2007

    […] CSS reset reloaded a default css style, useful for greasmonkey and all kinds of applications […]

    • #61
    • Comment
    • Wed 2 May 2007
    • 1843
    thacker wrote in to say...

    The Martin background transparency issue, also, affects IE7. Whenever a color value, including transparency, is assigned to the background element within the reset.css, the background image is not recognized within IE [the inherit value aside]. Its gets even more strange — if JavaScript is used to assign a transparency value to background within the reset.css, the issue does not occur within IE — and the JavaScript CSS is only recognized by IE from what I understand. I have no idea what is going on or why.

    • #62
    • Comment
    • Wed 2 May 2007
    • 1920
    db wrote in to say...

    Sorry if this has already been mentioned, but I thought it was relevant - I use Tantek Celik’s undohtml (formatted file: undohtml.css). It’s similar to what you are doing here, but not as hardcore.

    (Minor side note: the URL to Tantek broke your comment preview.)

    • #63
    • Comment
    • Wed 2 May 2007
    • 2332
    Eric Meyer wrote in to say...

    Oh, bother. The background: transparent was supposed to be a background-image: transparent and with that change, it shouldn’t cause any problems (I hope!). I hereby nominate myself for “World’s Worst Self-Editor” for not catching that; I’ve updated the post accordingly and will addend the post to say so.

    • #64
    • Comment
    • Thu 3 May 2007
    • 0022
    Bertilo Wennergren wrote in to say...

    zeroing out all list indentation is intentional, even given the issue you bring up. It’s up to the author to figure out how much they need; besides, so far as I’m aware, most browsers don’t automatically calculate an indentation distance based on the number of list items.

    I just tested this with a 10,000-item “ol”-list and no CSS. All three browsers that I tested it in (Firefox2, MSIE6 and MSIE7) failed to calculate a suitable indent. But the problems started at 10,000. Everything up to that was OK.

    But that was with a default font-size! If I up the font-size a bit. The problems start much earlier.

    Adding the reset CSS made things worse, of course.

    But no big deal in real-life, I guess.

    • #65
    • Pingback
    • Thu 3 May 2007
    • 0259
    Received from TechMount » Archive » Daily Friction #237

    […] CSS Reset Reloaded - Eric Meyer, CSS Guru gives us a run down on some extreme CSS Reset. Think of these as a starting point for creating your own defaults, in addition to being a way to illuminate the nature of browser defaults. […]

    • #66
    • Comment
    • Thu 3 May 2007
    • 0306
    Dan wrote in to say...

    Eric, how do you feel about the YUI font stylesheet? In your opinion does it (or something like it) have a place along-side your reset stylesheet?

    • #67
    • Pingback
    • Thu 3 May 2007
    • 0428
    Received from links for 2007-05-03 « Joost’s weblog

    […] Eric’s Archived Thoughts: Reset Reloaded Eric Meyer (from the CSS book) has worked on a way to standardize how browsers render basic pages. He calls it CSS reset. Could come in handy. (tags: css html webdev programming) […]

    • #68
    • Comment
    • Thu 3 May 2007
    • 0507
    kevin wrote in to say...

    In my reset.css I always set object to display:block due to a 1 pixel gap in some browsers.

    • #69
    • Pingback
    • Thu 3 May 2007
    • 0511
    Received from Eric Meyer’s Reset Reloaded · Rizm

    […] For a detailed description, please visit Eric’s site. […]

    • #70
    • Pingback
    • Thu 3 May 2007
    • 0610
    Received from pristina.org | everything design

    […] Eric’s Archived Thoughts: Reset Reloaded (tags: css) […]

    • #71
    • Pingback
    • Thu 3 May 2007
    • 0717
    Received from links for 2007-05-02 | blog.ftofani.com

    […] Eric’s Archived Thoughts: Reset Reloaded (tags: css) […]

    • #72
    • Comment
    • Thu 3 May 2007
    • 1006
    Ron S wrote in to say...

    Thanks for putting this together, mate. I’ve always had trouble with resetting my CSS, but now it’s a piece of cake.

    • #73
    • Pingback
    • Thu 3 May 2007
    • 1146
    Received from Carl Hage » The ultimate IE web design hacks

    […] a more recent one I’ve found: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/,  you can use this to start any design with. It will reset all your stylesheets and you can go […]

    • #74
    • Pingback
    • Thu 3 May 2007
    • 1320
    Received from Turulcsirip - doransky

    […] néha megver az Isten sitebuild feladatokkal, akkor ezért a cuccért térdelni fogsz: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ doransky — 2007. 05. 03. […]

    • #75
    • Comment
    • Thu 3 May 2007
    • 1649
    amine wrote in to say...

    What are you using background-image: transparent; for ?

    • #76
    • Comment
    • Thu 3 May 2007
    • 1659
    Patrick Teague wrote in to say...

    Anybody know how to get a:focus (or like IE - a:active) to work in Opera? I seem to just be getting a default “background-color: #0a246a; color: #fff“… Or is this unchangeable behaviour like Safari & forms?

    • #77
    • Comment
    • Thu 3 May 2007
    • 1915
    Jason wrote in to say...

    Blah. Head-cold had me in a daze for a few days. Confused cellpadding with cellspacing, and then didn’t bother to check what I was saying anyway. Having just run a check in Win/Ff, Win/IE6 and Win/Opera, I’ve found you don’t need to use cellspacing if you use the border-collapse and border-spacing rules, even in quirks mode, so you can most likely delete that comment.

    I’d personally add empty-cells: show to that sheet, but that’s a personal preference based on how I’ve always figured table cells ought to behave (I always thought it was dumb to have to put a &nbsp; into a cell to make it appear correctly back in the pre-CSS days).

    And if I can rehash an old complaint? Please do something about that preview area. It pins my 2.4 GHz P4 Celeron at 100% for almost a minute while refusing to accept keystrokes in the textarea after a while. Editing my comment in Notepad is really annoying for something that nearly every other comment system in the world pushes to a new page. (Blogger, I think, doesn’t, and it has the same problem. Luckily for me, I never feel the need to comment on Blogger blogs.)

    • #78
    • Comment
    • Thu 3 May 2007
    • 2113
    Eric Meyer wrote in to say...

    Jason: IE/Win ignored border-collapse, border-spacing, and empty-cells at last check (see http://www.quirksmode.org/css/tables.html), which is why I put in the comment. If they’re supported in your copy of IE, you must have found the super-secret full CSS support install that everyone else would also like to have.

    Also, I’ll be happy to replace my preview area plugin when someone points me to a better one for WordPress (and it needs to be be a plugin). The one I have now doesn’t cause any slowdowns in my browsers, but then I’m on a Mac. It does cause weirdness in Safari when there are links in the comment, but since I haven’t found a better one yet, I’ve lived with it.

    • #79
    • Comment
    • Fri 4 May 2007
    • 0243
    nanang wrote in to say...

    How about the scroller bar??

    • #80
    • Comment
    • Fri 4 May 2007
    • 0545
    Simon Douglas wrote in to say...

    Very comprehensive list of styles.

    Like amine, I wonder why you have changed from background: transparent to background-image: transparent. The main problem with the latter is that it won’t validate.

    • #81
    • Comment
    • Fri 4 May 2007
    • 0926
    Eric Meyer wrote in to say...

    What scroller bar, nanang?

    I think my cold medication has wacked me out a lot further than I thought. You’re absolutely right, Simon. Rather than edit it again, I’m taking it out until after the cold has passed.

    • #82
    • Pingback
    • Fri 4 May 2007
    • 1032
    Received from Reset Reloaded: Browserstyles zurcksetzen - XHTMLforum

    […] zurckzusetzen, um eine einheitliche Umgebung zu schaffen. Threat im SELFHTML weblog Eric Meyer: Reset Reloaded __________________ Gruss Dieter selfhtml | css4you | layouts ohne tabellen | warum frames out […]

    • #83
    • Pingback
    • Fri 4 May 2007
    • 1036
    Received from reset reloaded « nineowls

    […] Erics Archived Thoughts: Reset Reloaded “…the final version of my take on the topic of reset styles…” […]

    • #84
    • Comment
    • Fri 4 May 2007
    • 1056
    Rick wrote in to say...

    transparent is not an allowed value for background-image

    I assume you meant background-image: none???

    • #85
    • Comment
    • Fri 4 May 2007
    • 1126
    Jeff wrote in to say...

    I may have just missed it, but is there a license on this?

    • #86
    • Comment
    • Fri 4 May 2007
    • 1304
    thacker wrote in to say...

    Those small inconsistencies that don’t validate and produce errors or warnings, such as proprietary properties or the {background-image:transparent} declaration, place them within a separate style sheet titled, nonvalid.css or some other adequately titled style sheet.

    Knowing that any particular code chunk, script, style, whatever will produce an error or warning is important.

    Standards are not so dogmatic that judicious deviation from them is never justified. Knowledge of why the deviation was made, adequate reference and notation of the deviations for future changes that may be necessary and the insurance that any error/warning does not adversely impact rendering of the content are probably more important criteria.

    The background-image declaration, for example, is important to me. It may not be important to others. The Meyer Reset is a starting point. It is intended for adjustment for individual coding style, project dependency, etc. It will aid in creating consistency of rendering between user agents. It will not guarantee that any given design will render exactly the same between user agents particularly in complex designs. Nothing will do that. Close is good enough with design used for Web browser dependent communication.

    Thank you very much.

    • #87
    • Pingback
    • Fri 4 May 2007
    • 1340
    Received from Chicago Web Designer » Eric’s Archived Thoughts: Reset Reloaded

    […] Eric’s Archived Thoughts: Reset Reloaded […]

    • #88
    • Comment
    • Fri 4 May 2007
    • 1344
    John Schuster wrote in to say...

    here is a style reset I always use:

    u {
    text-decoration: none;
    background: #FFFF00;
    padding-right: 2px;
    padding-left: 2px;
    }

    Awesome CSS Code Thanks for posting this!

    • #89
    • Comment
    • Fri 4 May 2007
    • 1759
    Jason wrote in to say...

    Eric: border-spacing is ignored in Win/IE if you don’t use border-collapse. Team the two declarations up and you’re just fine. Ditto for empty-cells. By itself, an empty <td> doesn’t appear; in conjunction with border-collapse: collapse it works just fine. Apparently border-collapse has a little voodoo with it. I’ve put up a demo on my site to show what I’m talking about. In fact, it looks like quirksmode.org is saying the opposite of what you’re saying: cellspacing overrides border-collapse but isn’t required to make it work. I’d say that empty-cells needs to be changed to “incomplete” at least for IE6 (I’d presume IE7 as well, barring a regression).

    As for the “better” preview, I was thinking of what you usually see in web forums: you click a preview button, and you go to a preview page to look at what you typed, and the text-editor is pre-filled for you if you want to make changes. I realize it’s probably a Javascript issue with Ff 2.0.0.3 causing the slowness, but it doesn’t make things less annoying for me.

    • #90
    • Trackback
    • Fri 4 May 2007
    • 1854
    Received from Agencia Web

    Eric Meyer lanza Hoja de Estilos CSS por Defecto…

    • #91
    • Comment
    • Fri 4 May 2007
    • 2038
    Martin wrote in to say...

    I think Brownspank (#23) has a good point. Why doesn’t the line-height value have a unit. Setting it to just ‘1′ seems odd, any particular reason for doing that?

    • #92
    • Comment
    • Fri 4 May 2007
    • 2041
    Martin wrote in to say...

    Ouch, sorry I didn’t see your reply as a I searched the comments for a reply only on the word ‘line-height’…

    • #93
    • Comment
    • Sat 5 May 2007
    • 0936
    Sibran wrote in to say...

    I have added the clearfix to my reset.css file, for me, it’s a standard.

    /*///////////////////////////////// CLEARFIX ///*/

    .clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;}

    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    • #94
    • Comment
    • Sun 6 May 2007
    • 1709
    Webice wrote in to say...

    Very cool reset.
    I’m happy that you had perfected the method of reseting styles.

    • #95
    • Comment
    • Sun 6 May 2007
    • 1805
    David Hellsing wrote in to say...

    There are lots of things to address here:

    1. font-family: inherit; doesn’t work in opera or IE6. font: inherit; works but not in IE.
    2. There are still default styles set for a, b, code, del, ins, i, s, strike, u, textarea (font face), isindex, menu, dir etc.
    Shouldn’t they be addressed too?

    The idea of disabling all visual styles is appealing, especially with deprecated tags so the author can decide how each tag will be displayed or not. Are you purposely missing some deprecated tags? You are fiddling around with the font tag, why?

    Here is my take. and here is a HTML sample.

    • #96
    • Comment
    • Mon 7 May 2007
    • 0603
    Red wrote in to say...

    A couple of points. I have been using resets similar to this for a while now, and was just about to upgrade mine to the Yahoo reset-min.css when I saw this post.

    I have performed a scary operation and put your version into one of my clients sites and found that it has made things better, though looking at my old code I am unsure as to why - and that is the scary part.

    I am hoping that it is something to do with the ‘inherit’ in my fonts.css (based on tha Yahoo css)

    A note now to Koziołek regarding font-size:62.5%;

    I believe I know why you want to do this. Making the baseline font equal to 10px makes sizing divs which will expand on ctrl+ very simple, however if you really need this, there are some problems…

    Firstly IE - try it, and size a div to 700px, then to 70em - they are not the same width in ie!

    Secondly, I recall a few years ago doing a load of work regarding the Mac/Win font-size issue, then going to my sisters Mac and finding that my work had been mostly a waste of time, and that the font sizes were consistent across the platforms for almost all the browsers I tested. (Maybe someone can explain this to me - has something changed in Mac OSX, or do Safari/Camino take the dpi into account?), but for IE there was definitely an issue.

    I hope the below sorts this out once and for all, though it is unbelievably inelegant.

    An outer-wrap div, enclosing an inner-wrap div in the markup, then:

    /* reset the font sizes to the base font size that we want */
    body {font-size : 100.01%;} /* For Stupid Opera */
    body {font-size : 62.5%;} /* Resets 1em=10px: */
    #outer-wrap {*font-size:101%;} /* For Stupid IE */
    #inner-wrap {font-size:100%;}

    rather unnecessarily (I think) I then put in conditional comments, a stylesheet for Non-IE with:
    body {font-size : 10px;} /* for Konqueror, I hope this doesn’t screw up any other browsers */

    After this I use a stylesheet to set font sizes specifically for elements like p, tables, forms etc, but take good care with these, as you may sometimes find some strange results when tables contain form elements etc.

    I await the barrage of comments pointing out my lack of understanding, but thanks to blogs like these, I am starting to get it… cheers Eric.

    • #97
    • Pingback
    • Mon 7 May 2007
    • 0815
    Received from Remove CSS rules

    […] This is a listing of style rules which removes all default browser formatting. Could be useful. […]

    • #98
    • Pingback
    • Mon 7 May 2007
    • 0835
    Received from Blog do Isra » Zerando tudo no CSS

    […] era a melhor solução, porém através da lista webstandards-br , o Djspark enviou-me uma dica do Eric Meyer onde este dá uma releitura e coloca como o código CSS pode ser melhor escrito de forma a zerar […]

    • #99
    • Pingback
    • Mon 7 May 2007
    • 0931
    • #100
    • Comment
    • Mon 7 May 2007
    • 1503
    Tim Hettler wrote in to say...

    It might be worth adding position: relative to all ul, ol and dl elements. It solves some bugs associated with floated list-items in IE and doesn’t create a negative affect on other browsers.

    • #101
    • Comment
    • Tue 8 May 2007
    • 1515
    Tim wrote in to say...

    I have seen articles advocating 76%, 62.5%, and so on. So, why font-size 100%?

    • #102
    • Pingback
    • Tue 8 May 2007
    • 1828
    Received from The best way to start any web design proyect in CSS · BlogoCola

    […] Eric Meyer has made an implementation of a reset stylesheet, a very useful CSS file that will neutralize any default style from the browsers. Use it to see only your style and not the browser default style. […]

    • #103
    • Pingback
    • Wed 9 May 2007
    • 1056
    Received from mediaFetish » Blog Archive » CSS Reset ala Meyer

    […] The Ultimate CSS Reset from Eric Meyer - this guy knows his stuff. […]

    • #104
    • Pingback
    • Wed 9 May 2007
    • 1350
    Received from Peter Kröner - Die Kunst des Machbaren » Archiv » Default-Stylesheets in der Praxis

    […] ich vor kurzem zwei Projekte begonnen habe, in denen ich Eric Meyers universalen Anti-Stylesheet einsetze, komme ich nicht umhin, diesen praktischen CSS-Schnipsel nochmals ausdrücklich zu […]

    • #105
    • Pingback
    • Wed 9 May 2007
    • 1605
    Received from warpedvisions.org » Blog Archive » Myer’s recommended CSS base

    […] 9th, 2007 in Links Eric Meyer’s recommended base CSS setup, a good default to start with when building new CSS-styled […]

    • #106
    • Comment
    • Thu 10 May 2007
    • 1406
    Billee D. wrote in to say...

    Thanks Eric! I find myself using some form of reset CSS more often these days, mostly due to experimentation with vertical rhythm and trying to “set type” on a computer screen. Your collection of reset styles seems to be more closely aligned to what I use as opposed to the Yahoo! resets. I admit that I too was a little surprised to see the FONT declaration and its’ brethren in there, but I also realize that there are still quite a few CMS’s (and their embedded WYSIWYG editors) that produce bad markup. At least this will give the author some control over those pesky deprecated tags.

    As always, you rock! Thanks again for sharing your insight.

    • #107
    • Comment
    • Fri 11 May 2007
    • 0425
    Christian wrote in to say...

    Maybe Yahoo! can update their reset file based on Eric’s suggestions here. Just started using the Yahoo one by linking directly to it and hope that they will always update it according to the best and most current wisdom.

    • #108
    • Pingback
    • Fri 11 May 2007
    • 2025
    Received from CSS Reset | Building better than beta.

    […] Eric Meyer […]

    • #109
    • Pingback
    • Sat 12 May 2007
    • 1511
    Received from 70 Expert Ideas For Better CSS Coding | Smashing Magazine

    […] both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s […]

    • #110
    • Pingback
    • Sun 13 May 2007
    • 1323
    Received from Links for 5/13/07 [my NetNewsWire tabs]

    […] Eric’s Archived Thoughts: Reset Reloaded — Do you use the reset.css shipped with the Yahoo! UI Library? Eric’s version is a bit more sane (so he says) […]

    • #111
    • Pingback
    • Mon 14 May 2007
    • 0902
    Received from Style Evolution - Dynamic CSS Part 2 at Alex Jones

    […] most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer’s version) to make life […]

    • #112
    • Pingback
    • Wed 16 May 2007
    • 0739
    Received from Les formulaires de reset

    […] css avant de commencer à metre en forme. Voici deux modèles de reset : Yahoo! et celui d’Eric Meyers (que […]

    • #113
    • Pingback
    • Thu 17 May 2007
    • 0440
    Received from error is the mother of all inventions

    […] the unexpected”.. but here in this css reloaded it’s close 2 what i expected >> No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI […]

    • #114
    • Pingback
    • Thu 17 May 2007
    • 1554
    Received from eyedeas » Blog Archive » forms baving badly…

    […] Eric’s posts on resetting styles and particularly reading his recent post on ‘formal weirdness‘ - the strange results […]

    • #115
    • Comment
    • Thu 17 May 2007
    • 1901
    Sherwin Techico wrote in to say...

    Great writeup Eric. I’ve been personally using a revision that rooted from Shaun Inman’s summer/reset CSS presentation a while back. Meanwhile,

    This is why so many people zero out their padding and margins on everything by way of the universal selector. That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs.

    What % of browsers have the same setting for those form elements? Is it too big that using the universal selector might be a step backward? Thanks, and I look forward to your reply.

    • #116
    • Comment
    • Thu 17 May 2007
    • 1909
    Adam Craven wrote in to say...

    As Jason mentions, the reason why you still have to use cellspacing=”0″ is due to the fact that border-collapse:seperate; should actually be border-collapse:collapse; This brings all browsers into line and the spacing with IE will disappear.

    • #117
    • Comment
    • Thu 17 May 2007
    • 1943
    Sherwin Techico wrote in to say...

    In terms of tables, I seem to find myself consistently using the following in my reset: table{border-collapse:collapse;border-spacing:0;width:100%;} Do you see drawbacks in setting that width to 100%?

    • #118
    • Pingback
    • Fri 18 May 2007
    • 0223
    Received from mcdave.net » links for 2007-05-18

    […] Eric’s Archived Thoughts: Reset Reloaded CSS reset (tags: reset css) […]

    • #119
    • Comment
    • Fri 18 May 2007
    • 0229
    Sherwin Techico wrote in to say...

    For comment #115, I just saw this: “Formal Weirdness

    • #120
    • Pingback
    • Fri 18 May 2007
    • 1037
    Received from Netlus » Blog Archive » 5 Perguntas para 12 Designers

    […] mais concentrados na execução dos trabalhos: Image replacement. Seguida de perto pelo global reset hehehe. Mas esse último não conta, já que é padrão. Marcelo Glacial Na codificação HTML […]

    • #121
    • Pingback
    • Fri 18 May 2007
    • 1639
    Received from Redwall_hp » 29 CSS and AJAX Resources

    […] CSS Reset - Remove browser defaults […]

    • #122
    • Pingback
    • Mon 21 May 2007
    • 1524
    Received from Cómo resetear el CSS predeterminado del navegador

    […] q:before, q:after { content: “”; } blockquote, q { quotes: “” “”; } Más información sobre Reset CSS Etiquetas: css, diseño — […]

    • #123
    • Pingback
    • Mon 21 May 2007
    • 2043
    Received from Matt's Daily Diigo Post 05/21/2007 « Matt’s Cuppa

    […] Eric’s Archived Thoughts: Reset Reloaded […]

    • #124
    • Comment
    • Tue 22 May 2007
    • 1703
    Sherwin Techico wrote in to say...

    I think this might be of great help too: ol {list-style-position: inside;}

    @Tim: Regarding the position:relative for ul, ol, and dl–I would think that’s more of a IE/Win bugfix than a “reset” rule. It helps to know though, and would be great for your IE-filter CSS files.

    • #125
    • Comment
    • Tue 22 May 2007
    • 1731
    Sherwin Techico wrote in to say...

    Regarding my ol’s list-style-position, I guess this is more of a workaround to deal with situations where your list goes from 1-digit to 2-digits, to 3 and so on. That is, no need to keep changing margin-left as the list grows. Though it makes the ol quite weird looking, it does the job.

    Unless… there’s a better way?

    • #126
    • Comment
    • Wed 23 May 2007
    • 0902
    Egor Kloos wrote in to say...

    I’m really not a fan of resetting styles. It causes so many maintenance issues that in the end it is not worth it.
    Setting patterns is fine, I do that all the time. Zeroing or resetting is just not a good idea. At least not on the scale that is done here.

    • #127
    • Pingback
    • Thu 24 May 2007
    • 0414
    Received from Now Is A Long Time Too » Web Design Linkage

    […] Eric Meyer has developed an ultimate CSS reset,  which I suspect I’ll be putting to use sooner rather than […]

    • #128
    • Pingback
    • Thu 24 May 2007
    • 2300
    Received from BogeyWebDesign : Designing for cross browser compatibility

    […] After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site. […]

    • #129
    • Pingback
    • Fri 25 May 2007
    • 0417
    Received from Surlignage » Restons simples

    […] et systèmes d’exploitation est tout à fait impossible. Eric Meyer, qui a mis au point une feuille de style supprimant les attributs de style propres à chaque navigateur, s’est d’ailleurs bien […]

    • #130
    • Pingback
    • Fri 25 May 2007
    • 1059
    Received from The Power of Zero - Beast-Blog.com

    […] works zero to bring all the variables together, then reset the common values. Eric Meyers, for one, offers some insights in this task. Roger Johansson also offers some insights here as it pertains to form […]

    • #131
    • Comment
    • Fri 25 May 2007
    • 1108
    heulman wrote in to say...

    I read lot of comments about bugs with background: transparent;
    Of course, background is a shorthand property.

    What about using background-color: transparent;

    heulman

    • #132
    • Comment
    • Fri 25 May 2007
    • 1928
    jmjjg wrote in to say...

    Many thanks for your reset sheet.
    While testing with Konqueror 3.5.5, I noticed I had to add font-variant:normal; to the first rule (for abbr and acronym).
    Also with Konqueror 3.5.5, the q:after rule seems to bring a bug (a square after the q element).

    • #133
    • Trackback
    • Sat 26 May 2007
    • 1435
    Received from Dutchcelt's blog

    CSS Reset…

    I've been reading, to my surprise, the positive reactions on resetting or rather zeroing CSS for crossbrowser conformity. I've had pretty much the opposite experience when I started writing resets years ago. A lot has changed since then so ta…

    • #134
    • Trackback
    • Sun 27 May 2007
    • 1201
    Received from FrogLace WebDesign

    Meyer’s Reset…

    I find the writings of Eric Meyer to be a great source of information and inspiration. So when I learned about Eric Meyer’s “Reset Reloaded” I was ready to try it out.
    As I was planning to use the reset on a separate style sheet, I di…

    • #135
    • Pingback
    • Mon 28 May 2007
    • 0631
    Received from Hostgator » Blog Archive » CSS Reset Reloaded

    […] defaults into consideration and thinking about them closely puts you ahead of 99% of your peers.read more | digg […]

    • #136
    • Pingback
    • Tue 29 May 2007
    • 0418
    Received from Blogpotato » Blog Archive Das button-Dilemma [2x upd] »

    […] die Materie einsteigen wollen: Eric Meyer beleuchtet als Reaktion auf Kommentare zu seinem Artikel Reset Reloaded die Probleme sehr ausführlich und auch Roger Johansson nimmt sich aktuell dem Thema […]

    • #137
    • Pingback
    • Wed 30 May 2007
    • 0225
    Received from Metacosm · links for 2007-05-30

    […] Reset Reloaded All browsers have presentation defaults, but no browsers have the same defaults. It is thus important to define styles that are as consistent as possible across browsers to first reset the defaults. (tags: css design reference) […]

    • #138
    • Comment
    • Wed 30 May 2007
    • 1621
    Tom wrote in to say...

    In working up http://teall.tom-mcgee.com/teall3.html, I was getting annoyed at how the masthead (an h1) looked fat, while the large headline (a span) was nice and slim, despite calling the same font.

    If I change the
    font-weight: inherit;
    to
    font-weight: normal;

    I can get them to match.

    • #139
    • Comment
    • Wed 30 May 2007
    • 1825
    Alejandro Moreno wrote in to say...

    Like heulman said about background. It’s a shorthand property that is not very well supported when you don’t specify all the values (unlike border, for example).

    The first rule could be as heulman suggested, or specify it fully like so:
    background: transparent none repeat scroll left top;
    … and then body { background-color: #fff; }

    • #140
    • Pingback
    • Thu 31 May 2007
    • 0655
    Received from » Webdesigntips uit de grote doos (2) - Wolf’s Little Store -

    […] Alvorens aan de stylesheet voor een website te beginnen is het een goed idee om de stijlen over alle browsers heen te normaliseren. Dit impliceert wel dat je voor elk element opnieuw marges en padding moet gaan bepalen, maar geeft je wel meer controle over je stijlen. Hoe je dit doet, legt Eric Meyer je graag uit in Reset Reloaded. […]

    • #141
    • Pingback
    • Thu 31 May 2007
    • 0804
    Received from Webkrauts » Verrückte Formulare

    […] Eric Meyer sein Reset-Stylesheet vorgestellt hat, wurde er gefragt weshalb er nicht einfach den universellen CSS-Selektor (*) […]

    • #142
    • Pingback
    • Thu 31 May 2007
    • 1719
    Received from Insomniaonline » Blog Archive » links for 2007-05-31

    […] Eric’s Archived Thoughts: Reset Reloaded CSS-Reset Styles und Überlegungen dazu. Mal bei Gelegenheit näher anschauen und mit den bisherigen Resets vergleichen. (tags: css reset webdesign browser) Du kannst die Kommentare dieses Artikels mit diesem RSS-Feed verfolgen. Du kannst auch einen Kommentar abgeben oder einen Trackback von Deiner Seite setzen. […]

    • #143
    • Pingback
    • Fri 1 Jun 2007
    • 1635
    Received from F-LOG-GE » Blog Archive » Eric Meyer auf Deutsch

    […] Eric Meyer hat vor kurzem in seinem Blog das alte Thema Basis-Stylesheet aufgewärmt. Kurz gesagt geht es darum, alle browsereigenen Styles ausser Kraft zu setzen, damit man eine […]

    • #144
    • Pingback
    • Sat 2 Jun 2007
    • 1509
    Received from Psychic Origami » Blog Archive » A little re-theme

    […] got around to theme-ing this blog. I’ve taken the default theme and stripped it down, then reset the css and started from there. Nothing fancy at all, just a bit more personalised and suitable for the […]

    • #145
    • Pingback
    • Mon 4 Jun 2007
    • 0225
    Received from Der CSS-Validator mag meinen Reset nicht | TechNovelty

    […] (Pflichtlektüre für alle die sich mit CSS befassen) findet sich ein Beitrag mit dem Titel Reset Reloaded, welcher ein Beispiel für das Rücksetzen der eingestellten Browserwerte enthält. Meine Variante […]

    • #146
    • Pingback
    • Wed 6 Jun 2007
    • 1159
    Received from Aritz Oiaga Blog » Blog Archive » Reseteando estilos

    […] Eric Meyer’s Global Reset […]

    • #147
    • Pingback
    • Tue 12 Jun 2007
    • 1029
    Received from the designer’s pages » Blog Archive » Expert Ideas For Better CSS Coding

    […] by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS […]

    • #148
    • Comment
    • Tue 12 Jun 2007
    • 1158
    Sam Phillips wrote in to say...

    What about:


    html, body { height: 100% }

    discuss…

    • #149
    • Comment
    • Wed 13 Jun 2007
    • 0711
    Ivan Zhekov wrote in to say...

    I know it’s kinda of topic. Below is a reset rule for the “hr” element:

    hr {
    border: 0;
    height: 1px;
    background: black;
    color: black;
    }

    If you wonder why there is a color attribute it’s because of the way IE family interprets the “hr” element. I came with this idea back in the days, but haven’t used it at all. I usually don’t use “hr” elements, or if I do — I am not concerned with how it looks.

    I hope you find it useful.

    • #150
    • Comment
    • Wed 13 Jun 2007
    • 1102
    Sam Phillips wrote in to say...

    re: #148

    html, body { height: 100% }

    scratch that!

    I was having a brain fart.

    • #151
    • Pingback
    • Thu 14 Jun 2007
    • 1419
    Received from Best Practice: Reset.css » Sabre UX - We Make Things Work For People

    […] Eric Meyer’s reset.css (slightly more agressive) […]

    • #152
    • Pingback
    • Thu 14 Jun 2007
    • 1514
    Received from Blank Wordpress Theme at cannontrodder’s world - cannontrodder - Getting nothing done since 1975.

    […] to help the style sheet remain consistent across browsers. Many thanks to Eric at meyerweb.com for working them all out! June 14th, 2007 | 04:58 pm | Web development | […]

    • #153
    • Comment
    • Fri 15 Jun 2007
    • 1119
    Raine wrote in to say...

    The :focus rule causes performance problems in Opera 9.01. I have a CSS dropdown menu which runs fine normally but slow ways down with the :focus rule.

    Otherwise, great reset sheet.

    • #154
    • Pingback
    • Fri 15 Jun 2007
    • 2227
    Received from links for 2007-06-16 at The New Reader

    […] Eric’s Archived Thoughts: Reset Reloaded (tags: css code development) […]

    • #155
    • Comment
    • Wed 20 Jun 2007
    • 0731
    MoNKi wrote in to say...

    @nanang:
    For the scroll bar use this
    html{
    width: 100%;
    margin-bottom: 1px;
    }

    This force the vertical scrollbar on firefox (like in IE) and fixes visual movements when changing from small pages to big pages (no scrollbar->scrollbar), for example on centered pages.

    • #156
    • Pingback
    • Wed 20 Jun 2007
    • 0737
    Received from Aritz Oiaga Blog » Blog Archive » Hoja de estilos maestra

    […] II. ERIC MEYER’S GLOBAL RESET […]

    • #157
    • Pingback
    • Wed 20 Jun 2007
    • 1058
    • #158
    • Pingback
    • Fri 22 Jun 2007
    • 1452
    Received from Wordpress CSS Tip: Design for Sandbox Theme in a sandbox « //engtech - internet duct tape

    […] by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS […]

    • #159
    • Pingback
    • Mon 25 Jun 2007
    • 0715
    Received from Réinitialisation des éléments HTML

    […] Feuille “Reset CSS” proposée par Eric Meyer. […]

    • #160
    • Pingback
    • Mon 25 Jun 2007
    • 1050
    Received from Can’t All Browsers Just Get Along?

    […] Meyer baked up a respectable version of the CSS reset and I would recommend starting there to get acquainted with it but of course you could develop a […]

    • #161
    • Comment
    • Thu 28 Jun 2007
    • 1648
    Coder wrote in to say...

    I first used reset about a month ago.

    Since then i have really done some great cross browser website builds

    • #162
    • Comment
    • Sun 1 Jul 2007
    • 0338
    Bert wrote in to say...

    Good stuff, but I’m wondering about the font-size: 100%;
    Assuming we are not to assume anything when it comes to cross-browser AND cross-version stuff, is 100% really a “reset”? This would actually (if I understand it right) set the font-size to the UA-default. Wouldn’t a “true reset” be supposed to make the font-size equal in all browsers? In other words it should be UA independant.

    • #163
    • Pingback
    • Mon 2 Jul 2007
    • 0912
    Received from A CSS Framework → The Jim Whimpey Weblog

    […] abstraction into separate files can be really useful is with the use of a reset style sheet and in the use of browser specific hacks. IE6 and IE7 stylesheets can be served based on […]

    • #164
    • Pingback
    • Tue 3 Jul 2007
    • 0919
    Received from Open Source Web Design » Blog Archive » 70 Expert Ideas For Better CSS Coding

    […] by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS […]

    • #165
    • Pingback
    • Tue 3 Jul 2007
    • 0952
    Received from Les intégristes » Blog Archive » Et alors, ce Reset CSS, on l'utilise ?

    […] Meyer a récemment publié une nouvelle version de son fameux Reset CSS. Il s’agit de quelques lignes de code CSS ayant pour but de remettre “à zéro” […]

    • #166
    • Comment
    • Fri 6 Jul 2007
    • 1547
    aljuk wrote in to say...

    Apologies for such a basic question, but I’m curious as to why you’ve included “html” in the reset declaration. Everything in the visible page is included within “body”, so why define “html” as well? Is there some inherent padding/margin within the page but outside of “body”, or is there some other reason? This is really puzzling me - if someone could enlighten me I’d be very grateful.

    • #167
    • Pingback
    • Sun 8 Jul 2007
    • 0112
    Received from » Dicas para trabalhar com CSS- Web Bem Feita - Usabilidade, Acessibilidade & Afins

    […] erros em navegadores como no Opera, por exemplo. H vrios arquivos CSS prontos para isso, como esse do Meyerweb.com em ingls. No se esquea de ler as observaes, elas so importantes (principalmente sobre o […]

    • #168
    • Pingback
    • Mon 9 Jul 2007
    • 0828
    Received from The Nested Float » Revisiting the Expanding Box Bug

    […] there were two things that triggered this bug. First, I’ve started using Eric Meyer’s CSS reset rules. I had forgotten that the reset sets a default line-height of 1 – the unitless […]

    • #169
    • Comment
    • Tue 10 Jul 2007
    • 0724
    sjappo wrote in to say...

    Hi,

    Is it possible to apply this reset-css on a single div (and everything in i