Re: HTML Table Query

#1

On Aug 22, 11:12*am, Kevin <kejos... (AT) hotmail (DOT) com> wrote:

Quote:

Hi,

I am trying to create a table that will highlight the row (and if
possible even column) when I mouse over it. An example is shown in the
IBM link below (Table 1). Can anyone point me in the right direction ?
Looking at the source I think its a css class file but I dont know
what to check for next as the html file has soooo many css files
included !

[X-posted and follow-ups to CIWAS]

Since this is a CSS issue, this is better discussed in CIWAS.

A simple way to do this with CSS is to add to your style sheet a
declaration of :

tr:hover
{
background: #dadada;
color: #000000
}

(change colors to suit)

If necessary, add a class if you want this behavior on only some table
rows.

This works in Firefox and in IE version 8, but not for earlier version
of IE.

Because of poor support in older browsers, either ensure that this is
not required behavior for the page to work.

Nick

--
Nick Theodorakis
nick_theodorakis (AT) hotmail (DOT) com
contact form:
http://theodorakis.net/contact.html

#2

Quote:

Because of poor support in older browsers, either ensure that this (tr.hover) is
not required behavior for the page to work.

This would work in IE6, no? ...using links with no href

<html>
<head>
<style>
a { color: blue; text-decoration: none; }
a:hover {background: #660000; color: white; text-decoration:
underline; }
</style>
</head>
<body>
<table border="2">
<tr> <td> <a> aaaa </a></td> <td> <a> bbbb </a></td> </tr>
<tr> <td> <a> cccc </a></td> <td> <a> dddd </a></td> </tr>
</table>
</body>

#3

salmobytes wrote:

Quote:

Because of poor support in older browsers, either ensure that this (tr.hover) is
not required behavior for the page to work.

This would work in IE6, no? ...using links with no href

html
head
style
a { color: blue; text-decoration: none; }
a:hover {background: #660000; color: white; text-decoration:
underline; }
/style
/head
body
table border="2"
tr> <td> <a> aaaa </a></td> <td> <a> bbbb </a></td> </tr
tr> <td> <a> cccc </a></td> <td> <a> dddd </a></td> </tr
/table
/body

And you think this will fix IE6's problem? Bet you did not test your own
code. IE 6 doesn't support the :hover pseudo class on A elements
*unless* they have an "href" property.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#4

Jonathan N. Little wrote:

Quote:

salmobytes wrote:
Because of poor support in older browsers, either ensure that this
(tr.hover) is
not required behavior for the page to work.

This would work in IE6, no? ...using links with no href

html
head
style
a { color: blue; text-decoration: none; }
a:hover {background: #660000; color: white; text-decoration:
underline; }
/style
/head
body
table border="2"
tr> <td> <a> aaaa </a></td> <td> <a> bbbb </a></td> </tr
tr> <td> <a> cccc </a></td> <td> <a> dddd </a></td> </tr
/table
/body

And you think this will fix IE6's problem? Bet you did not test your own
code. IE 6 doesn't support the :hover pseudo class on A elements
*unless* they have an "href" property.

If you can live with javascript Dean's IE fix will take care of that

transparently.

For that matter you could use :hover on the td.

add this:

<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>

If you are writing pages that are not usable with CSS off, you may
wish to rethink your approach.

I wish IE6 would die so I could get it off my machine.

Jeff

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: HTML Table Query

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Re: HTML Table Query - 08-22-2009 , 04:33 PM

Re: HTML Table Query - 08-24-2009 , 03:46 PM

Re: HTML Table Query - 08-24-2009 , 04:01 PM

Re: HTML Table Query - 08-24-2009 , 08:37 PM