Navigation links not working

Dec 20, 2011 at 12:27 PM

While following the tutorial I noticed that in part 3 the navigation links no longer worked.
after removing the h3 tags arround 'Browse Genres' they worked again.
I checked the HTML using validator.w3.org and it was valid HTML5
I am using IE7

Store.Index()

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
    <body>
        <div id="header">
            <h1>ASP.NET MVC MUSIC STORE</h1>
            <ul id="navlist">
                <li>
                    <a href="/" id="current">Home</a>
                </li>
                <li>
                    <a href="/Store/">Store</a>
                </li>
            </ul>
        </div>
        
<h3>Browse Genres</h3>
<p>
    Select from 3
genres:</p>
<ul>
        <li><a href="/Store/Browse?genre=Disco">Disco</a></li>
        <li><a href="/Store/Browse?genre=Jazz">Jazz</a></li>
        <li><a href="/Store/Browse?genre=Rock">Rock</a></li>
</ul>
    </body>
</html>

What can I do to troubleshoot this?
Thanks in advance
Feb 9, 2012 at 8:01 PM

You can use FF/Chrome or hit the compatibility icon in IE9. Or you can remove float: left; from the header

/* IE9 float: left; bug

#header

{

float: left;

width: 100%;

border-bottom: 1px dotted #5D5A53;

margin-bottom: 10px;

}

*/

 

#header

{

 

width: 100%

;

 

border-bottom: 1px dotted #5D5A53

;

 

margin-bottom: 10px

;

}