| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 1 of 1
Hybrid View
-
Sep 29, 2004, 12:00 #1SitePoint 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>
Bookmarks