style not working in IE

10-19-2005

This sample works in Firefox, but not in IE 6.x. I can't figure out the
problem.
Any input would be appreciated. On the hover, I expect the text to turn red
and the weight to turn bold.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Test</title>

<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<style type="text/css">

..labelcell {
color : Black;
background-color : #e2f1b6;
font-family : Verdana, Arial, Helvetica, Sans-serif;
font-size : 10px;
font-weight : normal;
line-height : 15px;
text-align : center;
border-right: #afc863 1px solid;
padding-right: 2px;
border-top: #74a403 1px solid;
padding-top: 2px;
border-left: #afc863 1px solid;
padding-left: 2px;
border-bottom: #74a403 1px solid;
padding-bottom: 2px;
}

..linkcell a:visited {
FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none
}

..linkcell a:hover {
FONT-WEIGHT: bold; COLOR: #FF0000; TEXT-DECORATION: underline
}
</style>

</head>
<body>

<table border="0" cellspacing="2" cellpadding="0" width="780"
align="center">
<tr>
<td class="labelcell">
<span class="linkcell"><a
onclick="javascript:getDetail(1)">View</a></span>

</td>
<td colspan="4" class="list_link_filler"> </td>
</tr>
</table>

</body>
</html>

10-19-2005

With neither quill nor qualm, WJ quothed:

> This sample works in Firefox, but not in IE 6.x. I can't figure out the
> problem.
> Any input would be appreciated. On the hover, I expect the text to turn red
> and the weight to turn bold.
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
>
> <html>
> <head>
> <title>Test</title>
>
>
> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
>
> <style type="text/css">
>
> .labelcell {
> color : Black;
> background-color : #e2f1b6;
> font-family : Verdana, Arial, Helvetica, Sans-serif;
> font-size : 10px;
> font-weight : normal;
> line-height : 15px;
> text-align : center;
> border-right: #afc863 1px solid;
> padding-right: 2px;
> border-top: #74a403 1px solid;
> padding-top: 2px;
> border-left: #afc863 1px solid;
> padding-left: 2px;
> border-bottom: #74a403 1px solid;
> padding-bottom: 2px;
> }
>
> .linkcell a:visited {
> FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none
> }
>
> .linkcell a:hover {
> FONT-WEIGHT: bold; COLOR: #FF0000; TEXT-DECORATION: underline
> }
> </style>
>
>
> </head>
> <body>
>
>
> <table border="0" cellspacing="2" cellpadding="0" width="780"
> align="center">
> <tr>
> <td class="labelcell">
> <span class="linkcell"><a
> onclick="javascript:getDetail(1)">View</a></span>
>
>
>
> </td>
> <td colspan="4" class="list_link_filler"> </td>
> </tr>
> </table>
>
> </body>
> </html>

IE does hover only on links so put a class on them.

--
Neredbojias
Contrary to popular belief, it is believable.

10-19-2005

On Tue, 18 Oct 2005 21:50:41 -0700, "WJ" <> wrote:

>This sample works in Firefox, but not in IE 6.x.

Try this

<span class="linkcell"><a href="#"
onclick="getDetail(1); return false;" >View</a></span>

IE only supports :hover on links, and "link" means an <a> with a href
attribute, not just a <a>.

The href added here is a dummy and because the onclick event returns
false it won't be activated, even if clicked.

You don't need the "javascript:" pseudo-protocol, because this is an
even handler attribute, not a url.

I advise against using bold in a hover CSS rule, because it makes the
link text wider and causes the text to re-flow. It's often a jerky page,

--
Cats have nine lives, which is why they rarely post to Usenet.

10-19-2005

Awesome, thanks!

I was using the bold to just see if obviously change.
The style I want is text-decoration:underline and
curser

ointer on the hover.

I was trying to avoid the href="#" because this is
in a search result page, which can sometimes be
longer than the browser window.

When I click on that after scrolling, the page "jumps"
to the top just before executing the javascript.

It works fine, just a little annoying to look at. Do you
know a way to implement this and prevent that "page jump"?

10-19-2005

On Wed, 19 Oct 2005 07:13:35 -0700, "WJ" <> wrote:

>It works fine, just a little annoying to look at. Do you
>know a way to implement this and prevent that "page jump"?

I told you already - return false from the onclick handler. That stops
further processing of the click event, including using the href for
navigation.

10-20-2005

> I told you already - return false from the onclick handler. That stops
> further processing of the click event, including using the href for
> navigation.

Got it! Sorry, that took two readings.

Thanks for your help!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IE - can get actual CSS style, not computed style?	Nik Coughlin	Javascript	2	01-23-2008 01:26 AM
All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer	Rob Nicholson	ASP .Net	3	05-28-2005 03:11 PM
To style or not to style ? (was erroneously reported to comp.text before, no answer yet)	Rolf Kemper	XML	0	10-15-2004 04:53 AM
Need help with Style conversion from Style object to Style key/value collection.	Ken Varn	ASP .Net Building Controls	0	04-26-2004 07:06 PM
Style sheets, include one style within another (not inheritance)	foldface@yahoo.co.uk	HTML	1	11-24-2003 01:37 PM