border-top in IE and FireFox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Ken Loomis - 26 Apr 2006 15:44 GMT

Hello:

I would like a table with alternating color rows, a border between
rows, and a border around the entire table. I want no borders between
cells.

-------------------------------------------------------

| header-a header-b header-c header-d |
|---------------------------------------------------- |
|data1a data1b data1c data1d |
|-----------------------------------------------------|
|data2a data2b data2c data2d |
|______________________________________|

I use the following CSS

table.users {
border-collapse: collapse;
margin-left:auto;
margin-right:auto;
text-align:left;
width:750px;
border: 3px groove #369;
background-color: #CCC;
}

table.users td {
padding:0 1px;
}

tr.blue {
background-color: #CCF;
border-top:1px solid #333;
}

tr.gray {
background-color: #CCC;
border-top:1px solid #333;
}

This renders as I would like in FireFox but in IE there are no row
borders.

What am I doing wrong?

Thanks,

Ken

Reply to this Message

kchayka - 26 Apr 2006 19:26 GMT

> tr.blue {
> border-top:1px solid #333;
> }
>
> This renders as I would like in FireFox but in IE there are no row
> borders.

Put the border on the td instead:
tr.blue td {
border-top:1px solid #333;
}

If borders are collapsed, it should end up a solid line.

BTW, you would be better off using a more generic name for your class
selectors, maybe identifying alternate-row or even/odd-row rather than a
specific color. What happens when you decide to change the color scheme?
Your class names won't make sense any more.

Signature

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Reply to this Message

Ken Loomis - 26 Apr 2006 20:41 GMT

>> tr.blue {
>> border-top:1px solid #333;
[quoted text clipped - 9 lines]
>
>If borders are collapsed, it should end up a solid line.

kchayka, thanks so much. MS thinks its border-top works, but it looks
to me like it doesn't.

>BTW, you would be better off using a more generic name for your class
>selectors, maybe identifying alternate-row or even/odd-row rather than a
>specific color. What happens when you decide to change the color scheme?
>Your class names won't make sense any more.

I hear you, but then again, when you're coding up the html, it's nice
to be able to specify the color. If I wanted to change the color I
think I would create another style with a different name. I'm a
programmer first, so I guess I look at it bassackwords

Thanks again. I really appreciate it.

Ken

Reply to this Message

Beauregard T. Shagnasty - 26 Apr 2006 21:41 GMT

>> BTW, you would be better off using a more generic name for your class
>> selectors, maybe identifying alternate-row or even/odd-row rather
[quoted text clipped - 5 lines]
> think I would create another style with a different name. I'm a
> programmer first, so I guess I look at it bassackwords

In my style sheets, I have some standard color coding where I use class
names such as "hot" (a deep red) and "veryhot" (a bright red), and
"cool" (a medium blue). If my clients should decide they like a green
color to indicate the styled words, all I have to do is change the color
number one place, and the HTML still says: class="hot" (which that
client deems .. hot. <g>

I don't end up with class="red" and it displays green.

Signature

-bts
-Warning: I brake for lawn deer

Reply to this Message

kchayka - 27 Apr 2006 00:29 GMT

>>Put the border on the td instead:
>>tr.blue td {
[quoted text clipped - 5 lines]
> kchayka, thanks so much. MS thinks its border-top works, but it looks
> to me like it doesn't.

WFM. Post a URL.

Signature

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Reply to this Message

Ken Loomis - 27 Apr 2006 00:38 GMT

>>>Put the border on the td instead:
>>>tr.blue td {
[quoted text clipped - 7 lines]
>
>WFM. Post a URL.

You may have misunderstood me. Your solution of putting the
border-top in the <td> works perfectly. According to MS docs, putting
it in the <tr> should work, but it doesn't for me.

Thanks again,

Ken

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2006

border-top in IE and FireFox