SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird mouseover CSS issue

    Hello.
    On my site: http://www.eye-floaters.com. On the left is a navigational div tag that specifies when the mouse moves over this tag the background colour changes. This works fine, however when the colour changes the voting poll underneath moves down a few pixels (and continues to move down as one moves the mouse over the div tag!).

    It works fine in Opera, but not at all in IE. I'm absolutely stumped here folks, no idea what the issue is!

    Can anyone please help?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry but it looks like a javascript problem which is not my area. If you take this line out:

    <script language="JavaScript" type="text/javascript" src="<A href="http://www.eye-floaters.com/code/changeimage.js"></script">http://www.eye-floaters.com/code/changeimage.js"></script>

    Then the page is fine.So you need to look into the js routines and see whats going on.

    Paul

  3. #3
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird.
    But the mousover works fine everywhere else where there isn't a poll, and if I take out the script lines then it wont work at all.
    I'll have another look at the scripts and see, just in case.

  4. #4
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, ive changed the script into CSS instead:
    Code:
    onmouseover="this.className='lhconttableover'" onmouseout="this.className='lhcont
    And the same thing!

    It must be the whole left column code, for which the initial DIV tag is set as:
    Code:
    <DIV id="lhcol">
    But if I change the id to class, it goes haywire...might that be the cause?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Wow - That took some finding - I must be losing my touch

    IE is loosing the height of the nested ul and is reapplying the top and bottom padding each time which is causing the movement of the element belows. If you take out the padding from the list elements the menu becomes stable but obviously tou want the padding in there.

    However the usual fix seems to work so add this code to the end of your stylesheet and it should cure the problem.
    Code:
    /* commented backslash mac hiding hack \*/ 
    .lhconttableover LI,.lhcont LI {height:1%;} 
    /* end hack */
    Copy all that code exactly and don't leave the asterisks out.

    Paul

    BTW your list is incorrectly constructed: Sublists should be like this:
    <ul>
    <li>
    <ul>
    <li></li>
    </ul>
    </li>
    </ul>

  6. #6
    SitePoint Addict Bravogolf's Avatar
    Join Date
    Aug 2004
    Location
    All over really :)
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Super.
    I actually fixed it by replacing the cell padding just before you post, but I only did by luck, just messing around with the code.
    Your suggestion is tidier, and i'll fix my tags right away.
    Cheers


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
  •