SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu images not lining up with rollover images

    Hi all,

    I have posted my test site here:

    http://www.excellenceofexecution.com/preview

    The problem I'm currently experiencing is in relation to my menu at the top left. In both IE6 and FF on my PC, the normal/active menu items are about 3px below the rollovers. When you hover, the white images fade out to show the gold/yellow colored rollover images that are behind it...however something is throwing the alignment off.

    Any suggestions? I "think" I'm close but I could be way off!

    Cheers

  2. #2
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well earlier on I fixed it using a method different than what I did now...and it worked. However, I hit undo a few times and messed up whatever I did and can't remember how I did it.

    I changed my background images in the styles to this:

    .nav ul li.work {background:url(../images/nav/work_over.gif) no-repeat 0 3px;}
    .nav ul li.about {background:url(../images/nav/about_over.gif) no-repeat 0 3px;}
    .nav ul li.contact {background:url(../images/nav/contact_over.gif) no-repeat 0 3px;}

    I don't know if this is the most logical solution or not though?
    Last edited by JoeSomebody; Jul 26, 2008 at 13:15.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would try adding "float:left" to your list items, give them specific dimensions (width and height), then use "display:block" on the "a" tags inside them, and maybe add line-height to the links. You could also just try line-height first to see if that works, then do the float thing.

    Louis

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go with this method: http://www.pmob.co.uk/temp/navimagereplace.htm

    a) it works
    b) as it uses a background image replacement technique, the text of the links is still there in the page (but hidden), so it's more accessible


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
  •