Forums

cupaball

Can anyone tell me why my code works in FF but not in ie6 or ie7. Look at the screen shot to see what I mean.

HTML Code

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>CupaBall</title>

<link href=\"ajaxtest.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<div id=\"page_wrap\">
  <div class=\"container\">
    <img src=\"images/logo.jpg\"/>
    <ul id=\"nav\">
      		<li class=\"home\"><a href=\"#\">Home</a></li>
            <li class=\"tech\"><a href=\"#\">Tech</a></li>
            <li class=\"blog\"><a href=\"#\">Blog</a></li>
            <li class=\"video\"><a href=\"#\">Video</a></li>
    </ul>
            
	        <p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt quis nostrud exercitation. Ut labore et dolore magna aliqua. In reprehenderit in voluptate excepteur sint occaecat consectetur adipisicing elit. Eu fugiat nulla pariatur.</p>
	        <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Duis aute irure dolor excepteur sint occaecat sunt in culpa. Quis nostrud exercitation. Eu fugiat nulla pariatur.</p>
  </div>
    
</div>
    <div id=\"footer\">
        <div class=\"container\">
                <ul>
                <li>Home</li>
                <li>Tech</li>
                <li>Blog</li>
                <li>Video</li>
                </ul>
        </div>
</div>
</body>
</html>

CSS Code

 @charset \"utf-8\";
/* CSS Document */

*{ 
margin:0;  
padding:0;
}

.container {
background-color: #999999;
width:800px;
margin-left:auto;
margin-right:auto;
}

ul {
list-style: none;
}

nav li {
display:inline;
}

ul#nav li {
text-indent: -9999px;
}

ul#nav li a {
	display:block;
	height:35px;
	float:left;
}

ul#nav li.home a {
	width:186px;
	background-image:url(images/home.jpg);
	background-position: bottom ;
}

ul#nav li.tech a {
	width:178px;
	background-image:url(images/tech.jpg);
	background-position: bottom  ;
}

ul#nav li.blog a {
	width:169px;
	background-image:url(images/blog.jpg);
	background-position: bottom  ;
}

ul#nav li.video a {
	width:267px;
	background-image:url(images/video.jpg);
	background-position: bottom  ;
}

ul#nav li a:hover {
background-position:center center;
}

daGUY

Simple typo:

nav li {
display:inline;
}

That should be:

#nav li {
display:inline;
}

Don't you hate it when that happens? :lol:

cupaball

"daGUY" said:
Simple typo:
nav li {
display:inline;
}
That should be:
#nav li {
display:inline;
}
Don't you hate it when that happens? :lol:

Yep! Thank you very much!

koewnet

Typos sometimes are hard to find, but since it's just a typo (leaving out the #) and not something else, the W3C CSS validator can find it. ;)

treehouse : what would you like to learn today?

Forums

Help with Sprites