...

View Full Version : CSS acting wierd



crazykid
01-11-2012, 12:53 PM
I've got a table that is inside of a div. Below the div is another div. The links inside of the table have their own class but the browser is rendering the links so that the links are being matched up to another class.


<div class='gamedirectory'>
<table width='100%' class='gamedirectorytable'>
<tr class='gamedirectoryheader'>
<th><a href="">Content</a></th>
<th><a href="">Content</a></th>
<th><a href="">Content</a></th>
<th><a href="">Content</a></th>
</tr>
<tr>
<td><a href="">Content2</a></td>
<td><a href="">Content2</a></td>
<td><a href="">Content2</a></td>
<td><a href="">Content2</a></td>
<td><a href="">Content2</a></td>
<td><a href="">Content2</a></td>
</tr>
</table>
</div>
<div class="footer">
<div class="footer-links">
<div class="footer-cat">
<h4>Header here</h4>
<ul>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
</ul
</div>
<div class="footer-cat">
<h4>Header here</h4>
<ul>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
</ul
</div>
<div class="footer-cat">
<h4>Header here</h4>
<ul>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
<li><a href="">Content3</a></li>
</ul
</div>
</div>
</div>


.gamedirectory {border:0;width:67%;margin:3px;float:left;border-collapse:collapse;position:relative;font-family:arial;font-size:11pt;}
.gamedirectoryheader {color:#F1C36B;text-style:bold;text-align:left;}
.gamedirectorytable a, a:link {
color:#3B9C9C;
font-weight:normal;
}
.gamedirectorytable a:hover {
color:#307D7E;
text-decoration:none;
}
.gamedirectoryheader th {font-weight:bold;}
.gamedirectoryheader th a, a:link {font-weight:bold;}
.gamedirectoryheader th a:hover {color:#3f3e3e;text-decoration:none;}
.footer {
width:100%;
background:#FDEEF4;
float:left;
}
.footer-links {
width:100%;
margin-top:25px;
border-top:1px solid #E6E6E6;
background:#ffffff;
padding-left: 25px;
float:left;
}
.footer-cat {
float: left;
height: 180px;
overflow: hidden;
width: 227px;
}
.footer-cat ul {
clear: both;
font-size: 12px;
list-style: none outside none;
margin: 0;
padding: 0;
}
.footer-cat ul li {
margin-bottom: 0.5em;
}
.footer-cat ul li a, a:link {
color: #000000;
font-weight: normal;
}
.footer-cat ul li a:hover {
color:#3f3e3e;
text-decoration:none;
}
.footer-links2 {
width:100%;
background:#ffffff;
align:left;
}

Now the problem I am having is that when I use firebug to see what is going on in the source code, the browser is using the css class, footer-cat ul li a, a:link, to control the links inside of the table that is using the css class, gamedirectorytable. What is wierd is that why would a browser render a css class on to an html code if the specified css class belongs to a div and not a table? The gamedirectorytable uses td and tr and the footer-cat uses ul and li but the browser is assisning the footer-cat class to the gamedirectorytable links.

Any ideas?

www.mmocraze.com/gamedirectory

crazykid
01-11-2012, 02:39 PM
Nevermind, my buddy helped me fix it. Had to remove the 'a,' from the gamedirectory header th css class. Had to make sure no classes were conflicting with each other.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum