CSS: Table cell spacing and cell border problems

Dev Shed Forums Sponsor:

January 23rd, 2004, 04:17 AM

Xeo

$post_count++;

Join Date: Jun 2001

Location: Southern MN, USA

Posts: 1,143

Time spent in forums: 6 Days 9 h 27 m 18 sec
Reputation Power: 15

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?

__________________

January 23rd, 2004, 04:46 AM

frazzle

Contributing User

Join Date: Dec 2003

Location: England

Posts: 139

Time spent in forums: 7 h 32 m 52 sec
Reputation Power: 5

have u tried cell-spacing: 0px

January 23rd, 2004, 05:11 AM

Xeo

$post_count++;

Join Date: Jun 2001

Location: Southern MN, USA

Posts: 1,143

Time spent in forums: 6 Days 9 h 27 m 18 sec
Reputation Power: 15

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.

January 23rd, 2004, 06:01 AM

frazzle

Contributing User

Join Date: Dec 2003

Location: England

Posts: 139

Time spent in forums: 7 h 32 m 52 sec
Reputation Power: 5

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

January 23rd, 2004, 06:14 AM

Xeo

$post_count++;

Join Date: Jun 2001

Location: Southern MN, USA

Posts: 1,143

Time spent in forums: 6 Days 9 h 27 m 18 sec
Reputation Power: 15

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.

January 23rd, 2004, 06:43 AM

Xeo

$post_count++;

Join Date: Jun 2001

Location: Southern MN, USA

Posts: 1,143

Time spent in forums: 6 Days 9 h 27 m 18 sec
Reputation Power: 15

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.

January 23rd, 2004, 07:01 AM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 17 h 42 m 44 sec
Reputation Power: 642

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.

January 23rd, 2004, 08:56 AM

Xeo

$post_count++;

Join Date: Jun 2001

Location: Southern MN, USA

Posts: 1,143

Time spent in forums: 6 Days 9 h 27 m 18 sec
Reputation Power: 15

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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: