The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 3 of 3

Thread: Navigation issue, IE being naughty

  1. #1

    Navigation issue, IE being naughty

    Hello,

    Having a probelm with some tab navigation, I have it set up so it's a horizontal tab listing it works perfectly in firefox but when I tested it in IE it staggers the tabs so it looks a stair case basically. Heres my xhtml and css.

    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" lang="en" xml:lang="en" >
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="navi.css" />
        <title>Navigation</title>
    </head>
    <body>
                 <ul id="menu">
    <li id="home"><a href="#" title="Takes you to the Home page. Accesskey: a" accesskey="a"><span>Home</span></a></li>
    <li id="about"><a href="#" title="Tells you about me. Accesskey: b" accesskey="b"><span>About</span></a></li>
    <li id="portfolio"><a href="#" title="Showcase of things I have created. Accesskey: c" accesskey="c"><span>Portfolio</span></a></li>
    <li id="contact"><a href="#" title="Get in contact with me. Accesskey: d" accesskey="d"><span>Contact</span></a></li>
                 </ul>        
    </body>
    </html>
    Code:
    body {
        font-size: small;
    }
    
    #menu {
        float: left;
        width: 100%;
        margin: 0;
        padding: 10px 0 0 46px;
        list-style: none;
    }
    
    menu li {
        float: left;
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande", sans-serif;
        font-size: 55%;
    }
    
    #menu a {
        float: left;
        display: block;
        margin: 0 2px 0 0;
        padding: 4px 8px;
        color: #333;
        text-decoration: none;
        border: 1px solid #5fa562;
        border-bottom: none;
        background: #70ad38;
    }
    Your help would be most appreciated.

    Cheers,
    Inept

  2. #2
    In the css the selector is supposed to be "#menu li" not "menu li" . That should fix it

  3. #3
    thanks i can't believe i didn't pick that up.

    Cheers,
    Inept

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012