Forum Moderators: not2easy
I'm using the following to make the rows with in a table change color as the mouse moves over them:
tr.overview:hover {
background-color: #9092EC;
}
This works well.
I then decide to change the formatting of the tables.. now the hover doesn't work..
This is what I'm using to format the tables:
table {
border-width: 0px 0px 0px 0px;
border-spacing: 4px;
border-style: dashed dashed dashed dashed;
border-color: gray gray gray gray;
border-collapse: separate;
}
table td {
border-width: 1px 1px 1px 1px;
padding: 2px 2px 2px 2px;
border-style: dotted dotted dotted dotted;
border-color: black black black black;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
font: 8pt Verdana;
}
If I remove "background-color: white;" it works... but I like the white back ground..
Any ideas ?
Thanks Smile
HTML:
[validator.w3.org...]
CSS:
[jigsaw.w3.org...]
...........................
You can do a lot to streamline the CSS:
In table
{border: 0 dashed gray;} replaces border-width: border-style: and border-color;
Note: If border width is 0 - why declare the the other properties at all? There is nothing to display.?
...........................
In table td
Shorthand will remove a lot of extra declaration.
{border: 1px dotted black;} replaces all of the border-width: border-style: and border-color:
padding can be shorthanded to {padding: 2px;}
The <generic-family> sans-serif should be added, as best practice, to the shorthanded font:
{font: 8pt Verdana, sans-serif;}
...........................
I would clean-up, validate, then see if the problem still exists and begin from that point if necessary.
Thanks for the reply...
<code>
<strong>HTML</strong>
<LINK href="test.css" type=text/css rel=stylesheet>
<body BGCOLOR="#333333">
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
<strong>test.css</strong>
table {
border: 0 dashed gray;
border-spacing : 4px;
}
table td {
border: 1px dotted black;
padding: 2px;
font: 8pt Verdana, sans-serif;
background-color: #FFFFFF;
}
tr:hover {
background-color: #9092EC;
}
</code>
As you can see the headers are displayed with the cells displaying the body's colours.
The cells have white backgrounds... BUT
The hover only works on the header not on the white cells.
I like the background colour running around the cells.
Any ideas ? Thanks :)
th:hover, td:hover {
background-color: #9092ec;
}
Of course, this does not work in IE without help. Didn't test, but ie8.js ought to fix that up.
Hence your cells with a non-transparent backgrounds sit on top of your row and you can't see the row.
Try
tr:hover td {
background-color: #9092EC;
}
BTW: border="1" and bgcolor="#333333" are obsolete settings, try doing them with CSS instead.
swa66 - that works fine in FF but not in IE7.
Any ideas ?
Try adding something that doesn't change anything to your tr in the appropriate conditional comment.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Now it seems to work in IE7 and FireFox !
Thanks
But yes, I take it so much for granted that I start to forget how bad some browsers behave without it.
