Jump to content

Highlight Table Row


Recommended Posts

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;}

Link to post
Share on other sites
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
Link to post
Share on other sites

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; }

Link to post
Share on other sites
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
Link to post
Share on other sites

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites
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
Link to post
Share on other sites
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?
Link to post
Share on other sites
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.

Link to post
Share on other sites
<!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.

Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites
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...
Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...