CODEWITHSUNDEEP
htmlcss
HAWKES08
HAWKES08

Reputation: 521

border collapse not working

jsFiddle demo

as you can see from the demo above the borders are not collapsing! i'm new to this and not sure why, any help would be much appreciated

HTML

<table>
    <tr>
        <td><img src="images/new24/_landing/profile_slideout/contactme_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/bouncerate_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/analyseme_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/socialme_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/locateme_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/dailybubble_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/bouncedon_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/followme_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/exhibitormode_icon.png"/></td>
        <td><img src="images/new24/_landing/profile_slideout/treatsprofile_icon.png"/></td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
}

 td {

    border: 1px solid red;
    background: blue;
    width: 129px;
    height: 116px;
    float: left;
    position: relative;
    padding: 20px;
}

Upvotes: 0

Views: 8973

Answers (3)

Chris Bentley
Chris Bentley

Reputation: 1945

Because you are floating each TD element you are causing the TDs to be treated like block elements by the renderer rather than as table-cells. Block elements have no concept of border-collapse.

http://www.w3.org/TR/CSS21/visuren.html#block-formatting http://www.w3.org/TR/CSS2/visuren.html#float-position

Upvotes: 1

Scott Romack
Scott Romack

Reputation: 677

move your background:blue up into the table element and comment out the collapse

table {
XXborder-collapse: collapse;
background: blue;

}

 td {
border: 1px solid red;
width: 129px;
height: 116px;
float: left;
position: relative;
padding: 20px;

}

also, uncheck Normalized CSS and you will see it's working but perhaps not like you thought.

Upvotes: 0

Fenton
Fenton

Reputation: 250932

I would suggest you mark-up your content like this:

<ul>
    <li><img src="images/new24/_landing/profile_slideout/contactme_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/bouncerate_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/analyseme_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/socialme_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/locateme_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/dailybubble_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/bouncedon_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/followme_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/exhibitormode_icon.png"/></li>
    <li><img src="images/new24/_landing/profile_slideout/treatsprofile_icon.png"/></li>
</ul>

... and also consider adding alt attributes to each image.

Your CSS would look like this:

li {
    border: 1px solid red;
    background: blue;
    width: 129px;
    height: 116px;
    float: left;
    padding: 20px;
    margin: -1px 0 0 -1px;
}

To preserve the top and left border, add this:

ul {
    margin: 1px 0 0 1px;  
}

The margin property is the one that causes the borders to collapse on this series of elements.

Here is a jsFiddle example.

Upvotes: 2

Related Questions