Highlight rows with CSS

Ralf

Hi,
I have a problem to highlight a row on mouseover with css. After hours I found out that the reason for this is the doctype in my project.

Because I can't use the strict mode of the browser (IE6+ only) I write the following line to the beginning of my documents:
"[code]<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN">[/code]

With this entry, my web pages look good, but it is not possible to highlight a row with CSS

This entry, however works fine (see example http://datatables.net/examples/advanced_init/highlight.html), but my websites look very bad:
"[code]<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN " "http://www.w3.org/TR/html4/strict.dtd">[/code]

Have anyone an idea how to highlight a row with css on mouse over with my docType?

Thanks, Ralf

Sorry for my English, it is not my favorite language :-)

28.vivek.s

try something like this....

[code]
#ResultsTable tr.even:hover{
background-color: #cccccc;
}

#ResultsTable tr.odd:hover{
background-color: #cccccc;
}
[/code]
Regards,
Vivek

Ralf

Hi Vivek,
does not work. It is principle the same as in the example
[code]
ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
background-color: #E6FF99;
}
[/code]

It definitely works after adding the entry in the header, unfortunately, with the effect the website look bad, .
[code]http://www.w3.org/TR/html4/strict.dtd[/code]

Greetings Ralf

ale

If ur using jQuery UI you can use this to use UI hover styles:
[code]
$("#DATATABLE_TABLE tbody tr").each(function(){
$(this).mouseover(function(){
$(this).addClass("ui-state-hover");
}).mouseout(function(){
$(this).removeClass("ui-state-hover");
});
});
[/code]

Ralf

Hallo,

with or without UI, the same effect: No highlightning

The function is OK, the alert shows the right id ...
[code]
$("#myDataTable tbody tr").each(function(){ $(this).mouseover(function(){
alert($(this).attr('id'));
$(this).addClass("ui-state-hover");
}).mouseout(function(){
$(this).removeClass("ui-state-hover");
});
[/code]

With the link in the docType definition it works ...

Ralf

allan

The problem here is the browser - IE6 will only support :hover on A tags. So doing tr:hover isn't going to help in IE6 I'm afraid. In all other browsers it works great - but if you must support IE6 in IE5 mode, then Javascript is the only way to go.

I'd suggest using live() events for your mouse over (also don't bother with the 'each' jQuery does that for you, so it's faster without).

Allan

Ralf

I just found out that the code (5.th message) works when I write following to the css file
[code]
.hell {
background-color: #ECFFB3 !important;
}
[/code]
The Problem is that the 'sorted' cells (td's) will not be highlightet.

Ralf