www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS horizontal menu problems in IE6 & 7

  1. #1
    Join Date
    Apr 2009
    Posts
    19

    Arrow 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.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    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 &copy;</span>
    </p>
    
    </div><!-- end footer -->
    
    </div><!-- end container -->
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Apr 2009
    Posts
    19

    resolved 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)

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    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
  •  
HTML5 Development Center



Recent Articles