Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.


Results 1 to 3 of 3

Thread: Navigation issue, IE being naughty

  1. #1

    Navigation issue, IE being naughty


    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" >
        <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" />
                 <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>
    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.


  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.


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


Copyright 1999 - 2012