CSS Blues...

June 26th, 2009, 11:34 am

Hey all,

I've just finished banging my head against the keyboard dealing with a CSS issue. I fixed the problem, but hoping someone could explain why this happens..

Basic Gist
Tying to get table borders to show on outside of table and table cells

My method was to simply define a id in an external style sheet and then call the id from a div. Here's the def:

Code: [ Download ] [ Select ]

#shopping_cart table {
    color:#1E1816;
    border: 1px solid red;
    border-collapse: collapse;
    border-spacing:2px;
    background-color: white;
    text-align: center;
    margin: 5px;
    padding :5px;
    width:100%;
}

1. #shopping_cart table {
2.     color:#1E1816;
3.     border: 1px solid red;
4.     border-collapse: collapse;
5.     border-spacing:2px;
6.     background-color: white;
7.     text-align: center;
8.     margin: 5px;
9.     padding :5px;
10.     width:100%;
11. }

One would think that by defining the border above that you would get a border around the table and each cells. Unfortunatley, all I kept getting was a border around the table. I tried several different things, but nothing seemed to work until...

I set the border=1 in the table element:

Code: [ Download ] [ Select ]

<table border="1">

For some reason, that did it. Of course, this kinda' breaks the CSS philosophy of keeping layout and content separate. Oddly enough, even the CSS tutorial on border-collapse on the w3c school website defines the table border. Here's my final code:

Code: [ Download ] [ Select ]

<div id="shopping_cart"><table border="1"> ..etc, etc, etc

The point is that I had to define the border property in the table element, which either I'm doing something wrong (which is highly possible) or I'm crazy.

Anyone shed some light on this please? I'm dying to know what the deal is.

THanks..

Moderator Remark: Added [code] tags

[UPSGuy]

June 26th, 2009, 11:36 am

What you've seen is standard CSS behavior. the border="1" flows down to the cells, but with CSS, you're only defining the outside border. Try defining a border for your td tags and I think you'll get what you're after.