Professional Web Applications Themes

CSS hover property problem - Macromedia Dreamweaver

I am using the style below for my menu table. For some reason, when you hover over the top row of the table, the background color change works as expected, but it does NOT work on any of the other rows in the table unless you hover directly over the text in the table row. On the top row, you can hover anywhere in the row for the effect to show. Style below, URL is http://www.emmtek.com/tiedmann/index2.htm I would appreciate any and all tips! Thanks in advance... #menutable { width: 125px; font-size: 12px; /*/*/font-size: 85%; /* */ } #menutable a { ...

  1. #1

    Default CSS hover property problem

    I am using the style below for my menu table. For some reason, when you
    hover over the top row of the table, the background color change works as
    expected, but it does NOT work on any of the other rows in the table unless
    you hover directly over the text in the table row. On the top row, you can
    hover anywhere in the row for the effect to show. Style below, URL is
    http://www.emmtek.com/tiedmann/index2.htm I would appreciate any and all
    tips! Thanks in advance...

    #menutable {
    width: 125px;
    font-size: 12px; /*/*/font-size: 85%; /* */
    }

    #menutable a {
    /*/*/padding: 3px;
    display: block;
    text-decoration: none;
    line-height: 1.5em;
    /* */
    }

    #menutable a:link, a:visited {
    color: #FFFFFF;
    }

    #menutable a:hover, a:active {
    color: #000000;
    background-color: #FFFFFF;
    }
    ===============
    Marion Jacobson
    EMMtek, Inc.
    www.emmtek.com


    Marion Guest

  2. #2

    Default Re: CSS hover property problem

    Marion:

    Curious indeed. I set up the following test table -

    <table width="350" border="0" cellpadding="0" cellspacing="0"
    id="menutable">
    <tr>
    <td><a href="javascript:;">Link1</a></td>
    <td><a href="javascript:;">Link2</a></td>
    </tr>
    <tr>
    <td><a href="javascript: void(0)">Link3</a></td>
    <td><a href="javascript: void(0)">Link4</a></td>
    </tr>
    </table>

    and I see your issue on any EXCEPT the first cell which works as expected,
    while link2, 3 and 4 must be hovered over the text to change. Hmmmm....

    --
    Murray --- ICQ 71997575
    Team Macromedia Volunteer for Dreamweaver MX
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
    ANSWERS
    ==================
    http://www.dreamweavermx-templates.com - Template Triage!
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.DreamweaverFAQ.com - DW FAQs, Tutorials & Resources
    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
    ==================

    "Marion J" <net> wrote in message
    news:bg65i0$2n7$macromedia.com... 
    unless 


    Murray Guest

  3. #3

    Default Re: CSS hover property problem

    thank you for checking... since it happened to you I don't feel so bad! I
    think it's very strange. I should post at PVII and see if they know why it's
    doing this. I learned the menutable CSS stuff from their tutorials.

    MarionJ


    Marion Guest

  4. #4

    Default Re: CSS hover property problem

    In article <bg65i0$2n7$macromedia.com>,
    "Marion J" <net> wrote:
     

    I presume you were testing in IE/Win, since my copies of IE5/Mac,
    Netscape 7.1, and Mozilla both triggered hovering through the whole
    cell, not just over the link text. IE/Win requires a 'width' value on
    block-level links in order to make hovering work through the cell, even
    though it shouldn't (a bug in IE, what were the odds?).
    Since you have padding on your links, the situation will
    unfortunately be more complicated than you might like. If you know the
    exact pixel width of the cells, subtract your padding from that and fill
    that in for the 'width', making sure your doent kicks IE/Win into
    standards mode. If not, you may have to use some hacks to show IE the
    information it expects, while showing other browsers the correct
    information.

    --
    Eric A. Meyer (com) http://www.meyerweb.com/eric/
    Author, "Cascading Style Sheets: The Definitive Guide,"
    "Eric Meyer on CSS," "CSS 2.0 Programmer's Reference," and more
    http://www.meyerweb.com/eric/books/
    Eric Guest

  5. #5

    Default Re: CSS hover property problem

    On Tue, 29 Jul 2003 12:09:22 -0400, "Murray *TMM*"
    <com> wrote:
     

    What browser? It works as expected for me in IE6 and Mozilla. Of
    course, the posted styles don't include any background color for
    anything except the a:hover, a:active. I added a background color to
    the #menutable:

    #menutable {
    background-color: #ccc;
    width: 125px;
    font-size: 12px; /*/*/font-size: 85%; /* */
    }

    That said, I have, from time to time, had problems when combining
    styles for an id. I cannot show a reproducible case and can't remember
    which browser(s) gave me the problem. You might try separating the
    a:link, a:visited, a:hover, and a:active into individual styles.


    Gary
    Gary Guest

  6. #6

    Default Re: CSS hover property problem


    : Of course, the posted styles don't include any background color for
    : anything except the a:hover, a:active. I added a background color to
    : the #menutable:

    I didn't declare a background color because each table row has a different
    background color. And I am viewing in IE6. But I'll play with it a little
    more to see if I can fix it. Thanks so much for looking at this.

    MarionJ


    Marion Guest

  7. #7

    Default Re: CSS hover property problem

    : I presume you were testing in IE/Win, since my copies of IE5/Mac,
    : Netscape 7.1, and Mozilla both triggered hovering through the whole
    : cell, not just over the link text. IE/Win requires a 'width' value on
    : block-level links in order to make hovering work through the cell, even
    : though it shouldn't (a bug in IE, what were the odds?).

    Testing in IE 6/Win. The 'width' value goes on the link? Like this?

    #menutable a {
    /*/*/padding: 3px;
    width: 119px;
    display: block;
    text-decoration: none;
    line-height: 1.5em;
    /* */
    }

    Thanks for looking at this for me!
    MarionJ


    Marion Guest

  8. #8

    Default Re: CSS hover property problem

    Marion J wrote:
     
    <table width="120" border="0" cellpadding="0" cellspacing="0"
    id="menutable">

    120?

    Id also make sure the table is either 125 as in your styles or 120 as
    your inline declaration shows.

    osgood Guest

  9. #9

    Default Re: CSS hover property problem

    On Tue, 29 Jul 2003 11:46:02 -0500, "Marion J"
    <net> wrote:
     

    How are you assigning that background color to the rows?


    Gary
    Gary Guest

  10. #10

    Default Re: CSS hover property problem

    : Id also make sure the table is either 125 as in your styles or 120 as
    : your inline declaration shows.

    Right. Thanks for catching that. I made everything 125 pixels, including the
    width on the link, and the hover behavior seems to be working perfectly well
    now.

    Thanks everyone!

    MarionJ


    Marion Guest

  11. #11

    Default Re: CSS hover property problem

    : How are you assigning that background color to the rows?

    In the HTML on the page. Not in the CSS.

    <table width="125" border="0" cellpadding="0" cellspacing="0"
    id="menutable">
    <tr>
    <td bgcolor="#996633"><a href="index.htm">Home</a></td>
    </tr>
    <tr>
    <td bgcolor="#806f4d"><a href="about.htm">About Us</a></td>
    </tr>
    <tr>
    <td bgcolor="#667766"><a href="new.htm">New Construction</a></td>
    </tr>

    etc.


    Marion Guest

  12. #12

    Default Re: CSS hover property problem

    > Testing in IE 6/Win. The 'width' value goes on the link? Like this?

    That's right, Marion! 119px on the a :)

    --
    --
    DiMa
    --------------------
    WEB FORUM USERS: Please log on to the Newsgroup for quicker replies to your
    posts:
    news://forums.macromedia.com/macromedia.dreamweaver
    For Answers, check here first:
    http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver
    http://www.macromedia.com/support/dreamweaver/technotes.html
    http://www.projectseven.com/faqbase
    http://www.dreamweaverFAQ.com

    http://www.macromedia.com/support/forums/etiquette.htm
    DiMa Design > From Lines...to Designs
    http://www.dimadesign.net



    DiMa Guest

  13. #13

    Default Re: CSS hover property problem

    On Tue, 29 Jul 2003 12:50:19 -0500, "Marion J"
    <net> wrote:
     

    That could be the problem. Try creating classes for the colors and
    assign them that way instead of the bgcolor attribute:

    ..one {background-color: #996633}
    ..two {background-color: #906f4d}
    ..three {background-color: #667766}



    <table width="125" border="0" cellpadding="0" cellspacing="0"
    id="menutable">
    <tr>
    <td class="one"><a href="index.htm">Home</a></td>
    </tr>
    <tr>
    <td class="two"><a href="about.htm">About Us</a></td>
    </tr>
    <tr>
    <td class="three"><a href="new.htm">New Construction</a></td>
    </tr>



    Gary
    Gary Guest

  14. #14

    Default Re: CSS hover property problem

    Actually, there are several fixes, width being one. Simply placing an image
    (even a spacer) in a paragraph or DIV just above the links will also fix IE5
    and 6 on Windows.

    --
    Al Sparber - PVII
    http://www.projectseven.com
    Dreamweaver Extensions - DesignPacks - Tutorials - Books
    ---------------------------------------------------------------------
    The PVII Newsgroup | news://forums.projectseven.com/pviiwebdev
    The CSS Newsgroup | news://forums.projectseven.com/css
    ---------------------------------------------------------------------



    "Eric A. Meyer" <com> wrote in message
    news:macromedia.com... [/ref]
    as [/ref]
    unless 
    >
    > I presume you were testing in IE/Win, since my copies of IE5/Mac,
    > Netscape 7.1, and Mozilla both triggered hovering through the whole
    > cell, not just over the link text. IE/Win requires a 'width' value on
    > block-level links in order to make hovering work through the cell, even
    > though it shouldn't (a bug in IE, what were the odds?).
    > Since you have padding on your links, the situation will
    > unfortunately be more complicated than you might like. If you know the
    > exact pixel width of the cells, subtract your padding from that and fill
    > that in for the 'width', making sure your doent kicks IE/Win into
    > standards mode. If not, you may have to use some hacks to show IE the
    > information it expects, while showing other browsers the correct
    > information.
    >
    > --
    > Eric A. Meyer (com) http://www.meyerweb.com/eric/
    > Author, "Cascading Style Sheets: The Definitive Guide,"
    > "Eric Meyer on CSS," "CSS 2.0 Programmer's Reference," and more
    > http://www.meyerweb.com/eric/books/[/ref]


    Al Guest

  15. #15

    Default Re: CSS hover property problem

    In article <bg7k08$eos$macromedia.com>,
    "Al Sparber- PVII" <com> wrote:
     

    Cool! I learned something new today. Thanks, Al.

    --
    Eric A. Meyer
    http://www.meyerweb.com/eric/
    Eric Guest

  16. #16

    Default Re: CSS hover property problem




    "Eric A. Meyer" <com> wrote in message
    news:macromedia.com... [/ref]
    image [/ref]
    IE5 
    >
    > Cool! I learned something new today. Thanks, Al.[/ref]

    Now if I only knew why it worked ;-)


    Al Guest

Similar Threads

  1. Dirty property value persist problem
    By yp.yean@gmail.com in forum ASP.NET Building Controls
    Replies: 3
    Last Post: August 26th, 07:42 AM
  2. IE css hover problem, image sticks
    By vigothe6th in forum Macromedia Dynamic HTML
    Replies: 0
    Last Post: July 12th, 03:56 PM
  3. Problem with Custom Web Control Property
    By Dexter in forum ASP.NET Building Controls
    Replies: 1
    Last Post: November 30th, 05:57 PM
  4. Problem with Property values in HTML tag
    By Ed Swartz in forum ASP.NET Building Controls
    Replies: 1
    Last Post: May 17th, 02:57 PM
  5. Server Control Property Problem
    By Joe in forum ASP.NET Building Controls
    Replies: 1
    Last Post: November 6th, 06:09 AM

Bookmarks

Posting Permissions

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139