Click to See Complete Forum and Search --> : CSS horizontal menu problems in IE6 & 7
xtoverus1
10-12-2009, 05:09 PM
For my site I have a pretty simple horizontal menu but for some reason its not showing up right in IE6 & 7, it looks fine in IE8, firefox, safari and chrome though. Can someone help me out here?
URL (temporary for testing only) http://afge153.fotoz.org
Thanks
-I'll be making a nicer CSS menu later after I figure out the bugs...
coothead
10-13-2009, 12:58 PM
Hi there xtoverus1,
try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://afge153.fotoz.org/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="AFGE Local 153">
<meta name="keywords" content="AFGE, AFGE 153, union, MacDill AFB">
<title>Welcome to AFGE 153!</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
list-style-type:none;
text-decoration:none;
}
body {
background-image:url(images/backn31.jpg);
}
#container {
width:800px;
padding-top:310px;
margin:auto;
background-image:url(images/logo2.png);
background-repeat:no-repeat;
background-position:center 33px;
}
#nav {
height:30px;
}
#nav li {
float:left;
}
#nav a {
display:block;
width:90px;
height:25px;
padding-top:5px;
margin-right:3px;
border:2px solid #f50;
border-bottom:0;
text-align:center;
color:#f00;
background-color:#b2b4b4;
}
#nav a.current {
background-color:#fff;
}
#nav a:visited {
color:#f00;
}
#nav li a:hover {
color:#00f;
background-color:#fff;
}
#content {
height:350px;
background-color:#fff;
border:2px solid #f50;
font-family:'helvetica neue',arial,helvetica,geneva,sans-serif;
}
#footer {
text-align:center;
font-size:70%;
}
.action_news {
display:block;
padding:10px 0;
margin:0 auto 20px auto;
}
.legal {
border:1px dashed #000;
margin-bottom:10px;
}
.legal_header {
font-size:100%;
font-weight:bold;
}
.copyright {
font-weight:bold;
}
.valid {
width:88px;
height:31px;
margin-right:20px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#nav {
position:relative;
z-index:0;
margin-bottom:-2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="" title="Home" class="current">Home</a></li>
<li><a href="resources" title="Resources">Resources</a></li>
<li><a href="join" title="Join">Join</a></li>
<li><a href="about" title="About">About</a></li>
<li><a href="contact" title="Contact Us">Contact us</a></li>
</ul>
<div id="content"></div>
<div id="footer">
<a href="http://www.afge.org/ActionNews/">
<img src="images/ActionNewsSignUp.gif" alt="AFGE action news links" class="action_news" ></a>
<a href="http://validator.w3.org/check?uri=referer">
<img class="valid" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img class="valid" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
<br><br>
<p class="legal">
<span class="legal_header">Legal Notice</span>
<br><br>
AFGE 153 Local does not necessarily agree or adopt the content or opinion of any other web site linked from,
or identified in, this site. You are strongly urged to use and frequently update an anti-virus program. AFGE
153 Local cannot and does not warrant that any site linked from, or identified in, this site is security
tested or risk free.
<br><br>
<span class="copyright">AFGE Local 153 ©</span>
</p>
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>
coothead
xtoverus1
10-14-2009, 12:59 AM
That worked great, thanks alot, I really appreciate it. You made alot of other changes too that I didn't even realize I could do, Just when I think I'm starting to get a good grasp on CSS.... haha
Thanks again coothead (interesting username)
coothead
10-14-2009, 01:14 AM
No problem, you're very welcome. ;)