Forum Moderators: not2easy
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<meta name="keywords" content="web hosted time and attendance" />
<style type="text/css">
<!--
* { margin:0; padding:0;}
body {
font: normal 80% Helvetica, Arial, sans-serif;
text-align:center;
background-color:#efefef;
color:#000;
}
#wrapper {
text-align:left;
margin:0 auto;
width:73em;}
#main {
width:44em;
float:left;
display:inline;
margin-left:1em;
}
#navarea {
height:57px;
background-image: url(../images/navbackground.gif);
background-repeat: repeat-x;
}
img {
margin:0;
padding:0;
border:0;}
a {
text-decoration:none;
color:#462060;
font-weight:bold;
border-bottom:1px dotted #8f8f8f;
}
a:hover {
text-decoration:none;
color:#666;
}
/*navigation */
#navlinks {
float:left;
width:100%;
font-size:11px;
line-height:13px;
white-space:nowrap;
}
#navlinks ul {
margin:0;
padding:0 ;
list-style:none;
position:relative; /*need this for secondary links */
}
#navlinks li {
float:left;
background: url(../images/left_both.gif) no-repeat left top; /*rounded tab*/
margin:0;
padding:0 0 0 4px;
border-bottom:1px solid #c0c0c0;
}
#navlinks a {
float:left;
display:block;
width:0.1em;
background: url(../images/right_both.gif) no-repeat right top;/*rounded tab*/
padding:5px 12px 5px 9px;
text-decoration:none;
font-weight:bold;
color:#4b206e; /*color of tab text */
border:none;}
#navlinks > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navlinks a {float:none;}
/* End IE5-Mac hack */
#home #nav-home, #products #nav-products, #clocks #nav-clocks,
#industries #nav-industries, #get #nav-get {
background-position:0 -150px;
border-width:0;
border-bottom:1px solid #fff;}
#home #nav-home a, #products #nav-products a, #clocks #nav-clocks a,
#industries #nav-industries a, #get #nav-get a {
background-position:100% -150px;
color:#000;
}
#navlinks li:hover, #navlinks li:hover a {
background-position:0% -150px;
color:#333; /*color of tab hover */}
#navlinks li:hover a {
background-position:100% -150px;}
#navlinks #secondary1 a,#navlinks #secondary2 a,#navlinks #secondary3 a {
color:#4b206e; /*color of secondary link text */
}
ul#secondary1, ul#secondary2, ul#secondary3 {/*changing id to class messed up the menu, so extra ids needed */
position: absolute;
margin: 0;
padding: 0;
left: 0;
top:30px;
visibility:hidden;
}
ul#secondary1 li, ul#secondary2 li, ul#secondary3 li {
background:none;/*removes rounded tab*/
border:0;}
ul#secondary1 li a, ul#secondary2 li a, ul#secondary3 li a {
display: block;
float: left;
padding: 0 6px;
margin: 0;
border: none;
border-right: 1px dotted #ccc;
background:none;}
ul#secondary1 li a.last, ul#secondary2 li a.last, ul#secondary3 li a.last {
border:none;
padding-right:0;
}
#navlinks ul#secondary1 li:hover, #navlinks ul#secondary1 li:hover a, #navlinks ul#secondary2 li:hover, #navlinks ul#secondary2 li:hover a, #navlinks ul#secondary3 li:hover, #navlinks ul#secondary3 li:hover a {
color:#666;/*color of secondary link hover */ }
#products #nav-products ul#secondary1, #clocks #nav-clocks ul#secondary2,
#industries #nav-industries ul#secondary3, #get #nav-get ul#secondary4 {
visibility:visible;/*shows on appropriate page */ }-->
</style>
</head>
<body id="products">
<div id="wrapper">
<div id="main">
<div id="navarea"><div id="navlinks" style="white-space:nowrap;">
<ul>
<li id="nav-home"><a href="#">Home</a></li>
<li id="nav-products"><a href="#">Web–Hosted Time & Attendance</a>
<ul id="secondary1">
<li><a href="#">Overview</a></li>
<li><a href="#">Accruals</a></li>
<li><a href="#">Labor Budgets</a></li>
<li><a href="#">Leave Management</a></li>
<li><a href="#">Incidents & Points</a></li>
<li><a href="#" class="last">Privacy/Security</a></li>
</ul></li>
<li><a href="#">Time Clocks</a></li>
<li><a href="#">Industries</a></li>
<li><a href="#">About</a></li>
</ul>
</div></div>
<!--end main --></div>
<!--end wrapper --></div>
</body>
</html>
It should look like this:
Line One, has relative positioning applied to it
list items under line one, absolutely positioned
But in ie 5, 5.5 and 6 it looks like this:
Line One, has relative positioning applied to it
................................................list items start here
the periods show white space
hope it helps
I think I'll have to tell the client no go and figure out some other naviation. Has anyone mentioned how sucky ie is lately?
*html YourDivName {margin-left: -200px;}
see if that helps,
mainly </ul> and </li> tags missin, run your page through the w3c validator, it easyer to find them that way
[edited by: SharingDOODLES at 7:20 pm (utc) on Dec. 6, 2006]
<!--[if lte IE 6]>
<style type="text/css">
ul#secondary1, ul#secondary2, ul#secondary3, ul#secondary4 {
position:absolute;
left:-40em;
width:40em; /*need this or lower ie doesn't wrap line when nec */
}
</style>
<![endif]-->
Lines up properly in ie5, and close to where it should be in 5.5 and 6. Close enough will be good enough.
I would like to understand the problem if anyone has insight on the why's.
