Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: IE and Hover

  1. #1
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    IE and Hover

    I have a table (tabulated data!) in which I change the background colour of the current row using Javascript onmouseover.

    I want to achieve the same results using just CSS (to avoid the IE security warning.)

    This works in Firefox, but not in IE.

    <pre><style type="text/css">
    tr.item
    {
    background-color: #ccccff;
    }
    tr.item:hover
    {
    background-color: #99ff99;
    }
    </style>
    </pre>


    Is there some workaround that makes this work in IE?

    Interestingly it does not work in Firefox if I change tr.item:hover to just .item:hover
    Regards
    John



  2. #2
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: IE and Hover

    I have found this at http://lawrence.ecorp.net/inet/sampl...ie-hover.shtml
    <pre><style type="text/css">
    tr.item
    {
    background-color: #ccccff;
    m: expression(this.onmouseover = new Function("this.className = 'item-hover';"));
    }
    tr.item-hover
    {
    background-color: #ffff99;
    m: expression(this.onmouseout = new Function("this.className = 'item';"));
    }
    tr.item:hover
    {
    background-color: #ffff99;
    }
    </style>
    </pre>


    This works, but I am still getting the security message. But the hover effect still works, even if I ignore the security message.
    But the page I got it from does not generate a security warning, so there must be something else that is causing it. I have eliminated everything else that is 'active' but the warning will not go away.
    Regards
    John



  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    Hi John

    I see you are stuck between a rock and a hard place. I am not sure how much tabular data you have ( lots or a few rows) but I have seen people be quite innovative with their code and use <ul> and[*] in asp pages so they can get the hover available using inline ...would that be feasible? <img src=/S/shrug.gif border=0 alt=shrug width=39 height=15>
    Jerry

  4. #4
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    Just thought I would add this as an example...
    Jerry

  5. #5
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: IE and Hover

    Thanks Jezza

    I am actually writing the HTML from within Access using VBA. The data represent Catalogues for Auctions, and there could easily be one thousand rows, with each lot on a separate row. There are four or five columns in the table. For some lots, the second column will have a thumbnail image, which will be a hyperlink.
    Attached Images Attached Images
    Regards
    John



  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    OK

    Something to play with, lets get Access to add a div tag and we can create a style rule

    <style>

    .antique{
    background-color: #CCCCCC;
    width: 100%;
    }
    .antique a:hover{
    background-color: #FFFFCC;
    width: 100%;
    padding-right: 100%;}

    </style>

    <body>
    ...
    <tr class="antique">
    <td>Chair and Desk</td>
    <td>$2000</td>
    </tr>

    </body>


    Using the subtlety of the a tag and utilising padding...not perfect but something to work on, works well in Firefox (of course) but no warning in IE
    Jerry

  7. #7
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: IE and Hover

    Thanks Jezza

    Let's see if I have this right. You are suggesting I

    1 Put in dummy href tags that point nowhere so I can use a:hover effects. (This is OK if I add cursor:default to the style )
    2 I use padding to extend the background colour of the a to extend beyond the text.
    3 I am not sure what the DIV tag is for. I have put one around the whole table, (but I don't see what it achieves)

    In Firefox I see this, but in IE it does not work at all.(Next post)
    Attached Images Attached Images
    Regards
    John



  8. #8
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: IE and Hover

    Here is what happens in IE. The table increases in width when the mouse is over the Description field, so the table jumps around.
    The changed background does extned over the estimate at all.
    Attached Images Attached Images
    Regards
    John



  9. #9
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: IE and Hover

    <P ID="edit" class=small>(Edited by jscher2000 on 29-Jan-07 15:10. )</P>
    <hr>Interestingly it does not work in Firefox if I change <code>tr.item:hover</code> to just <code>.item:hover</code><hr>
    There is a technical reason for that, related to the degree of "specificity" of the various CSS rules applied to that element. I don't pretend to understand the complexities, but as a rule of thumb, your :hover should apply to the same selector as your non-hovered rule.

    The "script in CSS" approach is new to me. I agree that this might be a security concern and might be disabled by Microsoft in the future, as it is non-standard. Perhaps you will have to add mouseover and mouseout event code to your table. (I will post a sample later, time permitting.)

    Added link to sample: http://jscher2000.home.att.net/webdev/glow_table.html

  10. #10
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    Yes, sorry John, it was an experiment, not a perfect one. I have a feeling looking at your example it would take a lot of engineering. It is the photo that it padding it out <img src=/S/sad.gif border=0 alt=sad width=15 height=15>. We would have to make the <tr> and <td> fixed but then control the string length, <img src=/S/dizzy.gif border=0 alt=dizzy width=15 height=15>....lots of work for a bell an whistle <img src=/S/sad.gif border=0 alt=sad width=15 height=15>
    Jerry

  11. #11
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    Jeff

    I am using an old laptop at the moment and having problems with IE.....Looking at your code this should still cause a security message in IE surely?
    Jerry

  12. #12
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: IE and Hover

    If IE is set to object to JavaScript, then it will object to my example.

    I just re-read the original post and the goal was to completely avoid JavaScript, so I guess my example is beside the point...

  13. #13
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: IE and Hover

    Thanks both for your trouble.

    I have just realised that IE throws up Security Warnings when I open local files , but it does not when I use http://localhost/etc .

    So the Javascript method I have been using for quite a while now actually works Ok after all.

    My IE security settings are all the defaults. When I installed it, I followed some advice on tightening security, and then nothing worked at all. So I set it back to the default again, and have not gone back to tighten it again.
    Regards
    John



  14. #14
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: IE and Hover

    Of course I haven't seen your actual code, but I think it is a good idea to maximize the use of CSS and minimize the necessary evil of JavaScript by attaching the events only in Internet Explorer as in my example.

  15. #15
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: IE and Hover

    I am just tagging this onto the end of this thread as it is a fantastic resource from a great CSS site

    The Table Ruler from A List Apart
    Jerry

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •