Style Reset Question

HTML & CSS
1

Hello!

I have a question about style reset. I made this test page to demonstrate it: www.juliaeller.com

As you can see in the CSS-code I reset the browser styles.

But: If I disable Browser Default Styles (CSS > Disable Styles > Browser Default Styles) in the Web Developer Toolbar the line-height and font-size of the text in the wrapper changes.

Why?

I assume that not all browser styles er reset correctly but I cannot see what is wrong here.

Any ideas?

Thanks, Julia

2

Hi,

It looks like the webdeveloper toolbar simply outputs these rules as last in sequence (in disabled.css) and hence have more weight than any of your same original declarations.


body, h1, h2, h3, h4, h5, h6, li, ol, p, ul {
font-size:1em;
line-height:1;


}




blockquote, body, div, fieldset, form, h1, h2, h3, h4, h5, h6, html, input, li, ol, p, pre, table, td, th, ul {
margin:0;
padding:0;


}

e.g. this rule would lose out unless you added a class to it.



p,li {
    padding: 0 2.5em 0.5em 0;
    font-size: 0.87em;    
    line-height: 1.4;
}
3

I found my mistake. You cannot just write h4, li and p. The tags had to be written more specific, like for example #wrapper h4 {}.

If I now disable the browser default styles the page looks 100% the same.

I replaced this

h4 {
	color: #a2a2a2;
	padding-top: 0.5em;
	letter-spacing: 1.3px;
	margin-bottom: 1.5em;
}

p,li {

	padding: 0 2.5em 0.5em 0;
	font-size: 0.87em;	
	line-height: 1.4;
}

with this:

#wrapper h4 {
	color: #a2a2a2;
	padding-top: 0.5em;
	letter-spacing: 1.3px;
	margin-bottom: 1.5em;
	
}

#wrapper .detail{
	padding: 0 2.5em 0.5em 0;
	font-size: 0.87em;	
	line-height: 1.4;
}
4

Thank you Paul O’B! :slight_smile: