meyerweb.com

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

Reworked Reset

Here’s the latest version of my “baseline” style sheet, with some changes based on feedback from readers on the original post.

/* Don't forget to set a foreground and background color 
   on the 'html' or 'body' element! */
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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

The changes are:

  1. The leading comment — rather than fill in some default document colors, which I hesitate to do given how often they’ll be changed, I just threw in a comment reminding the author that setting them is a good idea.  I’d expect that anyone who uses their own set of baseline styles will fill in their own favorite color set.

  2. font-weight: inherit; — this used to be normal, but it was pointed out that this would upset normal inheritance.  For example, if you set a div to be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assigned normal).  Using inherit avoids this problem while still “zeroing out” boldface styling.

  3. font-style: inherit — same reasoning.

  4. vertical-align: baseline — this brings everything onto the baseline, including superscripts and subscripts.  This forces authors to determine the exact vertical offset they want for such elements, as well as any others they might care to vertically shift, as well as how they’ll accomplish said shift(s).

  5. a img, :link img, :visited img — this will make sure images in anchors and links don’t have a border by default.  Using a img covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links.  You might consider a img to be sufficient, and for now you’d be right.  But in the future, any element may be a link, not just a elements, so this gives us a bit of future-proofing.

I also put some spaces into the selectors to make them easier for me to read.  If you use these styles, you might consider stripping out the unnecessary whitespace to compact the rules as much as possible.

It was suggested that min-width: 0; be added to the first rule in order to invoke hasLayout, but Ingo Chao explained why that was a bad idea.  It was also suggested that text decorations should be removed from links, but I’d rather not.  I try never to mess with link decorations, and also figure that anyone who feels otherwise can add their own text-decoration declarations.

So we’ll see how well this one stands up to use in the wild.  Let me know!

99 Responses»

    • #1
    • Comment
    • Sat 14 Apr 2007
    • 1139
    Ben Kannenberg wrote in to say...

    Great followup article. I previously used the global * { margin: 0; padding: 0; } method. Both your articles have opened my eyes to a much smarter solution that I will be implementing in my next design.

    • #2
    • Comment
    • Sat 14 Apr 2007
    • 1142
    thacker wrote in to say...

    Thank you very much.

    • #3
    • Comment
    • Sat 14 Apr 2007
    • 1143
    Nanda wrote in to say...

    Thanks!

    • #4
    • Comment
    • Sat 14 Apr 2007
    • 1144
    Jamie wrote in to say...

    What is it for?

    • #5
    • Comment
    • Sat 14 Apr 2007
    • 1231
    Brad Wright wrote in to say...

    I’m curious why you have:

    a img, :link img, :visited img {
    border: 0;
    }

    When you’re already setting img to have border: 0; in the very first selector? Or am I missing something really obvious?

    • #6
    • Comment
    • Sat 14 Apr 2007
    • 1245
    Micah wrote in to say...

    Hey Eric, looks great! I was wondering, since a lot of us already know about Faruk’s Initial.css method, how does this one stack up against it and which would be the preferable method in zeroing out sites.

    • #7
    • Comment
    • Sat 14 Apr 2007
    • 1254
    Holger Rüprich wrote in to say...

    Thanks a lot!

    • #8
    • Comment
    • Sat 14 Apr 2007
    • 1254
    Dean Edwards wrote in to say...

    I use this to trigger hasLayout if you are interested:

    http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp

    • #9
    • Comment
    • Sat 14 Apr 2007
    • 1303
    Eric Meyer wrote in to say...

    Brad: specificity. Some browsers have this sort of thing in their style sheet:

    a img {border: 2px solid;}

    In Gecko-based browsers like Firefox, it’s:

    *|*:-moz-any-link img, img[usemap], object[usemap] {
      border: 2px solid;
    }
    

    That would win out over plain old img on specificity grounds. With the selector I wrote, the specificity will be as high as the first of those selectors, and thus win out (since author styles come after browser styles).

    Of course, the Gecko style sheet means that in those browsers, images and object with a usemap attribute will still get borders, since they are being selected at a higher specificity than what’s in my reset rule. I’m sort of on the fence as to whether I should account for those, or let them go on the grounds that they’re very rare cases.

    • #10
    • Comment
    • Sat 14 Apr 2007
    • 1338
    thacker wrote in to say...

    Dean–

    Thank you very much. That will help. Am always tripping over haslayout and getting triggered into “Jack Palance” mode.

    • #11
    • Comment
    • Sat 14 Apr 2007
    • 1511
    Aristotle Pagaltzis wrote in to say...

    Eric:

    You could write html body img { border: 0 } to overcome the specifity of browser stylesheets, no?

    Also, any reason you”re using q:before { content: "" } and q:after { content: "" } instead of the direct approach, q { quotes: "" "" }?

    • #12
    • Comment
    • Sat 14 Apr 2007
    • 1621
    Sebastian Werner wrote in to say...

    Fine. Seems to work good for me with one exception. The line height should also be inherited. Otherwise one needs to define the line height for each element and it is impossible to just do something like “#teaser{line-height:160%}” because the p- and li-elements and so on have their own definition.

    • #13
    • Comment
    • Sat 14 Apr 2007
    • 1652
    Brad Dielman wrote in to say...

    Thanks, Eric!

    • #14
    • Comment
    • Sat 14 Apr 2007
    • 1754
    Tom Hughes-Croucher wrote in to say...

    Hey Eric,

    there is some really good stuff here. Do you see this as a fork of Reset.css from YUI or something that could be fed back in?

    There is a Bugzilla for YUI on Sourceforge if you wanted to make notes of where the Reset.css has issues. http://sourceforge.net/tracker/?group_id=165715&atid=836476

    • #15
    • Comment
    • Sat 14 Apr 2007
    • 1812
    lester wrote in to say...

    Interesting, thank you! :)

    • #16
    • Comment
    • Sat 14 Apr 2007
    • 1912
    Eric Meyer wrote in to say...

    Aristotle: if they’re just using a img, then yes, but Gecko isn’t. I’m pretty sure the -moz- pseudo-classes contribute 0,0,1,0 specificity, so *|*:-moz-any-link img is 0,0,1,1 — which requires something like :link img to compete. Also, I should add a quotes rule, so thanks!

    Sebastian: line-height: 1 should have exactly the same effect as inheriting, and does when I test it. (So would line-height: 1em, actually.) Do you have a test case where it isn’t?

    Tom: I see it as a parallel effort, but they’re certainly welcome to fold anything I’ve done here into their CSS. I think that, to the extent that CSS needs a license (which I don’t for a second think it does), it can be under the WTFPL.

    • #17
    • Comment
    • Sat 14 Apr 2007
    • 2158
    thacker wrote in to say...

    Have come across the same issue as Sebastian relative to the line-height value of 1 as opposed to a value of inherit.

    If a value of 1 or 1em as the same effect as inheriting, wouldn’t a value of inherit be more direct?

    This is not a suggestion. It is a question. Ergo, the question mark.

    Thank you very much.

    • #18
    • Comment
    • Sat 14 Apr 2007
    • 2200
    thacker wrote in to say...

    Addendum:

    Would the specification of the inherit value for line-height not override any browser default values?

    Thanks.

    • #19
    • Comment
    • Sat 14 Apr 2007
    • 2255
    Robin wrote in to say...

    I have the same issue as thacker & Sebastian regarding the line-height.

    When I try this:

    <body>
    <div id=“header”>
    <h1>Headline1</h1>
    </div>
    </body>

    body {
    font:16px/1.5 Sans-serif;
    }

    h1 {
    margin-bottom:24px; font-family:Serif; font-size:200%;
    }

    The headline has a line-height of 1 with the reset css file as is. But if line-height is changed to inherit in the reset file, the line-height is perfectly fine.

    • #20
    • Comment
    • Sun 15 Apr 2007
    • 0105
    Philippe wrote in to say...

    Eric,
    1. a img {border:none} works perfectly fine on Gecko 1.7+ and Gecko 1.9a, and has actually been doing so for ages.
    2. line-height:1 is, as has been commented, not a good idea. That breaks the inheritance of the line-height property.

    • #21
    • Pingback
    • Sun 15 Apr 2007
    • 0443
    Received from Reset delle proprietà dei CSS « the juice of internet…

    [...] secondo eric meier [...]

    • #22
    • Comment
    • Sun 15 Apr 2007
    • 0740
    Ed Eliot wrote in to say...

    Using inherit on font-weight and font-style doesn’t actually zero out styling in IE 6. I’m not sure about IE 5.x or 7 but I’m guessing they behave the same way. One could selectively serve normal to IE and inherit to everything else but I don’t think that’s the way to go as we’d no longer be leveling the playing field.

    • #23
    • Comment
    • Sun 15 Apr 2007
    • 1046
    Eric Meyer wrote in to say...

    Ah, now I see. For people who actually do use unitless line-heights (which, in my experience, had been basically nobody), the line-height: 1 causes problems. I keep forgetting to look forward there instead of back. Okay, so there’ll be at least one more post, or at least a modification of this one.

    • #24
    • Comment
    • Sun 15 Apr 2007
    • 1452
    thacker wrote in to say...

    The line-height problem seems to impact unit specified line heights as well. It is not allowing inheritance from parents, e.g. when the body element has had line-height of any specified unit value set.

    Are all these inherit values not leveling browser defaults as indicated by Ed Eliot, ie. font weight and font style within IE6?

    Thank you.

    • #25
    • Pingback
    • Sun 15 Apr 2007
    • 1454
    Received from Ramblings » Blog Archive » CSS fun I look foward to trying

    [...] Reset CSS styles Eric Meyer presents a baseline set of CSS (based on a Yahoo set) that resets default styles. I have often considered coming up with something like this and am super excited to give this one a whirl. [...]

    • #26
    • Comment
    • Sun 15 Apr 2007
    • 1622
    Eoghan McCabe wrote in to say...

    Good work, Eric. Thanks.

    • #27
    • Comment
    • Sun 15 Apr 2007
    • 1623
    thacker wrote in to say...

    This is not meant to be overly critical of E. Meyer’s intent or method to reset browsers.

    After reviewing Philipp where he/she mentions “redundancy”, Ed Eliot’s Blog where he states:

    For me, however, both [the YUI and the Meyer Reset file] go too far. I’d prefer to use one which only affects the elements I most often find myself needing to reset.

    and other miscellaneous issues including line-height, image borders, font styling and possible overuse of the inherit value that may not reset IE browsers, that I am in agreement with Ed Eliot’s quoted observation.

    The use of a reset style sheet is one that needs adjusted, individually, for the individual’s coding style. A magic bullet style sheet for all uses and individuals to flatten out built-in browser styles may not be practical.

    That said, the Meyer Reset provides the groundwork that can be modified for individual use. For that, Eric, thank you.

    • #28
    • Comment
    • Sun 15 Apr 2007
    • 1910
    Robin wrote in to say...

    Ah, now I see. For people who actually do use unitless line-heights (which, in my experience, had been basically nobody), the line-height: 1 causes problems. I keep forgetting to look forward there instead of back. Okay, so there”ll be at least one more post, or at least a modification of this one.

    I use unit-less line-heights…

    • #29
    • Comment
    • Sun 15 Apr 2007
    • 1911
    Robin wrote in to say...

    And I forgot to say, it was interesting how my site kind of went bonkers with this reset CSS. It was mostly some no longer-inherited line-height’s. Nice work. I’ll definitely be using this on future projects.

    • #30
    • Pingback
    • Sun 15 Apr 2007
    • 1923
    Received from anthillz » Blog Archive » links for 2007-04-15

    [...] Reworked Reset – Eric Meyer (tags: css work webdesign) [...]

    • #31
    • Pingback
    • Mon 16 Apr 2007
    • 0403
    Received from Filter for 16/4 2006 - Felt

    [...] Eric Meyer: Reworked Reset An updated version of his alternative to YUIs reset CSS. As usual, some of the more interesting stuff is in the comments. [...]

    • #32
    • Comment
    • Mon 16 Apr 2007
    • 0709
    Michael Dunne wrote in to say...

    I don’t use tables for layout, but with this reset I find that my data tables do not display borders if I use the <table width=“200” border=“1” cellspacing=“2” cellpadding=“6”> markup within the table selector. Do I have to style all my tables individually to get the borders to show?

    • #33
    • Comment
    • Mon 16 Apr 2007
    • 0838
    AlastairC wrote in to say...

    I personally wouldn’t use the quote part, although I did used to. Jez Lemon pointed out that non-IE browsers are correct to the spec to include quotation marks, you could run into language issues from encouraging authors to use inline quote marks. Not to mention effectively punishing other browsers for doing it to-spec.

    Although not applicable to every case, for a general style sheet I’d rather leave the quotes part out of the CSS and use Jez Lemon’s approach.

    • #34
    • Pingback
    • Mon 16 Apr 2007
    • 0938
    Received from Web Developers Bookstore Blog » Blog Archive » CSS Reset

    [...] reset code to bring some of the individual browser quirks to a standard imposed by the developer. Eric Meyer has published his over the weekend which covers just about every contengency. I prefer to only [...]

    • #35
    • Comment
    • Mon 16 Apr 2007
    • 1250
    Alan Bristow wrote in to say...

    Excellent post Eric, thanks.

    I must be missing something as regards:
    font-weight: inherit;
    and
    font-style: inherit;.

    I have an h1 that includes an em. As it stands, the em (or had I had one, strong) is overridden by these rules.

    I can fix this with additional rules, eg:

    h1 em {
    font-style: italic;
    }

    However, adding this seems ‘wrong’.

    Is the need to include:
    font-weight: inherit;
    and
    font-style: inherit;
    greater than this wrongness or should these two be dropped perhaps?

    I admit I don’t often markup h1 with em or strong, but it still seems wrong somehow.

    • #36
    • Pingback
    • Mon 16 Apr 2007
    • 2048
    Received from links for 2007-04-17 : Greg Palmer

    [...] Eric’s Archived Thoughts: Reworked Reset I’d like to test this out on a few sites and see how it stacks up to the Yahoo! reset.css I currently base my work on. (tags: todo css design webdev) [...]

    • #37
    • Pingback
    • Mon 16 Apr 2007
    • 2059
    Received from green galoshes » An Event, Truly Apart (Day 2 recap)

    [...] Eric Meyer has been working on his own version of a css “reset” stylesheet. 2007, aea, aneventapart, boston, conference, DOM, event, speakers This entry was written by [...]

    • #38
    • Pingback
    • Tue 17 Apr 2007
    • 0224
    Received from mcdave.net » links for 2007-04-17

    [...] Eric’s Archived Thoughts: Reworked Reset “baseline” style sheet (tags: css tips) [...]

    • #39
    • Comment
    • Tue 17 Apr 2007
    • 0423
    Gilles wrote in to say...

    Hi Eric, I was wondering why you where resetting the list’s?

    • #40
    • Comment
    • Tue 17 Apr 2007
    • 0701
    peter wrote in to say...

    I’ve used tantek’s undohtml.css for some time — it is mentioned in the very first comment to the original post.
    Could someone explain why one approach is better than the other.
    Thanks

    • #41
    • Comment
    • Tue 17 Apr 2007
    • 0843
    Blaise Kal wrote in to say...

    I don”t use tables for layout, but with this reset I find that my data tables do not display borders if I use the <table width=“200” border=“1” cellspacing=“2” cellpadding=“6”> markup within the table selector. Do I have to style all my tables individually to get the borders to show?

    You could (and probably should) set the border and cellpadding of a table with CSS. Setting the cellspacing with CSS is not yet possible in IE.

    • #42
    • Pingback
    • Tue 17 Apr 2007
    • 1119
    • #43
    • Trackback
    • Tue 17 Apr 2007
    • 1305
    Received from MadeMyDay. EveryDay. Webdesign Karlsruhe Blog.

    Zurück auf Los….

    …m Stylesheet immer den gleichen Effekt haben. Bzw. man ist abgesichert gegenüber vergessenen Formatierungen.

    ……

    • #44
    • Pingback
    • Tue 17 Apr 2007
    • 1818
    Received from crawlspace|media

    [...] Eric’s Archived Thoughts: Reworked Reset (tags: css tools resource) Leave a Reply [...]

    • #45
    • Comment
    • Tue 17 Apr 2007
    • 1836
    Borgar wrote in to say...

    I like (prefer, actually) unitless line-height. But it’s not the only problem here. After trying the reset I ran into this:

    <div class="t"><div>Text</div&gt</div&gt

    .t { text-align: right; }

    Inheritance problem. Text is, of course, rendered left aligned.

    I fixed this by putting a “html, body” rule directly below the long one where I set font-size, line-height, text-align to 100%, 1, and, left respectively. Those can then be set to inherit for everything else. Make sense?

    • #46
    • Pingback
    • Wed 18 Apr 2007
    • 0347
    Received from All in a days work…

    [...] Eric’s Reworked Reset Here”s the latest version of my “baseline” style sheet (tags: CSS) [...]

    • #47
    • Comment
    • Wed 18 Apr 2007
    • 0918
    Simone D. wrote in to say...

    A real interesting article, great work! :)

    • #48
    • Comment
    • Wed 18 Apr 2007
    • 1024
    Adam wrote in to say...

    Great topic Eric,

    Thanks again for feeding back to the community some of your hard work and research. I’ve always used a similar idea of baseline styles, but never put it into a dedicated css file.

    I’ll have a play around with your reset stuff and see if i can break my sites, but i doubt i will.

    • #49
    • Pingback
    • Wed 18 Apr 2007
    • 1723
    Received from input [type=checkbox] - borderless ? wie geht? - XHTMLforum

    [...] Rat "Setz mal den Prolog" h�tte sich ja dann auch �berholt. W�re Eric Meyers "CSS-Reset" die bessere [...]

    • #50
    • Pingback
    • Thu 19 Apr 2007
    • 0447
    Received from Fatih Hayrioğlu’nun not defteri » 19 Nisan 2007 Web’den seçme haberler

    [...] CSS’de söz sahibi bir isim Eric Meyer’den başlangıç css dosyası. Kullanışlı bir doküman. Link [...]

    • #51
    • Pingback
    • Thu 19 Apr 2007
    • 1356
    Received from Jason Friesen {dot} ca » Blog Archive » Layout Holy Grail

    [...] This is where I am. Sample: selkirk.ca/testpages/test-wireframe/. I started with Yahoo Grids, with their decent CSS Reset code (although I’m looking hard at Meyer’s css reset method. [...]

    • #52
    • Pingback
    • Fri 20 Apr 2007
    • 0022
    Received from simpledream web studio: standards-based web design and development » Archives » Interesting Links for April 13–19, 2007

    [...] Eric’s Archived Thoughts: Reworked ResetEric Meyer’s reset styles for starting CSS files. It might be a while before I incorporate this into my base style sheets, but it’s a great starting point for zeroing out default browser styles.(Tags: css, reference, web-standards, web-design) [...]

    • #53
    • Comment
    • Fri 20 Apr 2007
    • 1155
    JG wrote in to say...

    Great job on this, thanks much. However, I’m confused by one thing, what does the very last rule for the blockquotes do, and why?

    • #54
    • Pingback
    • Fri 20 Apr 2007
    • 1414
    Received from wehuberconsultingllc.com » Blog Archive » Eric’s Archived Thoughts: Reworked Reset

    [...] Link to Eric’s Archived Thoughts: Reworked Reset [...]

    • #55
    • Comment
    • Sat 21 Apr 2007
    • 0712
    Daniel wrote in to say...

    Hi, cool preset-reset, thanks for that!

    What I prefer is to set a:focus { border: 0; }, to wipe those dashed borders, after clicking a link and open in in a new tab/ window.

    So, this would be my only addition right now.

    • #56
    • Comment
    • Sat 21 Apr 2007
    • 0720
    Daniel wrote in to say...

    Sorry, to correct my comment, it’s a:focus{ outline:none; }

    • #57
    • Pingback
    • Sun 22 Apr 2007
    • 0820
    Received from Il meglio della settimana - 25 | Napolux.com

    [...] Polar Clock Why you should not use a flag as a symbol of language Experimental Gameplay Project Eric’s Archived Thoughts: Reworked Reset Grafici con Javascript Free CSS Graph Resources Generators Font Garden css, font, grafici, Il [...]

    • #58
    • Pingback
    • Tue 24 Apr 2007
    • 1343
    Received from Junk Designs » Blog Archive » CSS Reset

    [...] Here is his post, found in it’s original form here. [...]

    • #59
    • Comment
    • Wed 25 Apr 2007
    • 1237
    Paul wrote in to say...

    Good stuff, I’m using it with greater ease than just the global reset. It’s opened my eyes to further tweaking, which I can do on an individual basis.

    • #60
    • Comment
    • Thu 26 Apr 2007
    • 0609
    Marko Dugonjic wrote in to say...

    Good job, Eric!

    I’d like to point out that input[type=text], select and textarea should also have the background rule set. Otherwise it will inherit default OS theme behavior. Luckily, most of the computer users have set application backgrounds to white, but you never know.

    Additionally, be cautious with input[type=hidden]. If one sets margin and/or padding rule to all inputs, but hidden fields are not reset, she might be wondering where all those gaps came from.

    BTW, one more vote for unitless line-heights.

    Daniel, by reseting borders for :focus pseudo-class you’re making it hard to navigate with a keyboard. If you really have do it this way, please don’t forget to highlight the link in focus with some other method.

    • #61
    • Pingback
    • Wed 2 May 2007
    • 0348
    Received from Web Design Blog - Override browser default styles

    [...] Meyer has kindly published some reset CSS styles, with the aim of overriding the browsers in-built default [...]

    • #62
    • Pingback
    • Fri 4 May 2007
    • 2345
    Received from Friday roundup at teabyrd.com

    [...] Baseline CSS! [...]

    • #63
    • Pingback
    • Thu 10 May 2007
    • 0823
    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 [...]

    • #64
    • Pingback
    • Sat 12 May 2007
    • 1422
    Received from Darren Hoyt Dot Com -+ Weblog, Bookmarks & Testing Station • » Blog Archive » Baseline Stylesheets

    [...] have posted source code for their baseline stylesheet at one point or the other: Christian Montoya, Eric Meyer, Ping, Mike Rundle…any others come to [...]

    • #65
    • Pingback
    • Sat 19 May 2007
    • 1442
    Received from Reset Styles | 煮豆燃豆萁

    [...] 原文:Reset Styles [...]

    • #66
    • Pingback
    • Sat 23 Jun 2007
    • 2247
    Received from 欲至何所 » Blog Archive » Reset Styles

    [...] 原文:Reset Styles [...]

    • #67
    • Pingback
    • Mon 9 Jul 2007
    • 0804
    Received from Best of May/June 2007

    [...] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant [...]

    • #68
    • Pingback
    • Mon 9 Jul 2007
    • 0926
    Received from Best of May/June 2007 | Webdesign (css, grafica e altro)

    [...] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant [...]

    • #69
    • Pingback
    • Mon 9 Jul 2007
    • 1132
    Received from lost node » Blog Archive » Best of May/June 2007

    [...] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant [...]

    • #70
    • Pingback
    • Sat 14 Jul 2007
    • 1359
    Received from WildWebWeaving » Blog Archive » Universal White Space Reset

    [...] without squandering browser resources or disabling HTML attributes. You may also be interested in Eric Meyer’s solution, although it seems to me to deal with many tags that are unlikely to have padding or margin presets [...]

    • #71
    • Pingback
    • Wed 8 Aug 2007
    • 0048
    Received from Reseteando el CSS « frogx.three

    [...] O pueden checar el archivo en la pagina del autor aqui rightclick, en los comentarios tambien mencionan este otro de meyerweb  [...]

    • #72
    • Comment
    • Thu 9 Aug 2007
    • 0656
    Henry wrote in to say...

    Arghh!!!

    Opera seems to be choking on the big reset rule at the top. I assume it’s because of all the element declarations. *sigh*

    I’m going to try and narrow this down some more.

    • #73
    • Comment
    • Thu 9 Aug 2007
    • 0700
    Henry wrote in to say...

    ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with ‘html’ removed from the first rule selection list.

    That’s been annoying me for weeks – so glad it’s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/

    • #74
    • Pingback
    • Wed 15 Aug 2007
    • 1916
    Received from links for 2007-08-08 en newdisco

    [...] Eric’s Archived Thoughts: Reworked Reset Reset para que los CSS no tengan incompatibilidades entre navegadorores (tags: css webdev webdesign) Archivado en: Links Diarios   |   Etiquetas: No Tags. [...]

    • #75
    • Pingback
    • Tue 21 Aug 2007
    • 1157
    Received from Dave Woods » Reset CSS

    [...] known that this has some issues with it when dealing with forms and am starting to come round to Eric Meyer’s way of using a baseline css file in order to reset the specific elements that you want to set as apposed to just assuming that all [...]

    • #76
    • Pingback
    • Tue 11 Sep 2007
    • 0102
    Received from Elements: un altro framework CSS di cui non sentivamo il bisogno - Laburno

    [...] è il reset di Eric Meyer, pari [...]

    • #77
    • Pingback
    • Tue 11 Sep 2007
    • 1935
    Received from napyfab:blog» Blog Archive » links for 2007-09-11

    [...] Eric’s Archived Thoughts: Reworked Reset (tags: css reset web development webdesign howto design layout) [...]

    • #78
    • Pingback
    • Thu 18 Oct 2007
    • 1649
    Received from CSSLab » CSS Reseter

    [...] directa de 3 fuentes: Yahoo UI Reset CSS, Eric Meyer’s Reworked Reset y mi experiencia personal para ir adaptándola a mis [...]

    • #79
    • Comment
    • Mon 10 Dec 2007
    • 1725
    Simplicoder wrote in to say...

    Unfortunately, in Firefox, vertical-align baseeline on the tr element causes table cells with rowspans to have the first adjacent row line up at the bottom of the cell rather than have the multiple cells line up adjacent to the one rowspanning cell.

    Even more worrisome is that Firefox does not render an overriding style, such as vertical align middle, even if the style is in element’s STYLE ATTRIBUTE!!

    Firebug shows it as overridden, but Firefox does not render it correctly.

    • #80
    • Comment
    • Fri 7 Mar 2008
    • 1057
    resimler wrote in to say...

    ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with “html” removed from the first rule selection list.

    That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/

    • #81
    • Comment
    • Sun 6 Apr 2008
    • 2116
    Jens wrote in to say...

    Hi Eric,

    I read somewhere that using the universal operator to reset CSS takes a lot of browser processing time since it travels through the entire DOM when a page gets styled (i.e. reset).

    I’d like to hear your opinion on that – was that ever a concern in your investigations?

    Cheers!

    • #82
    • Pingback
    • Fri 18 Apr 2008
    • 1208
    Received from IT民工的坐井观天 » CSS Framework,让你事半功倍

    [...] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 [...]

    • #83
    • Pingback
    • Mon 12 May 2008
    • 0054
    Received from Broken Pick » Blog Archive » CSS Framework CSS框架入门教程

    [...] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 [...]

    • #84
    • Pingback
    • Mon 19 May 2008
    • 2034
    Received from [转] CSS Framework,让你事半功倍

    [...] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 [...]

    • #85
    • Pingback
    • Tue 20 May 2008
    • 1824
    Received from Grid Design или вёрстка с Сеткой. / theartbox

    [...] наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера, сохранив reset.css создадим grid.css в [...]

    • #86
    • Comment
    • Sun 25 May 2008
    • 2209
    Sander wrote in to say...

    Maybe a simple question, but if I use a browser reset style, should I add a new selector ‘body’, to override the reset for the selector body? Or should I alter the lines in the Reset-CSS?

    How can I deal with this?

    • #87
    • Pingback
    • Mon 16 Jun 2008
    • 1447
    Received from CSS for lunch » Reset styles

    [...] is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it [...]

    • #88
    • Pingback
    • Sun 29 Jun 2008
    • 0552
    Received from www.963.it » CSS Master: azzerare i valori di default dei fogli di stile dei browser: blog personale di Vincenzo Mania

    [...] Eric Mayer mette a disposizione degli sviluppatori web un CSS Master come pure il team di sviluppatori di Yahoo all’interno delle librerie UI. [...]

    • #89
    • Comment
    • Fri 4 Jul 2008
    • 2105
    Francisco Sepúlveda wrote in to say...

    Nice reset, but, what about the different display value between browsers, its a good idea defining for any element in the stylesheet the display value?

    • #90
    • Pingback
    • Sat 2 Aug 2008
    • 0824
    Received from 梦想照进现实 » 转-CSS Framework,让你事半功倍

    [...] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 [...]

    • #91
    • Pingback
    • Fri 8 Aug 2008
    • 0630
    Received from CSS Framework | 星辰创想

    [...] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 [...]

    • #92
    • Pingback
    • Tue 25 Nov 2008
    • 1236
    Received from A good start - setting up xhtml and css files for your design - bee-digital design

    [...] Eric Meyer’s reset styles. [...]

    • #93
    • Pingback
    • Fri 5 Dec 2008
    • 1055
    Received from 27stars » Blog Archive » Some Tip’s to avoid IE fixing stress…

    [...] 1)Use a base stylesheet – why spend hours tweaking styles when all that needs to be done is catching all those pesky initial values. Don’t have a base stylesheet? Your can find a nifty one by Eric Meyer here. [...]

    • #94
    • Pingback
    • Tue 10 Feb 2009
    • 1844
    Received from Bringing browsers to parity (reset styles) « Web Help!

    [...] a link to Eric’s post on his own website, which he created after someone at the conference asked if he had an example of [...]

    • #95
    • Comment
    • Tue 24 Mar 2009
    • 1451
    A.P. wrote in to say...

    Hi Eric,

    your CSS code is quite well optimized for compactness. Unfortunately that has a drawback: -it is not clear which tags really need a given style rule (because inheritance is not applied by default, for instance, or because different browsers have different default style sheets).

    Would it be possible to show the CSS code in an unentangled way? That is, for each one of the following type of rules, give the corresponding set of tags that really need those rules:

    i) margin: 0; padding: 0;
    ii) border: 0;
    iii) font-weight: inherit; font-style: inherit; font-family: inherit;
    iv) font-size: 100%;
    v) line-height: 1;
    vi) text-align: left;
    vii) vertical-align: baseline;

    The point is that I would like to set directly the final rule values whithout needing to reset and then setting them again.

    • #96
    • Comment
    • Tue 21 Jul 2009
    • 0434
    ilahiler wrote in to say...

    ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)

    So now my reset rules are exactly above but with “html” removed from the first rule selection list.

    That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :(:(

    • #97
    • Pingback
    • Thu 25 Feb 2010
    • 1520
    Received from Alexander Sperl Padding is a Strange Creature

    [...] how can you take anything for granted after you see the bottom padding here… Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and [...]

    • #98
    • Pingback
    • Mon 20 Sep 2010
    • 1409
    Received from How To Create a Stylish Content Slider using CSS3 & jQuery | SpyreStudios

    [...] it should look like this. Now we’ll add some style to the whole thing.CSSIf you like you can use Eric Meyer’s CSS reset, but in our case this should be enough. * { margin: 0; padding: 0; } body { font-family: helvetica, [...]

    • #99
    • Pingback
    • Wed 27 Oct 2010
    • 0858
    Received from Getting your CSS to look the same in all browsers – Base CSS / CSS Reset | Public Identity

    [...] Eric Meyer’s – Reworked Reset [...]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


April 2007
SMTWTFS
March May
1234567
891011121314
15161718192021
22232425262728
2930  

Sidestep

Feeds

Extras