style not working in IE

WJ · Oct 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>

Neredbojias · Oct 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.

Andy Dingley · Oct 19, 2005

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,

WJ · Oct 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"?

Andy Dingley · Oct 19, 2005

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.

WJ · Oct 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!

Slideshow not working properly	2	Jan 7, 2023
Having trouble centering contents of td ?	3	May 2, 2023
Why is the e.target not working here?	1	Dec 29, 2022
Justify-content not working	1	Mar 29, 2021
Not sure why drop-down is not working.	2	Mar 24, 2024
Interfering CSS	1	Feb 9, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help making a zooming function	11	Dec 14, 2021

style not working in IE

WJ

Neredbojias

Andy Dingley

WJ

Andy Dingley

WJ

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads