CSS Blues...

  • locust
  • Beginner
  • Beginner
  • User avatar
  • Posts: 44
  • Loc: Austin, TX

Post 3+ Months Ago

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: [ Select ]
#shopping_cart table {
    border: 1px solid red;
    border-collapse: collapse;
    background-color: white;
    text-align: center;
    margin: 5px;
    padding :5px;
  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: [ 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: [ 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.

Moderator Remark: Added [code] tags
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.