rp.beltran rp.beltran - 6 months ago 10
HTML Question

Navigation Bar working with chrome, and firefox, but not internet explorer

I am trying to make a website, and when I test it, the navigation bar is not working with Internet explorer, but it is working with Chrome and Firefox. In IE, the bar is not dropping down when hovered over.

Here is the 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 the 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 to Join</a></li>
<li><a href="/about/contact">How to 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 is 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 and Law</a></li>
<li><a href="/scouting/sign_salute">The Scout sign and Salute</a></li>
<li><a href="/scouting/motto_slogan">The Scout Motto and Slogan</a></li>
<li><a href="/scouting/uniform">The Scout Uniform</a></li>
</ul>
</li>
<li><a href="/skills">Skills and 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, and 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 and 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 is the 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 a {/* 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 and 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 a {/*sub items*/
text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}
/* END NAV MENU */

Answer

You haven't specified the IE version you're testing with, but your code appears to work fine in IE9 and higher, so I'm going to assume you're testing in IE8.

Given that, there are is one main problem I can see that will be breaking your site:

<nav> and other new HTML5 elements are not supported as standard by IE8 or earlier. Using them will break your layout and cause other glitches.

You have two options: Either replace the <nav> and any other HTML5 elements with old-style <div> elements, or use a polyfill like html5shiv or Modernizr, both of which will fix the problem in IE8 and make these elements work as normal.

Hope that helps.

[EDIT after OP clarified his IE version as IE10]

The other possibility is that it's displaying the page in compatibility mode or quirks mode.

You can check the browser mode by pressing F12 to bring up the Dev Tools window; the mode information will be shown at the top of the window. If it's in either Quirks mode or compatibility mode (ie if it's in anything other than IE10 Standards mode) then there's a strong probability that this is the cause.

If it's in quirks mode, it's because your HTML isn't standards compliant. Most of the time, adding a valid doctype to the top of the page will fix this (you can use <!DOCTYPE html> as the easiest valid doctype). You should also check for other errors in your HTML by running it through the W3C Validator and fixing the errors it reports. (if the code you've posted is your whole code, then you're missing the <html> and <body> tags for starters, which is definitely not good).

If it's in compatibility mode (eg "IE7 Standards"), then you can fix this by adding an X-UA-Compatible meta tag to your <head> section. (see my answer here for more info on why this might be happening and what to do to fix it).

Comments