Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS acting wierd

    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.

    Code:
    <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>
    Code:
    .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

  • #2
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •