html - Navigation Bar working with chrome, and firefox, but not internet explorer -
i trying make website, , when test it, navigation bar not working internet explorer, working chrome , firefox. in ie, bar not dropping down when hovered over.
here html:
<head><!--css linking, icon, title, etc.//--> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> <nav><!-- creates navigation bar //--> <ul> <li><a href="/home">our troop</a> <ul> <li></li> <li><a href="/about/location">about us</a></li> <li><a href="/about/history">calendar</a></li> <li><a href="/about/meetings">meetings</a></li> <li><a href="/about/joining">how join</a></li> <li><a href="/about/contact">how contact us</a></li> </ul> </li> <li><a href="/leadership">leadership</a> <ul> <li><a href="/leadership">leadership roles in our troop</a></li> <li><a href="/leadership/youth">current youth leadership</a></li> <li><a href="/leadership/adult">current adult leadership</a></li> </ul> </li> <li><a href="/scouting">about scouting</a> <ul> <li></li> <li><a href="/scouting/whatis">what scouting</a></li> <li><a href="/scouting/history">history of scouting</a></li> <li><a href="/scouting/ranks">scouting ranks</a></li> <li><a href="/scouting/oath_law">the scout oath , law</a></li> <li><a href="/scouting/sign_salute">the scout sign , salute</a></li> <li><a href="/scouting/motto_slogan">the scout motto , slogan</a></li> <li><a href="/scouting/uniform">the scout uniform</a></li> </ul> </li> <li><a href="/skills">skills , scoutcraft</a> <ul> <li><a href="/skills/full_listings">complete listing of skill guides</a></li> <li><a href="/skills/camping">general camping</a></li> <li><a href="/skills/firstaid">firstaid</a></li> <li><a href="/skills/ropecraft">ropes, knots, , lashing</a></li> <li><a href="/skills/orienteering">orienteering</a></li> <li><a href="/skills/backpaking">backpacking</a></li> <li><a href="/skills/firemaking">firemaking</a></li> <li><a href="/skills/tools">tools</a></li> <li><a href="/skills/wildlife">wildlife</a></li> <li><a href="/skills/watercraft">watercraft</a></li> </ul> </li> <li><a href="/skills">more skills , scoutcraft</a> <ul> <li><a href="/skills/full_listings">complete listing of skill guides</a></li> <li><a href="/skills/camping">hiking</a></li> <li><a href="/skills/firstaid">being prepared</a></li> <li><a href="/skills/ropecraft">cooking outdoors</a></li> <li><a href="/skills/orienteering">shelter building</a></li> <li><a href="/skills/backpaking">equipment</a></li> <li><a href="/skills/firemaking">firemaking</a></li> <li><a href="/skills/tools">tools</a></li> <li><a href="/skills/wildlife">wildlife</a></li> <li><a href="/skills/watercraft">watercraft</a></li> </ul> </li> <li><a href="/other">other</a> <ul> <li><a href="/skills/full_listings">links</a></li> <li><a href="/skills/camping">uniform chest</a></li> <li><a href="/skills/forms">forms</a></li> </ul> </li> </ul> </nav> and here css:
/* start nav menu */ nav { background-color: #004700; height:40px; } nav ul { font-family: arial, verdana; font-size: 20px; margin: 0; padding: 0; list-style: none; } nav ul li { display: block; position: relative; float: left; } nav li ul { display: none; } nav ul li {/* top level*/ display: block; text-decoration: none; padding: 7px 15px 3px 15px; background: #165016; color: #ffffff; margin-left: 1px; white-space: nowrap; height:30px; /* width , height of top-level nav items */ text-align:center; } nav ul li a:hover { /* highlighted top level items */ background: #617f8a; } nav li:hover ul { display: block; position: absolute; height:30px; } nav li:hover li {/* sub items*/ float: none; font-size: 15px; } nav ul li ul li a:hover { /* highlighted sub items*/ background: #617f8a; } nav li:hover li a:hover { /*highlighted subitems*/ background: #95a9b1; } nav ul li ul li {/*sub items*/ text-align:left; /* top-level items centered, nested list items left-aligned */ } /* end nav menu */
you haven't specified ie version you're testing with, code appears work fine in ie9 , higher, i'm going assume you're testing in ie8.
given that, there 1 main problem can see breaking site:
<nav> , other new html5 elements not supported standard ie8 or earlier. using them break layout , cause other glitches.
you have 2 options: either replace <nav> , other html5 elements old-style <div> elements, or use polyfill html5shiv or modernizr, both of fix problem in ie8 , make these elements work normal.
hope helps.
[edit after op clarified ie version ie10]
the other possibility it's displaying page in compatibility mode or quirks mode.
you can check browser mode pressing f12 bring dev tools window; mode information shown @ top of window. if it's in either quirks mode or compatibility mode (ie if it's in other ie10 standards mode) there's strong probability cause.
if it's in quirks mode, it's because html isn't standards compliant. of time, adding valid doctype top of page fix (you can use <!doctype html> easiest valid doctype). should check other errors in html running through w3c validator , fixing errors reports. (if code you've posted whole code, you're missing <html> , <body> tags starters, not good).
if it's in compatibility mode (eg "ie7 standards"), can fix adding x-ua-compatible meta tag <head> section. (see my answer here more info on why might happening , fix it).
Comments
Post a Comment