PDA

View Full Version : Tables in IE


Rich_A06
04-24-2007, 01:44 PM
Here's the CSS for td ..

td {
border: 1px solid #FFFFFF;
padding-left: 4px;
padding-right: 4px;
height: 25px;
}

And for tc which is a style (table content)

.tc {
font-family: Arial;
font-size: 12px;
color: #666666;
border: 1px solid #FFFFFF;
}
.tc:hover {
font-family: Arial;
font-size: 12px;
color: #000000;
}
.tc a:link {
font-family: Arial;
font-size: 12px;
color: #666666;
font-style: italic;
}
.tc a:visited {
color: #666666;
font-style: italic;
}
.tc a:hover {
font-family: Arial;
font-size: 12px;
color: #000000;
}
.tc a:active {
font-family: Arial;
font-size: 12px;
color: #666666;
}


It works perfectly in FF and Opera but IE6 decides to put a great big grey border on the white rows and also the .tc:hover CSS doesn't work! Any ideas, the code looks clean to me. Here's the URL for one of the tables.

http://www.eoaa.org/database/teams/caldbeck_fells_racing.htm#

Rich_A06
04-24-2007, 02:18 PM
OK the border appears if &nbsp; is not present before </td> in a blank cell lol!

No problem, but what about that .tc:hover CSS? The table conent is definitely set to style tc and it works in FF and Opera so why not in IE6?

domedia
04-24-2007, 02:24 PM
:hover does not work in IE on anything else than anchor elements.

Rich_A06
04-24-2007, 02:46 PM
Huh well boo hoo for IE. What about IE7? If it still don't work I guess a little compromise will have to be made so that the content is still clear in IE.

domedia
04-24-2007, 03:33 PM
actually, you might want to use javascript instead, then you will get more browser compatibility.
Something like <td onmouseover="this.style.color='black';">

Rich_A06
04-24-2007, 05:25 PM
Good thinking. Tried adding it to the first line in the body, didn't work. So where does that comand need to go exactly?

domedia
04-24-2007, 08:42 PM
Like in my example, right into your TD tag

Rich_A06
04-25-2007, 02:59 AM
Yes works and so needed to put in CSS. Googled and found this little gem ..

h: expression(onmouseover=new Function("this.style.backgroundColor='#F0F0F0'; this.style.color='#000000';"),
onmouseout=new Function("this.style.backgroundColor='#E6E6E6'; this.style.color='#535353';"));

I'm not sure what h stands for and in fact changing it to any letter works. Anyhow that goes into my .tc style. The .tc:hover style is still needed for FF and Opera. Now if only there was a way for the td CSS to over rule the anchor CSS?

domedia
04-25-2007, 02:22 PM
Not sure what the code you pasted is, but if you used the snippet I gave you and also include onMouseout, you'll get what you want.

Rich_A06
04-25-2007, 08:25 PM
Yes but does it work in CSS. onMouseOver isn't in the DW list when editing CSS. Well, that code in my previous post is for IE and CSS but now I want a selected group of cells in a single row to change on mouse over and mouse out which led me to this site http://www.permadi.com/tutorial/cssHighlightTableRow/index.html

It uses JS so should be OK with that.

domedia
04-25-2007, 08:28 PM
It's Javascript not CSS, that's why you can't see it in the CSS tab.

Rich_A06
04-25-2007, 09:02 PM
OK so JS goes in HTML. That expression code I posted before works fine for a single cell but only in IE and it's is a bit obscure.

Anyhow, trying the things on the web site I posted i.e. giving tr classes and then assigning JS to each tr in HTML!

Here's the style ..

tr { background-color: #E6E6E6}
.initial { background-color: #E6E6E6; color: #535353; font-family: Arial; font-size: 12px; }
.normal { background-color: #E6E6E6; color: #535353; font-family: Arial; font-size: 12px; }
.highlight { background-color: #F0F0F0; font-family: Arial; font-size: 12px; }

And then in HTML

<tr class="initial"
onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">

Works. :)

domedia
04-26-2007, 02:24 PM
Nice one :)

Rich_A06
04-27-2007, 01:15 AM
Yea thanks for mentioning that JS. I originally thought that JS could only be in the head section but that is not the case. Here's a page of it in action..

http://www.eoaa.org/events/GTR2/results/template_quali.htm#

Works in IE, FF and Opera first time and that other element code for IE comes in handy sometimes.

The code on that page is actually quite good. Some of my other pages are a mess but they work so they can stay as is.