www.webdeveloper.com
Results 1 to 8 of 8

Thread: Need CSS Guru set of eyes for IE7 issue

  1. #1
    Join Date
    Apr 2008
    Posts
    171

    Need CSS Guru set of eyes for IE7 issue

    I have a CSS drop down menu (with a small footprint of javascript to accommodate IE 7 and below). This menu works absolutely perfectly, as designed, in every browser except IE7. It's the suckerfish menu.

    What is perplexing and frustrating to me is that when I switch my IE8 browser to mode-IE7 in the developers tools of IE I cannot create this issue. The menu functions just fine. Yet when my client, who has a pure install of IE7, uses the menu bar on any page, it does not function as designed.

    Here's the apparent issue:

    * when he clicks on certain top level menu items and then begins hovering over menu items to reveal the drop down level menu, the level 2 items display properly while hovering (onMouseOver) but end up sliding up into the top level 1 menu bar (onMouseOut).

    Here's the website: http://wheatfield.ny.us/

    If anyone has a fix for this issue in IE7 I would greatly appreciate it.

    Thanks.
    Last edited by devel95; 09-16-2010 at 04:33 PM.

  2. #2
    Join Date
    Feb 2010
    Posts
    184
    Use the following styles will work:

    Code:
    /*  M E N U   B A R   S T Y L E S   v3.0 :) */
    #menu {
      background-color: #ddb813;
      clear: both;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-weight: bold;
      height: 26px;
      position: relative;
    }
    
    #menu ul {
      background-color: #ddb813;
      list-style: none;
      margin: 0 auto;
      padding: 5px 2px 5px 2px;
      width: 894px;
    }
    
    #menu li {
      float: left;
      margin: 0;
      margin-right: 4px;
    }
    
    #menu li ul {
      background-color: #ddb813;
      display: none;
      left: 0;
      position: absolute;
    }
    
    #menu a {
      display: block;
      margin: 0 0 0 0;
      position: relative;
    }
    
    #menu a:link, #menu a:visited {
      background-color: #ebd471;
      color: #333;
      padding: 1px 12px 1px 12px;
      text-decoration: none;
    }
    
    #menu a:hover, #menu a:active {
      background-color: #7391dc;
      color: #fff;
      padding: 1px 12px 1px 12px;
      text-decoration: none;
    }
    
    #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.iehover ul, #menu li li.iehover ul, #menu li li li.iehover ul {
      display: block;
    }
    
    #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.iehover ul ul, #menu li.iehover ul ul ul {
      display: none;
    }
    
    #menu li.iehover ul {
      display: block;
    }
    
    #clear_menus {
      clear: both;
    }
    Basically:
    1. left: -999em with display: none; and left: 0;
    2. left: auto with display: block; and left: 0
    3. added position: relative on #menu so submenu is shown correctly
    4. instead of declaring width multiple times just declare once.
    5. floated li and convert a to block

    I don't have time to look for more improvements.

  3. #3
    Join Date
    Apr 2008
    Posts
    171
    Hey "letmehaveago" !!

    You did what no one else on StackOverflow or Web Developer Forum could do -- you solved my IE7 issue. You're awesome and I thank you so very much.

    Quick question just from a "best practices" standpoint. Is there any rationale behind why you re-ordered my styles the way you did? I have always wondered what the best stacking order is within the curlies...{}

    Thanks again for helping me out.

  4. #4
    Join Date
    Feb 2010
    Posts
    184
    Actually it was random!

    Most of the time it shouldn't affect your layout but obviously one way is to just go in alphabetical order.

    Thanks for the praise. I am sure other people could but you would probably need to pay them

  5. #5
    Join Date
    Apr 2008
    Posts
    171
    letmehavago,

    I have another issue to solve with my css.

    If you logon to http://wheatfield.ny.us/ you will see a utility menu in the upper right corner side of the page with links "Site Search | Contact Us"

    Then if you logon to http://test.wheatfield.ny.us/ you will see the same links but in a styled fashion identical to the look and behavior of my menu navigation bar.

    I need to shorten the width of the utility menu block to result in a uniform border around the 2 list items (about 210-215 pixels in width) and I want it to sit on top of the header image and all the way to the right just as the "unstyled" links do in http://wheatfield.ny.us/

    Do you have time to look and send me suggested css modifications?

    Thank you "letmehavago" or any other contributors.

    P.S. I do not consider this an IE7 issue/request, merely a need for help with my css styling.

  6. #6
    Join Date
    Feb 2010
    Posts
    184
    I am not too sure of your requirements. From what I could see it looks like the list items are too far apart. If that is the issue I would suggest:

    Code:
    #header_contentBlock li { float: right }
    #header_contentBlock li a { display: block }
    In ie7 the top and bottom borders will be missing for no apparent reason but if you display: block it, it will reappear. When it does the positioning will be a little off so change the padding to 50px and should be consistent between ie8 and ie7.

    In retrospective, I suggest you place the new menu as the first child of #pageWrapper and use negative margins to shift it above the header image. Also you have created duplicate styles when it would have been better to change your style names. i.e. #menu to .menu.

  7. #7
    Join Date
    Apr 2008
    Posts
    171
    Thanks "letmehaveago". My issue was the gap between the list items and your css corrected. much appreciated.

  8. #8
    Join Date
    Apr 2008
    Posts
    171
    I have one minor issue remaining with my navigational menu -- then it is finished.

    If you look at http://wheatfield.ny.us/ the search box has a background image representing the submit button. I filled my css with a lot styles trying to format the search box (some styles my be overkill). I tested it in all current browsers (FF, Safari, Google, Opera, Lunascape 6, IE 7 and IE8). It renders consistently in each.

    The only thing I can't seem to correct is bumping the background image up 1 pixel to get it to position inside the search box more cleanly.

    Any ideas or recommendations?

    Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles