SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    disneyland
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nesting ULs and width problem with IE

    I jacked the CSS menu system from http://www.homelesspixel.de/tabs/tabs.html
    and am currently having some problems with the submenu (subnav). I want the submenu to stretch 100% across but IE6 renders the subnav background only half way across the screen, while IE 5 renders it maybe 15% across the screen and Firefox renders it 130% across. It would render properly on all IE 6 and Firefox if I set subnav width to a pixel value, but I would like to make it a somewhat liquid site. thanks for any help

    Here is the code for the CSS

    BODY {
    PADDING-RIGHT: 20px;
    PADDING-LEFT: 20px;
    PADDING-BOTTOM: 20px;
    MARGIN: 0px;
    FONT: 11px helvetica, arial, geneva, lucida, sans-serif;
    COLOR: #333;
    PADDING-TOP: 20px;
    BACKGROUND-COLOR: #fff;
    }
    H1 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 2em;
    MARGIN: 1em 0px
    }
    UL#topnav {
    PADDING-RIGHT: 100px;
    PADDING-LEFT: 10%;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 0px 100px;
    BORDER-TOP-STYLE: none;
    PADDING-TOP: 0px;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    LIST-STYLE-TYPE: none;
    BORDER-BOTTOM-STYLE: none;
    width:100%;
    }
    #topnav LI {
    PADDING-RIGHT: 0px;
    DISPLAY: block;
    PADDING-LEFT: 0px;
    FLOAT: left;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
    }
    #topnav A {
    BORDER-RIGHT: #aaa 1px solid;
    PADDING-RIGHT: 2.4em;
    DISPLAY: block;
    PADDING-LEFT: 36px;
    BACKGROUND: url(lia.gif) no-repeat;
    PADDING-BOTTOM: 0.2em;
    MARGIN: 0px;
    FONT: bold 11px helvetica, arial, geneva, lucida, sans-serif;
    COLOR: #444;
    PADDING-TOP: 0.2em;
    POSITION: relative;
    TEXT-DECORATION: none
    }
    #topnav A#a0 {
    LEFT: 0px
    }
    #topnav A#a1 {
    LEFT: -30px
    }
    #topnav A#a2 {
    LEFT: -60px
    }
    #topnav A#a3 {
    LEFT: -90px
    }
    #topnav A#a4 {
    LEFT: -120px
    }
    #topnav A#a5 {
    LEFT: -150px
    }
    #topnav A#a6 {
    LEFT: -180px
    }
    #topnav A:hover {
    BACKGROUND: url(liahover.gif) no-repeat;
    color: #FFFFFF;
    }
    #topnav A.here {
    BORDER-RIGHT: #777 1px solid;
    PADDING-RIGHT: 1em;
    PADDING-LEFT: 35px;
    Z-INDEX: 102;
    BACKGROUND: url(liahover.gif) no-repeat;
    PADDING-BOTTOM: 0.2em;
    MARGIN: 0px 4px 0px 0px;
    PADDING-TOP: 0.2em;
    POSITION: relative;
    color: #FFFFFF;
    }
    UL#subnav {
    WIDTH:100%;
    PADDING-RIGHT: 0px;
    BORDER-TOP: #fff 1px solid;
    PADDING-LEFT: 30px;
    Z-INDEX: 101;
    BACKGROUND: #003366;
    LEFT: 10px;
    PADDING-BOTTOM: 3px;
    MARGIN: -1px 0px 0px;
    PADDING-TOP: 1px;
    BORDER-BOTTOM: #999 1px solid;
    POSITION: absolute;
    }
    #subnav LI {
    PADDING-RIGHT: 0px;
    DISPLAY: block;
    PADDING-LEFT: 0px;
    Z-INDEX: 102;
    FLOAT: left;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    POSITION: relative
    }
    #subnav A {
    BORDER-RIGHT: 0px;
    PADDING-RIGHT: 12px;
    BORDER-TOP: 0px;
    DISPLAY: block;
    PADDING-LEFT: 10px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    PADDING-BOTTOM: 2px;
    MARGIN: 0px;
    BORDER-LEFT: 0px;
    COLOR: #ccc;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: 0px;
    TEXT-DECORATION: none
    }
    #subnav A:hover {
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    BORDER-LEFT: 0px;
    COLOR: #fff;
    BORDER-BOTTOM: 0px
    }
    #subnav A.here {
    BORDER-RIGHT: 0px;
    PADDING-RIGHT: 12px;
    BORDER-TOP: 0px;
    PADDING-LEFT: 10px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    PADDING-BOTTOM: 2px;
    MARGIN: 0px;
    BORDER-LEFT: 0px;
    COLOR: #fff;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: 0px
    }


    and here is the code for the HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>CSS Tabs example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="expires" content="-1" />

    <style type="text/css" media="all">
    @import "tabs.css";
    </style>
    </head>

    <body>
    <h1>Example of CSS-driven tabs</h1>

    <ul id="topnav">

    <li><a id="a0" href="#">Home</a></li>
    <li><a id="a1" href="#">About</a></li>
    <li><a id="a2" href="#">News</a></li>
    <li><a id="a3" href="#">Proof</a></li>
    <li><a id="a4" href="#" class="here">Process</a>
    <ul id="subnav">

    <li><a href="#">Vision</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#" class="here">Culture</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Sponsorship</a></li>

    </ul>
    </li>
    <li><a id="a5" href="#">Expertise</a></li>
    <li><a id="a6" href="#">Help</a></li>
    </ul>


    <ul>
    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Proof</a></li>
    <li><a href="#" class="here">Process</a>
    <ul>
    <li><a href="#">Vision</a></li>

    <li><a href="#">Team</a></li>
    <li><a href="#" class="here">Culture</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Sponsorship</a></li>
    </ul>

    </li>
    <li><a href="#">Expertise</a></li>
    <li><a href="#">Help</a></li>
    </ul>

    </body>
    </html>
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •