Reset.css
- Started
- Last post
- 10 Responses
- thismanslife
Anyone else use this?
http://meyerweb.com/eric/tools/c…Greatly useful and all, but maybe I'm missing something obvious... I'm having a problem with it.
So, it's resetting margins etc. Cool. So, onto my CSS. I have a class which I'm reusing all over the place. One of those places, is on some H1 elements. My class is used to give an element a specific width... and a margin... but because it's only a lowly class, the margins get ignored on the H1's (The definition in reset.css setting them to 0 for all the "H" tags overides it)... unless you use !important in the class, not good...
- pylon0
reset.css is very useful.
Just put your H tags within a larger div that contains your whole content area and target them that way.
#content {}
#content h1 {}
#content p {}
etc
- Yup, I do that plenty already, but that doesn't solve my problemthismanslife
- 3030
I do, but not so extended version as proposed by Meyer.
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
- Depends on how deep you go with css, for most applications then 303's suggestion is just fine.pylon
- 3030
Reseting gives you default view. Never had problems with that, but you have to keep in your mind how the document/structure is organised. If you want adjust some attributes just follow your element by the parent one. If it is not enough try use higher one like #higerContainer #content p etc...
- bulletfactory0
you may may want to look into specificity - http://css-tricks.com/specifics-…
- nice one303
- Ah ha, now this is getting somewhere...thismanslife
- thismanslife0
I've already implemented a solution, I put a div around the H1, and apply my class to that to get the desired width and margin. Seems wrong that I need extra markup to get around it. Feel like I'm doing something wrong...
- 3030
div inside h1?
Try span, that's more valid. If u want as block element then h1 span {display: block}
- 3030
play with padding, margin and line-height then
- thismanslife0
S'ok, think I got it, "Specifics on CSS Specificity" confirmed what I suspected :)
+ my alternative (widths / margins on a containing div instead of the H1 tag itself) is probably more appropriate anyway.
- 3030
add (if you don't have yet) to your h1 "display: block;" (in css) and check how it works with your padding, margin and line-height
- thoughtandtheory0
If you just restate h1 after the reset.css file is imported then it should override anything in that doc.
For instance, I always use the Yahoo whitespace-reset.css but after I "@import" in my css file, I restate certain tags like headers.