#1
  1. No Profile Picture
    $post_count++;
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2001
    Location
    Southern MN, USA
    Posts
    1,143
    Rep Power
    21

    CSS: Table cell spacing and cell border problems


    I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong.

    Correct look Incorrect look

    I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any.

    Here is my main CSS:
    Code:
    	body		{ background-color: #FFFFFF; }
    	a		{ text-decoration: none; font-weight: bold; }
    	a:link		{ color: #003366; background-color: transparent; }
    	a:visited	{ color: #003300; background-color: transparent; }
    	a:active	{ color: #339933; background-color: transparent; }
    	a:hover		{ text-decoration: underline; }
    	table		{ border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
    	td, th		{ border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
    	tr.one		{ background-color: #FFFFFF; }
    	tr.two		{ background-color: #DDDDDD; }
    	table.squares	{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
    	td.square	{ border: 1px solid grey; padding: 4px; }
    	td.nopadding	{ padding: 0px; }
    	.default	{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
    	.h1		{ font-size: 200%; font-weight: bold; text-align: center;}
    	.h2		{ font-size: 120%; font-weight: bold; }
    	.h3		{ font-weight: bold; }
    	.step		{ font-size: 150%; font-weight: bold; color: #999999; }
    Here is one of the sets of squares:
    Code:
    <table class="squares">
        <tr>
            <td class="square" style="background-color: #CCCC66"></td>
            <td class="square" style="background-color: #CC9966"></td>
            <td class="square" style="background-color: #990000; border: black"><td>
            <td class="square" style="background-color: #669966"></td>
            <td class="square" style="background-color: #669999"></td>
        </tr>
    </table>
    And finally, here is one of my progress bars:
    Code:
    <table style="color: white; width: 100px">
        <tr>
            <td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
            <td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
        </tr>
    </table>
    And in case that code is not enough, here is a link to the full HTML.

    According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers?

    My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    England
    Posts
    139
    Rep Power
    12
    have u tried cell-spacing: 0px
  4. #3
  5. No Profile Picture
    $post_count++;
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2001
    Location
    Southern MN, USA
    Posts
    1,143
    Rep Power
    21
    I just did and it did not work. I also tried border-collapse: collapse; but that didn't work either. I have tried putting them both in the styles of the tables themselves and the main table styles but neither seem to have an effect on those progress bars. The whitespace remains.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    England
    Posts
    139
    Rep Power
    12
    table.squares{ border: 0px; border-spacing: 1px; width: 50px; height: 10px; }

    looking at this (for the squares) you set it to a hight of 10px - im guessting that is how big u want ur squares

    td.square { border: 1px solid grey; padding: 4px; }

    but then you say u want a cell padding 4

    - i havent looked into this in much detail but u could give it a try
  8. #5
  9. No Profile Picture
    $post_count++;
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2001
    Location
    Southern MN, USA
    Posts
    1,143
    Rep Power
    21
    That fixed the size and shape of the squares in IE. Thanks. I changed:

    Code:
    table.squares   { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
    td.square       { border: 1px solid grey; padding: 4px; }
    to:
    Code:
    table.squares   { border: 0px; border-spacing: 1px; width: 50px; }
    td.square       { border: 1px solid grey; padding: 0px; width: 8px; height: 8px; }
    However, the cells are still borderless for some reason. I want them to have borders.
  10. #6
  11. No Profile Picture
    $post_count++;
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2001
    Location
    Southern MN, USA
    Posts
    1,143
    Rep Power
    21
    So it appears I fixed my borderless cell problem. The black one wasn't showing up because when I said:
    Code:
    <td class="square" style="background-color: #990000; border: black"><td>
    IE wanted "border" to have all 3 elements, not just the color. So I changed it to:
    Code:
    <td class="square" style="background-color: #990000; border: 1px solid black"><td>
    and I got black borders. And I solved my grey border problem as well. It turns out, through a little digging, that IE uses the spelling "gray" for grey, and not "grey". As a result, the border didn't show up. I changed it from:
    Code:
    td.square       { border: 1px solid grey; padding: 4px; }
    to:
    Code:
    td.square       { border: 1px solid #888888; padding: 4px; }
    and my grey borders showed up. This experience has made me decide to always use the RGB values from now on rather than any text spellings. What a pain.

    Now, I have no whitespace between the squares, and I still have whitespace in my progress bars. They seem to have the exact opposite going on. I need to figure out what's up and fix them both.
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    instead of assigning classes to every td, you can use the cascading in css

    ie.

    table.squares td { border: 1px solid #888888; padding: 4px; }

    this would affect everytd within the table with the class squares.
  14. #8
  15. No Profile Picture
    $post_count++;
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2001
    Location
    Southern MN, USA
    Posts
    1,143
    Rep Power
    21
    Well, I got my boxes to work by using divs instead of tables. I can post the code if interested.

    And I finally broke down and added cellspacing="0" to my table tags. I wanted this to be done completely in CSS but IE just wasn't being friendly enough. Anyway, it looks proper now on my site.

    Thanks for the help.

    Akh: Thanks for the tip about cascading. I'm still new to CSS so i didn't know you could do that.

IMN logo majestic logo threadwatch logo seochat tools logo