I've been doing some research on how to change the color of a table row background when hovering.
Can anyone lend support how to make this possible in IE for tables? I've found solutions like whatever:hover but they only work for <li> tags.
It can be done for it exists in phpmyadmin, a browser based software for working on MySQL databases locally or remotely. Poking around that with Debugbar and I can't decipher enough to determine what Javascript or CSS solution they are using.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
tr:hover { background:blue; }
</style>
</head>
<body>
<table>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
<tr><td>this</td><td>this</td></tr>
</table>
</body>
</html>works for me in opera ff safari ie7 ie8 dont have a testbed of ie6 any more
IE6 is mildy out of date, but
<style>
tr:hover {background-color: anycolor};
</style>
Thanks
Lo and behold it's not a browser compatibility issue as first thought but one of a different nature. This problem is only prevalent in IE. All other browsers show this attribute without fail. As your example demonstrated, tr:hover is supported in IE 7 & 8 (I tried 6 and it was a no go) but tr:hover syntax was not working in my css stylesheet or if I include it as a style in the header area. It led me to do some further debugging and this is what I found.
I am using a css reset stylesheet available from meyerweb that is loaded before my stylesheet. By removing the reset stylesheet and reloading the web page, the tr:hover now works.
This is the code from the reset stylesheet:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}So the question becomes why would IE not accept the new directive?
tr:hover{background: #ffff7f;}or
tr:hover{background-color: #ffff7f;}With reset.css and my stylesheet loaded this is the style reported in Debugbar:
/*--------------
Inherited from TR
------------- */
/* Rule N°14 from css/index.css */
TR:hover {
BACKGROUND-COLOR: #ffff7f
}
/* Rule N°72 from css/reset.css */
:focus {
outline: 0
}
/* Rule N°60 from css/reset.css */
TR {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FONT-SIZE: 100%;
BACKGROUND: none transparent scroll repeat 0% 0%;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
VERTICAL-ALIGN: baseline;
PADDING-TOP: 0px;
BORDER-RIGHT-WIDTH: 0px;
outline: 0
}Style as computed reported by Debugbar:
BORDER-LEFT-WIDTH: 0px;
WIDTH: 35%;
FONT-SIZE: 240;
OVERFLOW: visible;
BORDER-COLLAPSE: collapse;
PADDING-TOP: 0.25em;
VERTICAL-ALIGN: middle;
BORDER-BOTTOM: 1px solid navy;
BORDER-BOTTOM-WIDTH: 1px;
FONT-FAMILY: Verdana;
BORDER-TOP-WIDTH: 0px;
TABLE-LAYOUT: fixed;
BACKGROUND-COLOR: transparent;
LINE-HEIGHT: 18pt;
outline: 0;
PADDING-RIGHT: 0.25em;
BORDER-RIGHT-WIDTH: 0px;
PADDING-LEFT: 0.25em;
COLOR: #333;
TEXT-ALIGN: left;
MARGIN: auto;
PADDING-BOTTOM: 0.25em;Input is much appreciated. Thanks for taking the time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- @(#) $Id$ --> <head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type='text/css'> tr:hover { background:blue; } </style> </head> <body> <table> <tr><td>this</td><td>this</td></tr> <tr><td>this</td><td>this</td></tr> <tr><td>this</td><td>this</td></tr> <tr><td>this</td><td>this</td></tr> </table> </body> </html>works for me in opera ff safari ie7 ie8 dont have a testbed of ie6 any more
transparent blue|red|green
is transparent
its a fault in IE handling of transparent in reset.css file discussed in other forums too
http://dgibson.net/blog/article.cfm/articleid=11/CSS-Overcoming-background-transparent-In-IE
dunno if the fix works,
I ha already edited reset.css and changed transparent to inherit for my sites, Thats how my layout works
table tr:hover td{ background-color:#eee;}
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.