SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tables, 1px gap, bottom border only...

    I feel like a noob for asking this but I can't seem to figure out why I am having a 1px gap in the bottom border only for my tables on a website. It only shows when I attempt to use a border at the bottom of a table or a hovered row.

    Due to client privacy I can not send a link to the test site, but here is an image of the issue:
    http://justin-herrera.com/misc/table_screenshot.png

    If you look at the column divider and follow that down, you can see there is a white spot at the bottom of the selected row as well as the border-bottom of the table. I also see one at the top in Chrome.

    CSS attached to tables:
    Code:
    reset.css:
    table{
    	border-collapse:collapse;
    	border-spacing:0;
    }
    
    styles.css:
    body {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
    }
    table{margin-bottom:21px;border-bottom:1px solid #bbb;}
    td{
            height: 25px;
            line-height: 25px;
            border-right: 1px solid #fff;
            text-align: left;
            padding: 0 8px;
            color: #555;
    }
    tr.hover{
                border: 1px solid #bbb;
                background: #ffffff; /* Old browsers */
                background: -moz-linear-gradient(top,  #ffffff 0%, #e2e2e2 100%); /* FF3.6+ */
                background: -webkit-linear-gradient(top,  #ffffff 0%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
                -webkit-box-shadow:  1px 0px 2px 1px rgba(0, 0, 0, .17);
                box-shadow:  1px 0px 2px 1px rgba(0, 0, 0, .17);
                cursor: pointer;
    }
    tr.hover td{background:none !important;border:none !important;}
    th.last,td.last{border-right:none !important;}
    And here is the table itself:
    Code:
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    	<thead>
    		<tr>
    			<th>Date</th>
    			<th class="last">Description</th>
    		</tr>
    	</thead>
    		<tbody>
    			<tr>
    				<td>01/12/2012</td>
    				<td class="last">Fractured tibia</td>
    			</tr>
    			<tr class="hover">
    				<td class="bg_blue">01/12/2012</td>
    				<td class="bg_blue last">Diagnosed Type II Diabetes</td>
    			</tr>
    			<tr>
    			        <td>01/12/2012</td>
    				<td class="last">Heart Attack</td>
    			</tr>
    		</tbody>
    </table>
    I've tried adding a border to the td and it also stops at that spot. At this point I've exhausted my ideas and my Google Fu is not pulling up anything. I did not grow up in the age of tables so not sure if there are hidden nuggets out there that would help this issue.

    Any help is greatly appreciated.
    Thanks,
    Justin

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    This line is causing the problem:

    Code:
    td {
            border-right: 1px solid #fff;
    }
    It doesn't actually seem to be needed, so perhaps just remove it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's there to match the th, but now that I think about it you may be right, may not need that there actually. I'll have to try it tomorrow when I get back in the office. Thanks for the idea! I'll let you know if it works.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    solved, turns out I don't need a border, the table takes it into account when creating the widths of the tds below the ths, thanks =)


Bookmarks

Posting Permissions

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