style not working in IE

Discussion in 'HTML' started by WJ, Oct 19, 2005.

  1. WJ

    WJ Guest

    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>
     
    WJ, Oct 19, 2005
    #1
    1. Advertising

  2. WJ

    Neredbojias Guest

    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.
     
    Neredbojias, Oct 19, 2005
    #2
    1. Advertising

  3. WJ

    Andy Dingley Guest

    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.
     
    Andy Dingley, Oct 19, 2005
    #3
  4. WJ

    WJ Guest

    Awesome, thanks!

    I was using the bold to just see if obviously change.
    The style I want is text-decoration:underline and
    curser:pointer 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"?
     
    WJ, Oct 19, 2005
    #4
  5. WJ

    Andy Dingley Guest

    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.
     
    Andy Dingley, Oct 19, 2005
    #5
  6. WJ

    WJ Guest


    > 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!
     
    WJ, Oct 20, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob Nicholson
    Replies:
    3
    Views:
    839
    Rob Nicholson
    May 28, 2005
  2. Replies:
    1
    Views:
    814
    Bertilo Wennergren
    Nov 24, 2003
  3. Rolf Kemper
    Replies:
    0
    Views:
    392
    Rolf Kemper
    Oct 15, 2004
  4. Ken Varn
    Replies:
    0
    Views:
    531
    Ken Varn
    Apr 26, 2004
  5. Nik Coughlin
    Replies:
    2
    Views:
    197
    Nik Coughlin
    Jan 23, 2008
Loading...

Share This Page