CSS horizontal menu problems in IE6 & 7
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...
Last edited by xtoverus1; 10-12-2009 at 05:22 PM .
Hi there xtoverus1,
try it like this...
Code:
<!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
Worked great!
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)
No problem, you're very welcome.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks