css-reset
Customization of Eric Meyer's CSS Reset
Update: Added simple test example http://jsfiddle.net/7UhrW/1/ using normalize.css.
Chrome/WebKit and Firefox have different rendering engines which render fonts differently, in particular with differing dimensions. This isn't too surprising, but what's surprising is the magnitude of some of the differences.
I can always tweak individual elements on a page to be more similar, but that's tedious, to say the least. I've been searching for more systematic solutions, but many resources (e.g. SO answers) simply say "use a reset package." While I'm sure this fixes a bunch of other things like padding and spacing, it doesn't seem to make any difference for font dimensions.
For instance, if I take the reset package from http://html5reset.org/, I can show pretty big differences (note the layout dimensions shown in the inspectors). [The images below are actually higher res than shown/resized in this answer - eg in Chrome you can right-click and Open Image in New Tab.]
<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>
With Helvetica, Chrome is has the shorter height instead.
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
Using a different font, Chrome again renders a much taller font, but additionally the letter spacing goes haywire (probably due to the boldification of the font):
<style>
@font-face {
font-family: "MyriadProRegular";
src: url("fonts/myriadpro-regular-webfont.eot");
src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProLight";
src: url("fonts/myriadpro-light-webfont.eot");
src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "MyriadProSemibold";
src: url("fonts/myriadpro-semibold-webfont.eot");
src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") format("svg");
font-weight: normal;
font-style: normal; }
</style>
...
<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>
If we try to sprinkle in the unitless * { line-height: 1; }, as suggested by a comment, we see that while it does yield identical heights, the vertical offsets are different, as are other elements on the page:
I've tried a few resets/normalize packages to no avail. I just wanted to confirm here that this is indeed a fact of life (even omitting the more glaring offenders like IE and mobile) and I'm not missing some super-awesome solution to this mess.
Source: (StackOverflow)
This question already has an answer here:
Are there any drawbacks of applying global styles to all elements?
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Source: (StackOverflow)
I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point out that I tried many combinations of border: 0, padding:0, etc. and nothing seemed to get rid of the white space.
Here is the code:
<html>
<head>
<style type="text/css">
#header_div {
background: #0A62AA;
height: 64px;
min-width: 500px;
}
#vipcentral_logo { float:left; margin: 0 0 0 0; }
#intel_logo { float:right; margin: 0 0 0 0; }
</style>
</head>
<body>
<div id="header_div">
<img src="header_logo.png" id="vipcentral_logo">
<img src="intel_logo.png" id="intel_logo"/>
</div>
</body>
This is what it looks like (I inserted red arrows to explicitly call out the extra space):
I was expecting the blue color to abut directly to the browser edges and toolbar. The images are both exactly 64 pixels tall and have the same background color as the one assigned to #header_div. Any information would be greatly appreciated.
Source: (StackOverflow)
This is somewhat annoying. It appears that webkit (through chrome 13 canary) is having a right go at styling various input types and it's clashing with the design in a major way.
In particular, these are causing me a headache:
- selected element glow (via outline)
- placeholder= text style
- ugly glow around focused textarea and input fields
I am using boilerplate and modernizr.
A simple input[type=search] with a placeholder overrides the text styling.
I know you can target it via
input::-webkit-input-placeholder
However, this does not seem to be able to style things like text-shadow - which is a bit crap. Does anyone know if this is likely a bug that will be fixed or do I need to fall back on to a javascript placeholder solution?
The search input comes out with a white bg and removes the rounded corners defined in the base CSS class. I found a reset code:
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=search] {
/* the webkit overrides need to stay at the top */
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
/* your styles here */
}
and it kind of helps.
The glow around form elements I fix by setting outline: none.
I guess what I am really after is a CSS reset that takes out any pre-defined styles in the user agent stylesheet (according to web inspector) that affect it. Is there any reset available that can do that so despite of the doctype being HTML5, the elements are rendered as simply as they were before HTML5 and follow implicit rules setup for them in the base CSS?
I hate to say it but despite of all its memory hogging issues and slowness of plugins, FireFox 4 actually renders everything perfectly. Webkit should not be trying to style things for you, just provide an API that allows you to do so if you wanted to...
Source: (StackOverflow)
There are a lot of CSS resets. I am building something for mobile devices and I want to skip as much of the unnecessary CSS as possible so I was wondering if there is an exhaustive HTML test page I can run some of the CSS resets against to test them?
Testing the rules is also a great way to learn what edge cases are required, what they target, and why.
Source: (StackOverflow)
How do other designers normalize padding and margins across browsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.
It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?
Update
It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.
I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.
Source: (StackOverflow)
I tried to validate my site's CSS using the W3C CSS Validator. Unfortunately, reset-min.css from YUI framework produced parse error on the string " {*font-size:100%; ".
The validator results.
On further investigation I noticed the following error on Firefox's error console:
Warning: Expected declaration but found '*'. Skipped to next declaration.
I couldn't find any explanation for the meaning of the '*', nor references for a problem in this popular reset CSS.
What am I missing?
Source: (StackOverflow)
This line in YUI's Reset CSS is causing trouble for me:
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
It makes my em not italic and my strong not bold. Which is okay. I know how to override that in my own stylesheet.
strong, b
{
font-weight: bold;
}
em, i
{
font-style: italic;
}
The problem comes in when I have text that's both em and strong.
<strong>This is bold, <em>and this is italic, but not bold</em></strong>
My rule for strong makes it bold, but YUI's rule for em makes it normal again. How do I fix that?
Source: (StackOverflow)
I wrote google chrome extension, which popups dialog with autocomplete field and it's own style, but there is some of sites where my CSS become totaly broken which isn't looks very nice.
I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff in the separated div with it's own id and relative styles for that id, and I do so, but it seems doesn't work on some sites with hard tags style overloading or "!important" directives in the CSS code.
So I want to know is there some way to really isolate my styles in convenient way or it's my bad carma to overload every little CSS property to fix one or another style bug on each site?
By the way: I set up my manifest to load all things at the "document_end", but I see it does not applyed to the stylesheets which is everytime loaded before any DOM is ready.
Source: (StackOverflow)
Can anyone explain to me why can we style the element html?
What are differences between it and body?
I usually see tutorials and multiple websites using body and never html, I only found about it when using YUI 3: CSS Reset since changing the background in body didn't work.
Edit: Actually, I still haven't found the problem regarding that, when I add the reset.css the background gets white, when I remove it returns to normal. Yet Chrome inspector says that the background is the normal one. Btw, this is getting off topic. :p
Edit 2: The culprit was the doctype. Somehow it made the html style in the css-reset render after the body style in my stylesheet. Maybe I should open a question regarding this.
Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Source: (StackOverflow)
For example, the Meyer reset has a long list of elements1 which I believe can be replaced with a *?
I have seen some use of:
* {
margin: 0;
padding: 0;
}
But more "advanced" resets seem to go with explicitly stating the tags.
The only elements I don't see covered in the tag list that are covered (I presume) with a * are input, button, and select—the Eric Meyer reset, in fact, doesn't appear to really deal with those elements at all. If avoiding resetting these elements is the issue…why wouldn't you? Browsers obviously don't all display form elements the same.
1 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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, I, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video if you're curious.
Source: (StackOverflow)
my question is if it is possible to reset css styles (a lot off them) for a single div
and all elements that are contained in that div.
I am asking, because I found this tutorial for a jquery shoutbox that has it's own
css file.
I can not just copy the styles over to my own css file, because it will screw up the rest off the page where the styles are already set.
I thought off using a divwrapper and apply all those resets only to that one.
I am just not sure if it's possible
I only know this way
#divwrapper td{ set styles }
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
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 {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
thanks, Richard
Source: (StackOverflow)
I am working on a legacy project that has CSS Reset with *{ margin:0; padding:0 } applied to everything. Now, my new code doesn't need that as it relies on Normalize.css. This hasn't been much of a problem but at some places I need to use both styles.
How do I unreset my CSS? I have been able to do *{margin:auto} which works fine. The same isn't true about padding. Is there an equivalent way to reset the padding. How do you go about solving this?
Source: (StackOverflow)
I've created a CSS class .press-title, however I've been unable to remove the backround color applied on hover.
.press-title a:hover { background-color: none; text-decoration: none;}
Ideas?
Link is towards the bottom of the page:
http://domdemarcos.com/typography/
EDIT to reflect change made from reply.
Source: (StackOverflow)
I tried to create buttons and insert my own images instead of the standard button images. However, the gray border from the standard buttons still remains, showing on the outside of my black button images. This can be seen here... http://wiscuss.com/submit.php .
Does anyone know how to remove this gray border from the button, so it's just the image itself? Thank you.
Source: (StackOverflow)