SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS dropdown menu issue in IE7

    HELP!
    I have a css dropdown menu that works perfectly in every browser execpt IE7.

    http://www.joomlatemplates.litchfieldmorris.co.uk

    If you hover over the TYPOGRAPHY menu option in IE7 it displays the submenu but enlarges the parent item.

    How can I fix this?

    Thanks

    Lee

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

    In the IE7 stylesheet you have set the dropdown ul to be position:relative and it needs to be position:absolute. You need to remove the IE7 styles completely and use these:

    Code:
    #menu ul li ul {
    		position:absolute;
    		left:10px;
    		top:35px;
    		background:url(fake.gif);/* IE7 needs this or it won;t move over the gaps in the menu */
    }
    #menu ul li{position:relative}
    #menu ul li ul li {width:200px}
    #menu ul li:hover > ul {display: block;}
    However, I would not usually use the display:none method of hiding menus as it is not very accessible. The best way is to move the menu offscreen and then just bring it on screen when hovered.

    e.g.
    Code:
    #menu ul li ul{margin-left:-999em}
    #menu ul li:hover ul{margin-left:0}
    You don't really need all those rules in the IE7 stylesheet either as you could instead use them for all browsers but that would require a few changes to the exisitng code and I was short of time

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks for the help.

    I'm interested in your last comment that I do not need all the IE7 css code. WOuld you be kind enough to expandon what you mean.

    Thanks again for your help.

    Regards

    Lee

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I was just saying that you could use the same method for all browsers and hence the rules could be in the main stylesheet.

    However Ie7 needs the fake background image and the width so probably best to leave it where it is for now especially as it seems to be working now.


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
  •