SitePoint.com

leblanc · Jun 7, 2006, 10:40

I working on a site which includes several css sheets.

well i spent to much time looking for the problem manually.
problem:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test Styles</title>

</head>

<style type="text/css">

    #container h1{

        background:url("http://www.google.com/images/firefox/google.gif") no-repeat 0 0px;}

</style>

<style type="text/css">

    .withnone h1{

        background-image:none;}

</style>

<body>

    <div id="container">

        <h1>Hello</h1>

        <!-- <h1 style="background-image:none;">Hello</h1> -->

        <div class="withnone">

            <h1>Hello</h1>

        </div>

    </div>    

</body>

</html>

if i would have choosen .container to be a class instead of #container it would have worked like i expected ... but i didn't so i had to go relearn how browsers cascade styles.

Are there any tools to help you find what rules are affecting a given element.

maybe the calculations of weight, origin, specificity, and sort order as discussed in: designing without tables using css; pg 234

a tool like that would eliminate stuff like this. [i spent like 5 hours looking for the exact problem.. yeah i soved it with !important but I wanted to know what actually caused the problem.]

kunalk · Jun 7, 2006, 11:16

For firefox try the firebug plugin .. it is a godsend ...it will tell u what styles are being applied on a selected element along with a line number and the stylesheet name.

all4nerds · Jun 7, 2006, 11:34

Hello

your example

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test Styles</title>
<style type="text/css"> 
	#container h1{background:url("xx.gif") no-repeat 0 25px;} 
	/*#container*/ .withnone h1{background:none;} 
	#container .withnonex h1{background:none;}
	
	.x{color:#ccccff;}
	.y{color:#ffccff;}
	.z{color:#cccccc;}
</style>
</head> 
<body>

<div id="container">

<h1>Hello</h1>
<h1 style="background-image:none;" class="x">inline style is closer to me</h1>

<div class="withnone y">
<h1>Class is not overruling the ID</h1>
</div>

<div class="withnonex z">
<h1>the ID gives me more power</h1> 
</div>

</div>

</body>
</html>

most simple

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test Styles</title>
<style type="text/css">
	h1,h2,h3,h4{font-size:28px;}
	h1,h3{background:url("xx.gif") no-repeat 0 25px;}
	
	h2{color:#ccccff;}
	h3{color:#ffccff;}
	h4{color:#cccccc;}
</style>
</head> 
<body>

<div>

<h1>inline style is closer to me</h1>

<h2>Class is not overruling the ID</h2>

<h3>the ID gives me more power</h3> 

<h4>the ID gives me more power</h4> 

</div>

</body>
</html>

classes of equal power

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Test Styles</title>
<style type="text/css">
	.x{font-size:28px;font-weight:900;}
	
	.y,.z{background:url("xx.gif") no-repeat 0 25px;}
	
	.x{color:#ccccff;}
	.y{color:#ffccff;}
	.z{color:#cccccc;}
</style>
</head> 
<body>

<div class="x">

<p>the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p class="y">the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p>the ID gives me more power</p> 
<p class="z">the ID gives me more power</p> 

</div>

</body>
</html>

leblanc · Jun 7, 2006, 12:28

firebug ... looks like a winner... thanks kunalk

edit:
just tried it out.. Thanks a million

all4nerds
basically i have a css file
#container-system h1
#container-blog h1

then nested inside both are h1 tags which i want to ovride styles

i guess a fix can be to break main.css to system.css or blog.css and include the right one at run time
where h1 doesn't reference any particular id

Jun 7, 2006, 10:40	#1
leblanc SitePoint Evangelist Join Date: Aug 2004 Posts: 428	Tools of the trade for css? - weight, origin, specificity, sort order I working on a site which includes several css sheets. well i spent to much time looking for the problem manually. problem: PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test Styles</title> </head> <style type="text/css"> #container h1{ background:url("http://www.google.com/images/firefox/google.gif") no-repeat 0 0px;} </style> <style type="text/css"> .withnone h1{ background-image:none;} </style> <body> <div id="container"> <h1>Hello</h1> <!-- <h1 style="background-image:none;">Hello</h1> --> <div class="withnone"> <h1>Hello</h1> </div> </div> </body> </html> if i would have choosen .container to be a class instead of #container it would have worked like i expected ... but i didn't so i had to go relearn how browsers cascade styles. Are there any tools to help you find what rules are affecting a given element. maybe the calculations of weight, origin, specificity, and sort order as discussed in: designing without tables using css; pg 234 a tool like that would eliminate stuff like this. [i spent like 5 hours looking for the exact problem.. yeah i soved it with !important but I wanted to know what actually caused the problem.]

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Jun 7, 2006, 11:16	#2
kunalk SitePoint Member Join Date: May 2006 Posts: 8	For firefox try the firebug plugin .. it is a godsend ...it will tell u what styles are being applied on a selected element along with a line number and the stylesheet name.

Jun 7, 2006, 12:28	#4
leblanc SitePoint Evangelist Join Date: Aug 2004 Posts: 428	firebug ... looks like a winner... thanks kunalk edit: just tried it out.. Thanks a million all4nerds basically i have a css file #container-system h1 #container-blog h1 then nested inside both are h1 tags which i want to ovride styles i guess a fix can be to break main.css to system.css or blog.css and include the right one at run time where h1 doesn't reference any particular id