SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Rocket Scientist
    Join Date
    Jun 2003
    Location
    Manchester, UK
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE7 CSS Menu Problems

    I've re-coded my CSS files a little to make the site work with IE7 - I've managed to do this OK so far, apart from the CSS dropdown menu.

    Site in question : http://www.pcreview.co.uk/

    The menu works fine in IE6/FF, however in IE7 it only works if I haven't clicked anywhere on the page already. If I have, the menu sticks and won't hide away once my mouse is moved away.

    Is this something wrong with my code, or a bug in IE7?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Despite having 116 XHTML validation errors, it's working fine for me on Internet Explorer 7 RC1 (Windows XP Pro, Service Pack 2).

  3. #3
    Rocket Scientist
    Join Date
    Jun 2003
    Location
    Manchester, UK
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan, I think I've just put a fix in place for the suckerfish CSS menu by adding:

    LI:hover UL {
    DISPLAY: block
    }
    LI.over UL {
    DISPLAY: block
    }

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using display: none; and display: block; can cause accessibility issues with some screen readers. Absolute positioning would be better.

    Here's an example of an accessible horizontal dropdown menu:
    HTML Code:
      <ul id="menu">
      	<li><a href="">Main Menu Item</a></li>
      	<li><a href="">Main Menu Item</a></li>
      	<li><a href="">Main Menu Item</a>
      		<ul>
     			<li><a href="">First Sub-Menu Item</a>
      				<ul>
     		 		<li><a href="">Second Sub-Menu Item</a></li>
     		 		<li><a href="">Second Sub-Menu Item</a></li>
     		 		<li><a href="">Second Sub-Menu Item</a></li>
      				</ul>
      			</li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
      		</ul>
      	</li>
      	<li><a href="">Main Menu Item</a>
      		<ul>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
      		</ul>
      	</li>
      	<li><a href="">Main Menu Item</a>
      		<ul>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
     			<li><a href="">First Sub-Menu Item</a></li>
      		</ul>
      	</li>
      	<li><a href="">Main Menu Item</a></li>
      </ul>
    And the CSS for it (note: this uses the universal selector to strip nearly all selectors of their margins and padding, and was culled from my CSS tutorial, still a WIP):
    Code:
      * {
      	margin: 0;
      	padding: 0;
      }
      
      #menu, #menu ul {
      	list-style: none;
      }
      	#menu li {
      		background-color: #909090;
      		color: inherit;
      		display: inline;
      		float: left;
      		position: relative;
      		width: 8em;
      	}
      
      	#menu li:hover {
      		background-color: #666;
      		color: inherit;
      	}
      
      	#menu li:hover ul, #menu li.menuHover ul {
      		left: auto;
      	}
      		#menu ul {
     			min-height: 1%; /* this is a fix for IE7's "hasLayout issue" which will allow the dropdowns to work. This declaration is not affected by any other modern browser. */
      			position: absolute;
      			left: -999em;
      		}
      			#menu ul li {
      				clear: left;
      				margin-top: -1px;
      				width: 9em;
      			}
      
     				#menu li:hover ul ul, #menu li.menuHover ul ul {
     					min-height: 1%;
     					position: absolute;
     					top: 1px;
     					left: -999em;
      				}
      
     				#menu ul li:hover ul, #menu ul li.menuHover ul {
     					left: 9em;
      				}
     					#menu ul ul li {
     						width: 10em;
      					}
      
      	#menu a {
      		background-color: transparent;
      		border: 1px solid #F00;
      		color: #FFF;
      		display: block;
      		line-height: 1.5em;
      		margin-left: -1px;
      		text-align: center;
      		text-decoration: none;
      	}
      
      	#menu a:hover {
      		background-color: transparent;
      		color: #FFF;
      	}
    Also note that the class "menuHover" is my replacement class name for the standard Suckerfish class attribute. Normally, I don't use the script since I use a .htc file (take one look at #menu li:hover and you'll see why), but I included the class here for the sake of completeness.

  5. #5
    Rocket Scientist
    Join Date
    Jun 2003
    Location
    Manchester, UK
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks once again I'll take a look at doing this now

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't forget to fix those 116 XHTML validation errors, ok?


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
  •