Reputation: 1
Going insane with CSS having a specificity problem. HTML.
<div id="page_content">
<div id="page_left" class="left">
<div id="domain_l_top">
<ul>
<li>
<p>.co.uk</p>
<p>£3.99</p>
<p class="peryear">per year</p>
</li>
<li>Free with selected packages</li>
</ul>
<form id="form" action="...">
<input class="searchdomains" type="text" name="domain" id="search-domain-input">
<input id="submit" type="image" src="..." class="search" name="Search">
<input type="hidden" name="direct" value="true" />
</form>
</div>
...
<ul id="ads" class="ads">
<li>
<a href="" title="Transfer to Amazing Host">
<img src="..." alt="Transfer to Amazing Host" />
<h5>Transfer to Amazing Host</h5>
<p>Get all the great services that you get when registering a domain with us. Free transfers for all .co.uk domains.</p>
</a>
</li>
<li>
<a href="" title="Free one year renewal">
<img src="..." alt="FREE .com" />
<h5>FREE .com</h5>
<p>Transfer your .com name to us and we will give a years renewal for FREE. Transfer now for £6.50.</p>
</a>
</li>
<li>
<a href="" title="Add Hosting">
<img src="..." alt="Add Hosting" />
<h5>Add Hosting</h5>
<p>We have great hosting packages, add hosting with your transfer and get 20% OFF selected packages.</p>
</a>
</li>
</ul>
</div>
</div>
.css
#page_left {
width: 660px;
padding: 5px;
}
#page_left h2 {
border-bottom: 2px solid #5B8172;
color: #5B8172;
font-size: 26px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
text-shadow: 1px 1px 1px #2D4038;
width: 645px;
}
#page_left h4 {
color: #5B8172;
font-size: 20px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
width: 645px;
}
#page_left p {
font-size: 14px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
width: 645px;
}
#page_left ul li h5 {
color: #5B8172;
font-size: 18px;
margin: 10px 0 0 9px;
padding: 2.5px 0 3px 10px;
width: 300px;
}
#page_left ul li p {
font-size: 14px;
margin: 10px 0 0 9px;
padding: 2.5px 0 3px 10px;
width: 645px;
}
#page_left h3 {
border-bottom: 2px solid #5B8172;
color: #5B8172;
font-size: 24px;
margin: 10px 0 0 4px;
padding: 2.5px 0 3px 5px;
text-shadow: 1px 1px 1px #2D4038;
width: 645px;
}
#ads{
display: inline;
float: left;
margin: 10px;
width: 660px;
}
#ads li{
border: 1px solid #2104FA;
float: left;
margin-right: 5px;
padding: 5px;
width: 200px;
height: 140px;
}
#ads li a {
color: #370202;
cursor: pointer;
display: block;
text-decoration: none;
}
#ads img {
float: left;
margin: 0 10px 10px 0;
}
#ads h5 {
color: #370202;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
margin-left: 13px;
}
#ads li p {
font-size: 12px;
line-height: 1.3em;
margin:0;
padding: 2.5px;
width: 180px;
}
#domain_l_top{
background: url(../img/domain_bg_1.png) repeat-x scroll center top #FFFFFF;
height: 180px;
width: 100%;
overflow:hidden;
}
#domain_l_top ul {
display: inline;
float: right;
margin: 37px 30px 0 0;
}
#domain_l_top ul li {
color: #FFFFFF;
float: left;
font-size: 24px;
font-weight: bold;
letter-spacing: -1px;
line-height: 80%;
margin: 0;
margin-bottom: 2px;
padding: 0 15px;
text-align: center;
text-shadow: 1px 1px #000000;
list-style: none;
}
#domain_l_top form {
float: right;
height: 40px;
margin: 5px;
width: 425px;
}
#domain_l_top .searchdomains {
border: 0 none;
color: #8D867E;
float: left;
font-size: 14px;
margin-top: 5px;
outline: medium none;
width: 325px;
}
#domain_l_top .search {
background: url("../img/search_btn.png") no-repeat scroll center top transparent;
float: right;
margin: 5px 58px 0 0;
width: 23px;
}
#domain_l_top .search:hover {
background: url(../img/search_btn.png) no-repeat scroll 0 -20px #FFFFFF;
}
The problem I am having is that it keeps on using the page_left css instead of the seperate div css which is causing my page to look wierd.
Upvotes: 0
Views: 367
Reputation: 46
Put the #page_left
styles you want to override at the top, not the bottom, since the last specified styles (thus the ones further down the stylesheet) override the ones higher up. Then, try getting even more specific:
#page_left ul#ads li h5
Upvotes: 0
Reputation: 195971
You will need to use ul#ads li ...
instead of just #ads ...
for those rules to make your rules more specific.
A more specific rule does not mean that only it gets applied. It means that the properties specified in that rule are more important than the other rules that also apply to this elements.
So you need to reset the properties that are set from the #page_left
rule that you do not care for (unless you override them in the #ads
rule).
ie.
#page_left ul li h5 {
color: #5B8172;
font-size: 18px;
margin: 10px 0 0 9px;
padding: 2.5px 0 3px 10px;
width: 300px;
}
and
ul#ads li h5 {
color: #370202;
font-size: 18px;
font-weight: bold;
letter-spacing: -1px;
margin-left: 13px;
}
Since the ul
with id #ads
is inside the element with id #page_left
every h5
in it will get the
color
, font-size
, font-weight
, letter-spacing
and margin-left
from the second rule,
but will also get the
margin-right
, margin-top
, margin-bottom
, width
and padding
from the first, because both rules apply to that h5
. For the same properties defined in both rules, it uses the more specific.
Upvotes: 1
Reputation: 8869
Your #page_left
is overriding all below it, have a look at how different this looks:
http://jsfiddle.net/Mutant_Tractor/tQuUw/1/
Upvotes: 0