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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS wont effect a table cell... but it works in Dreamweaver!

    I am trying to style a table with CSS. It all looks good except one part. I'm trying to set the widths for the table's columns by setting the widths of each of the top row's cells individually with CSS, but they don't seem to be getting effected. I'm probably just doing something wrong, but the weird part is that it works in Dreamweaver.

    See the screenshot for how it's supposed to look, vs how it does:



    The top is the Dreamweaver view, loosk fine (I even set the first cell's BG to black to quickly tell if it works). The bottom part is the view in Firefox (3.6.3). The cell's widths are not effected, and the first cell's BG is not styled.

    Here is the css:

    PHP Code:
    #search-results-table{
        
    width:921px;
        
    margin:3px 0px 2px 10px;
        
    border-left:1px solid #D6D6D6;
        
    border-bottom:1px solid #D6D6D6;
    }
    #search-results-table td{
        
    border-right:1px solid #D6D6D6;
        
    border-top:1px solid #D6D6D6;
        
    padding:3px 0px 2px 10px;
    }
    #search-results-table .head{
        
    background:#EFEFEF;
        
    font-weight:bold;
        
    padding:3px 0px 2px 10px;
    }
    #search-results-table .head #1{
        
    width:10px;
        
    background:#000000;
    }
    #search-results-table .head #3{
        
    width:50px;
    }
    #search-results-table .head #7{
        
    width:300px;

    And here is the HTML
    PHP Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <
    html xmlns="http://www.w3.org/1999/xhtml">
        <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <
    title>test</title>
        <
    link rel='stylesheet' href='styles.css' type='text/css' />
        </
    head>
        
        <
    body>
        <
    table cellpadding="0" cellspacing="0" id="search-results-table">
                                <
    tr class="head">
                                    <
    td id="1">&nbsp;</td>
                                    <
    td id="2"><a href="#">NAME</a></td>
                                    <
    td id="3"><a href="#">CALS</a></td>
                                    <
    td id="7"><a href="#">ADD</a></td>
                                </
    tr>
                                <
    tr>
                                    <
    td><input checked="checked" type="checkbox" name="ITEM ID"/></td>
                                    <
    td><a href="#">asdf</a></td>
                                    <
    td>100</td>
                                    <
    td>[buttons]</td>
                                </
    tr>
                            </
    table>
        </
    body>
        </
    html


    Thanks!
    Last edited by johnmazz; 05-20-2010 at 03:21 PM. Reason: updating code

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,780
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    You can’t have IDs that start with a number, it has to be a basic latin character.

    Oh and while we’re at it: You should use proper semantic table markup. A table consists of row groups, header cells and data cells that exactly denote the function of each element. You could save your IDs right away (if you don’t care about supporting IE 6) by using such markup:
    Code:
    <table id="search-results-table">
    	<thead>
    		<tr>
    			<th scope="col"></th>
    			<th scope="col"></th>
    			<th scope="col"></th>
    			<th scope="col"></th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    		</tr>
    	</tbody>
    </table>
    Code:
    #search-results-table {border-collapse: collapse;}
    #search-results-table thead th:first-child {width: 10px;}
    #search-results-table thead th:first-child + th {width: 50px;}
    Last edited by VIPStephan; 05-20-2010 at 03:21 PM.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect! I knew it would be something simple, thanks for the help.


  •  

    Tags for this Thread

    Posting Permissions

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