watagal 0 Posted April 11, 2008 Report Share Posted April 11, 2008 GreetingsHow do I get the behavior of changing the background when hovering over a table row - similar to a:hover {}?Sorry iof I'm posting this question in the wrong forum.TIA, Gal Quote Link to post Share on other sites
Ingolme 1,027 Posted April 11, 2008 Report Share Posted April 11, 2008 Just use the :hover pseudo-class on a <td> element, though it won't work in Internet Explorer 6 and below.td:hover {background-color: blue;} Quote Link to post Share on other sites
vchris 3 Posted April 11, 2008 Report Share Posted April 11, 2008 tr:hover will highlight the whole row not just a single cell like td:hover will do. Quote Link to post Share on other sites
watagal 0 Posted April 11, 2008 Author Report Share Posted April 11, 2008 That's the ticket!Thanks - Gal Quote Link to post Share on other sites
jlhaslip 1 Posted April 11, 2008 Report Share Posted April 11, 2008 Won't work in IE6 or earlier... no :hover except on anchor tags. Quote Link to post Share on other sites
watagal 0 Posted April 12, 2008 Author Report Share Posted April 12, 2008 tr:hover will highlight the whole row not just a single cell like td:hover will do.Me again. I tried:tr.oddrow:hover { background-color: blue; }tr.evenrow:hover{ background-color: blue; }in my CSS file and no go. I can't even get td.oddrow:hover {} to work.Does this work on nested tables?TIA, Gal Quote Link to post Share on other sites
Ingolme 1,027 Posted April 12, 2008 Report Share Posted April 12, 2008 Well, on which element is the class name "oddrow" or "evenrow"?And if you want all the cells in a row to change I recommend selecting the cells within the row rather than the row itself:tr.oddrow:hover td { background-color: blue; } Quote Link to post Share on other sites
watagal 0 Posted April 12, 2008 Author Report Share Posted April 12, 2008 Well, on which element is the class name "oddrow" or "evenrow"?And if you want all the cells in a row to change I recommend selecting the cells within the row rather than the row itself:tr.oddrow:hover td { background-color: blue; }I'm specifying the class on the <tr class="oddrow"> element, likewise with <tr class="evenrow"> . If I do this at the <td> level, then only a single cell (not the whole row) will highlight. The behavior I want is for the whole row to highlight - no matter which cell w/in said row is being hovered. I see this behavior in "phpMyAdmin" tables.Thanks, Gal Quote Link to post Share on other sites
boen_robot 107 Posted April 12, 2008 Report Share Posted April 12, 2008 Just to be safe... are you sure you are NOT using Internet Explorer 6 or earlier? Are you sure you have Internet Explorer 7 or later, or any other browser? Quote Link to post Share on other sites
jeffman 86 Posted April 12, 2008 Report Share Posted April 12, 2008 After experimenting for a while, I remembered that I knew the answer. A real DUH! sort of moment. IE7 supports :hover for non-anchor elements ONLY IN STRICT MODE.So, Gal, do you have a strict dtd? Quote Link to post Share on other sites
watagal 0 Posted April 12, 2008 Author Report Share Posted April 12, 2008 Just to be safe... are you sure you are NOT using Internet Explorer 6 or earlier? Are you sure you have Internet Explorer 7 or later, or any other browser?Yes i'm in IE7. The phpMyAdmin site is functioning properly in the same browser I'm testing my code in.Thanks, Gal Quote Link to post Share on other sites
watagal 0 Posted April 12, 2008 Author Report Share Posted April 12, 2008 After experimenting for a while, I remembered that I knew the answer. A real DUH! sort of moment. IE7 supports :hover for non-anchor elements ONLY IN STRICT MODE.So, Gal, do you have a strict dtd?don't even know what that is? Quote Link to post Share on other sites
jeffman 86 Posted April 12, 2008 Report Share Posted April 12, 2008 don't even know what that is?HAH! Now we might get somewhere. You must always declare a doctype for modern browsers to render your pages correctly, and you especially need to have THIS one if you want to take advantage of everything IE7 has built into it.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Paste that line at the very very start of your document, just above the first <html> tag. Quote Link to post Share on other sites
watagal 0 Posted April 13, 2008 Author Report Share Posted April 13, 2008 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Great!! that fixed it. What relationship does this "strict.dtd" have w/CSS? I lost some of my CSS formatting ( table padding, font sizes shifted smaller, etc). Thanks a bunch. Quote Link to post Share on other sites
jeffman 86 Posted April 13, 2008 Report Share Posted April 13, 2008 For one thing, all numerical values except 0 must specify units, even pixels. So if you declare padding: 10; you will lose it because strict demands padding: 10px;More important, especially if you've been developing on IE (which we always recommend against), IE has traditionally used a different "box model" than the W3C specifications, which every other browser adheres to. The big difference is that if you declare a box (table, div, whatever) to be 100px wide, W3C says that margins and padding get added to that, and the resulting box may be bigger than 100px, but the content area stays 100px; IE has always subtracted from the declaration, so the absolute outside remains 100px, but the content area gets smaller. In strict mode, IE7 follows the W3C specification.So if you have stuff specified without units (almost always pixels or you would have specified), just add "px" and you'll be okay. But if you have defined boxes with margins and padding, you'll have to recalculate.Fortunately, this is the way of the future, not the past, so what you correct now, and get in the habit of doing, will remain the standard (presumably) for a long time to come.Anyway, we fixed your problem, and I am glad to have been of service, even if it does mean some things will have to be cleaned up as a result.Cheers! Quote Link to post Share on other sites
jeffman 86 Posted April 13, 2008 Report Share Posted April 13, 2008 And since it's an important thing that we say over and over, I'll post a separate entry on this for all newbies and returnees and lurkers:BEST PRACTICE says develop your pages and scripts etc. in the most W3C compliant browser there is. Then make adjustments, where you can, for the non-compliant browsers.As of today, that means your best bet is developing in the latest released (not beta) version of Firefox. Yes, we all know it's not the most common browser in use. But it follows the rules; that's the point.Once you have something working well in FF, check it in IE7. Usually, there is something extra you can do to make IE happy when things don't work right, though there are also well-documented differences in the way things must be done. Those can usually exist side-by-side without causing too much trouble.The worst possible thing you can do is develop in IE7 and unwittingly use attributes and methods that Microsoft invented only for IE7 and have nothing to do with the W3C specification. If your design relies on those IE7-onlys, it will fail in other browsers. Period.And before you get too smug and think, "Well, IE dominates the market; why shouldn't I use IE's special features?" be advised that MS has already announced that IE8 will attempt to be as compliant as possible and that IE's special features will eventually be history. Quote Link to post Share on other sites
jlhaslip 1 Posted April 13, 2008 Report Share Posted April 13, 2008 As of today, that means your best bet is developing in the latest released (not beta) version of Firefox.Or Opera, or Safari, or Konquerer, etc... NOT IE, even IE7 is not nearly compliant enough. IE8 is just in its first beta release, so it will likely change before becoming a Release Candidate and then Final Release version... Quote Link to post Share on other sites
watagal 0 Posted April 13, 2008 Author Report Share Posted April 13, 2008 Thanks all! I really appreciate the behind the scene info. I didn't have a clue about this aspect of developing a page. I will take your advice and begin testing via compliant browsers.Thanks again y 'pura vida'Gal Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.