Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Tabbed Navigation

Bottom of Page

1 to 4 of 4

  1.  
  1.  permalink
    I have a tabbed navigation box which works beatifully in Internet Explorer, however, when I view it in Firefox the border doesn't ou the width of the list div box. If anyone can help me then the code is below:
    ----------------------------------------------------------------------------------------------------------------------------------------

    CSS:

    <style type="text/css" media="screen">
    body {
    margin : 10px;
    font: Verdana, Helvetica, Arial;
    padding: 0px;
    background: #fff;
    }

    #holder{
    float: right;
    }

    #list{
    width: 450px;
    margin: 0px;
    padding:0;
    }

    #menu {
    border-bottom : 1px solid #ccc;
    margin : 0;
    padding-bottom : 19px;
    padding-left : 10px;
    }

    #menu ul, #menu li {
    display : inline;
    list-style-type : none;
    margin : 0;
    padding : 0;
    }


    #menu a:link, #menu a:visited {
    background : #E8EBF0;
    border : 1px solid #ccc;
    color : #666;
    float : left;
    font-size : small;
    font-weight : normal;
    line-height : 14px;
    margin-right : 8px;
    padding : 2px 10px 2px 10px;
    text-decoration : none;
    }

    #menu a:link.active, #menu a:visited.active {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }

    #menu a:hover {
    color : #f00;
    }


    body.section-1 #menu li#nav-1 a,
    body.section-2 #menu li#nav-2 a,
    body.section-3 #menu li#nav-3 a,
    body.section-4 #menu li#nav-4 a {
    background : #fff;
    border-bottom : 1px solid #fff;
    color : #000;
    }



    #menu ul a:hover {
    color : #f00 !important;
    }

    #contents {
    background : #fff;
    border : 1px solid #ccc;
    border-top : none;
    clear : both;
    margin : 0px;
    width: 450px;
    padding : 15px;
    }
    </style>

    -----------------------------------------------------------------------------------------------------------------------------------

    HTML:

    <body class="section-1">
    <div id = "holder">
    <div id = "list">
    <ul id="menu">
    <li id="nav-1"><a href="/tools/csstabs/?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Home</a></li>
    <li id="nav-2"><a href="/tools/csstabs/2?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">About Us</a>
    </li>
    <li id="nav-3"><a href="/tools/csstabs/3?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Contact Us</a>
    </li>
    <li id="nav-4"><a href="/tools/csstabs/4?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Products</a>
    </li>
    </ul>
    </div>
    <div id="contents">
    <p>Want the code? View Source in your browser.</p>
    <h2>CSS Tabs with Submenus</h2>
    <p>This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists. The home tab has no subitems, the rest do, so please click around.</p>

    </div>
    </div>
    </body>

    -----------------------------------------------------------------------------------------------------------------------------------

    Also when I view it in Firefox the text and the boxes appear to be slightly smaller for some reason.

    I'd appreciate any help with this.

    Thanks
    • CommentAuthordavist11
    • CommentTimeNov 17th 2008
     permalink
    Do you have a link? It's much more useful to post a link than code.
    • CommentAuthorwebcare.me
    • CommentTimeJan 15th 2009
     permalink
    I have been banned cause I'm an idiot
    I will help you to fix this problem,but need to see your site or screenshot.
    • CommentAuthoreggpoker
    • CommentTimeJan 26th 2009
     permalink
    Hi
    Have a look at the Topic: Good in IE7 Mess in FF3.
    I think that's the same problem

1 to 4 of 4

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page