SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover over bg images don't work on live site

    So, everything works fine when I look at the website with the html files on my computer, but when I put the site up live the hover over images for the nav don't work. I'm referring to the links "Home", "Areas of Practice" and the other ones that have the grey background image.

    http://bankruptcyimmigrationlaw.com/...TLAW/Home.html

    Any help would be appreciated because I don't even know what to look at to solve this problem since the hover over state works fine when the files are on my computer.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You should have this:

    Code CSS:
    #HomeNav li:first-child a:hover
    instead of:


    Code CSS:
    #HomeNav li:first-child:hover a
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I just tried that and it didn't change the result?

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

    The nav seems to be working in all browsers apart from ie8 and below.

    You are using an awkward structure though and I'm not sure why you are using first-child when the element is the only child anyway and thus cutting out older browsers.

    It would also be better to change the background-position of a sprite rather than load a new image on hover as there is an ugly delay when you first hover the item. If you use the sprite approach there is no delay.

    I would also avoid changing the size of the element on hover as that interrupts the flow and makes all the element jump. Try never to change an objects size on hover where it affects others in the flow.

    A list with only one item is not really a list and if you have sub menus then a nested list would be better.


Tags for this Thread

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
  •