Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > style not working in IE

Reply
Thread Tools

style not working in IE

 
 
WJ
Guest
Posts: n/a
 
      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">&nbsp;</td>
</tr>
</table>

</body>
</html>


 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      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">&nbsp;</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.
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      10-19-2005
On Tue, 18 Oct 2005 21:50:41 -0700, "WJ" <(E-Mail Removed)> 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.
 
Reply With Quote
 
WJ
Guest
Posts: n/a
 
      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
curserointer 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"?



 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      10-19-2005
On Wed, 19 Oct 2005 07:13:35 -0700, "WJ" <(E-Mail Removed)> 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.
 
Reply With Quote
 
WJ
Guest
Posts: n/a
 
      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!



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments