Menu
Hey all,
I’m using CSS with un-order listed as my nav bar. I have a container div with the background color set and it works fine in IE7 and FF, but in IE6 the un-ordered list item expand the height of the div past what I have set it.
Example:
the div height is set to 24px, but the list items have a 1px border that is white. what happens is the 1px border gets added to the height of the div as well, but the background on the div is set to another color. So the nav bar list items look great but in the extra space that completes my header section there is a 1px under hang.
[URL=”http://www.webdeveloper.com/forum/attachment.php?attachmentid=11911&d=1228166485″]Picture of the 1px under hang (it’s to the bottom right)
I need to borders to have the 1px space and it works fine in IE7 and FF, but need some help with IE6.
Any thoughts?
[CODE]
/*-----------------------------------------------------------
Pure CSS Drop-down Menu
Last Updated: 12/31/2007 by Justin Spegele
Author: Justin Spegele
Spegele Design and Development
http://www.spegele.com/
This code is free to modify and use for any purpose, as
long as proper credit is given to the original designer.
----------------------------------------------------------- */
/* Overarching Menu
-----------------------------------*/
.cssnav {
position:relative;
z-index:1000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
height: 25px;
width: 100%;
background:#467aa7;
border:1px solid #fff;
}
.cssnav ul {
padding:0;
margin:0;
list-style-type:none;
}
.cssnav ul ul {
width:149px;
text-align:left;
}
/* Main list
-----------------------------------*/
.cssnav li {
float:left;
width:106px; /* This controls the width of the topnav */
position:relative;
background:none; /* Added to override style */
padding:0px; /* Added to override style */
}
/* First Level
-----------------------------------*/
/* Links */
.cssnav a, .cssnav a:visited {
display:block;
text-decoration:none;
color:#fefefe;
border:1px solid #fff;
border-width:0px 0px 1px 1px;
background:#467aa7;
line-height:25px;
}
/* Links on hover */
.cssnav a:hover, .cssnav ul ul a:hover{
color:#fff;
background:#80b0da;
}
.cssnav :hover > a, .cssnav ul ul :hover > a {
color:#fff;
background:#80b0da;
}
/* Second Level
-----------------------------------*/
/* Links */
.cssnav ul ul a, .cssnav ul ul a:visited {
background:#578bb8;
line-height:1em;
padding:5px 10px;
width:128px;
border-width:0 1px 1px 1px;
}
/* Links on hover */
.cssnav ul ul a:hover {
background:#80b0da;
}
/* Visibility */
.cssnav ul li:hover ul, .cssnav ul a:hover ul{
visibility:visible;
}
/* Third Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul a, .cssnav ul ul ul a:visited {
background:#578bb8;
}
/* Links on hover */
.cssnav ul ul ul a:hover {
background:#80b0da;
}
/* Positioning */
.cssnav ul ul ul{
left:150px;
top:-1px;
}
.cssnav ul ul ul.left {
left:-150px;
}
/* Visibility */
.cssnav ul :hover ul ul{
visibility:hidden;
}
.cssnav ul :hover ul :hover ul{
visibility:visible;
}
/* All Sub Levels
-----------------------------------*/
/* Default visibility */
.cssnav ul ul {
visibility:hidden;
position:absolute;
top:26px;
left:0;
border-top:1px solid #fff;
}
/* IE Table
-----------------------------------*/
.cssnav table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
[/CODE][code=html]
<div class="cssnav">
<ul>
<li>
<a title="Home" target="_top" href="">
Home
</a></li><li>
<a href="#" >Here
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a target="_top" href="#">
Link
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li>
<a href="#" title="Accounts">
Accounts
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a title="Account Info" href="#">
Account Info
</a></li><li><a href="#">
Account Extra
</a></li><li><a href="#">
Search For Accounts
</a></li><li><a href="#">
Reset Password
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li>
<a href="#">More Links
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a title="More Links 1" href="#">
More Links 1
</a></li><li>
<a class="drop" href="#" title="More Links 2">More Links 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left"><li><a title="More Sub Links 1" href="#">
More Sub Links 1
</a></li><li><a title="More Sub Links 2" href="#">
More Sub Links 2
</a></li><li><a title="More Sub Links 3" href="#">
More Sub Links 3
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li><a title="More Links 3" href="#">
More Links 3
</a></li><li><a title="More Links 4" href="#">
More Links 4
</a></li><li><a title="More Links 5" href="#">
More Links 5
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li>
<a href="#">More Links
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a title="More Links 1" href="#">
More Links 1
</a></li><li>
<a class="drop" href="#" title="More Links 2">More Links 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left"><li><a title="More Sub Links 1" href="#">
More Sub Links 1
</a></li><li><a title="More Sub Links 2" href="#">
More Sub Links 2
</a></li><li><a title="More Sub Links 3" href="#">
More Sub Links 3
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li><a title="More Links 3" href="#">
More Links 3
</a></li><li><a title="More Links 4" href="#">
More Links 4
</a></li><li><a title="More Links 5" href="#">
More Links 5
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li>
<a href="#">More Links
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a title="More Links 1" href="#">
More Links 1
</a></li><li>
<a class="drop" href="#" title="More Links 2">More Links 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left"><li><a title="More Sub Links 1" href="#">
More Sub Links 1
</a></li><li><a title="More Sub Links 2" href="#">
More Sub Links 2
</a></li><li><a title="More Sub Links 3" href="#">
More Sub Links 3
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li><a title="More Links 3" href="#">
More Links 3
</a></li><li><a title="More Links 4" href="#">
More Links 4
</a></li><li><a title="More Links 5" href="#">
More Links 5
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li>
<a href="#">More Links
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul><li><a title="More Links 1" href="#">
More Links 1
</a></li><li>
<a class="drop" href="#" title="More Links 2">More Links 2
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left"><li><a title="More Sub Links 1" href="#">
More Sub Links 1
</a></li><li><a title="More Sub Links 2" href="#">
More Sub Links 2
</a></li><li><a title="More Sub Links 3" href="#">
More Sub Links 3
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li><a title="More Links 3" href="#">
More Links 3
</a></li><li><a title="More Links 4" href="#">
More Links 4
</a></li><li><a title="More Links 5" href="#">
More Links 5
</a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul></div>
[/code]<i>
</i><!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*-----------------------------------------------------------
Pure CSS Drop-down Menu
Last Updated: 12/31/2007 by Justin Spegele
Author: Justin Spegele
Spegele Design and Development
http://www.spegele.com/
This code is free to modify and use for any purpose, as
long as proper credit is given to the original designer.
----------------------------------------------------------- */
/* Overarching Menu
-----------------------------------*/
.cssnav {
position:relative;
z-index:1000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
height: 25px;
overflow: visible;
width: 100&#37;;
background:#467aa7;
border:1px solid #fff;
}
.cssnav ul {
padding:0;
margin:0;
list-style-type:none;
}
.cssnav ul ul {
width:149px;
text-align:left;
}
/* Main list
-----------------------------------*/
.cssnav li {
float:left;
width:106px; /* This controls the width of the topnav */
position:relative;
_top:1px;
background:none; /* Added to override style */
padding:0px; /* Added to override style */
}
/* First Level
-----------------------------------*/
/* Links */
.cssnav a, .cssnav a:visited {
display:block;
text-decoration:none;
color:#fefefe;
/*border:1px solid #fff;*/
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
/*border-width:0px 0px 1px 1px;*/
background:#467aa7;
line-height:25px;
height: 25px;
}
/* Links on hover */
.cssnav a:hover, .cssnav ul ul a:hover{
color:#fff;
background:#80b0da;
}
.cssnav :hover > a, .cssnav ul ul :hover > a {
color:#fff;
background:#80b0da;
}
/* Second Level
-----------------------------------*/
/* Links */
.cssnav ul ul a, .cssnav ul ul a:visited {
background:#578bb8;
line-height:1em;
padding:5px 10px;
width:128px;
border-width:0 1px 1px 1px;
}
/* Links on hover */
.cssnav ul ul a:hover {
background:#80b0da;
}
/* Visibility */
.cssnav ul li:hover ul, .cssnav ul a:hover ul{
visibility:visible;
}
/* Third Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul a, .cssnav ul ul ul a:visited {
background:#578bb8;
}
/* Links on hover */
.cssnav ul ul ul a:hover {
background:#80b0da;
}
/* Positioning */
.cssnav ul ul ul{
left:150px;
top:-1px;
}
.cssnav ul ul ul.left {
left:-150px;
}
/* Visibility */
.cssnav ul :hover ul ul{
visibility:hidden;
}
.cssnav ul :hover ul :hover ul{
visibility:visible;
}
/* All Sub Levels
-----------------------------------*/
/* Default visibility */
.cssnav ul ul {
visibility:hidden;
position:absolute;
top:26px;
left:0;
border-top:1px solid #fff;
}
/* IE Table
-----------------------------------*/
.cssnav table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
</style>
</head>
<body>
<div class="cssnav">
<ul>
<li>
<a title="Home" target="_top" href="">
Home
</a></li><li>
<a href="#" >Here
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a target="_top" href="#">
<i> </i> Link
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li>
<i> </i> <a href="#" title="Accounts">
<i> </i> Accounts
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a title="Account Info" href="#">
<i> </i> Account Info
<i> </i> </a></li><li><a href="#">
<i> </i> Account Extra
<i> </i> </a></li><li><a href="#">
<i> </i> Search For Accounts
<i> </i> </a></li><li><a href="#">
<i> </i> Reset Password
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li>
<i> </i> <a href="#">More Links
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a title="More Links 1" href="#">
<i> </i> More Links 1
<i> </i> </a></li><li>
<i> </i> <a class="drop" href="#" title="More Links 2">More Links 2
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul class="left"><li><a title="More Sub Links 1" href="#">
<i> </i> More Sub Links 1
<i> </i> </a></li><li><a title="More Sub Links 2" href="#">
<i> </i> More Sub Links 2
<i> </i> </a></li><li><a title="More Sub Links 3" href="#">
<i> </i> More Sub Links 3
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li><a title="More Links 3" href="#">
<i> </i> More Links 3
<i> </i> </a></li><li><a title="More Links 4" href="#">
<i> </i> More Links 4
<i> </i> </a></li><li><a title="More Links 5" href="#">
<i> </i> More Links 5
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li>
<i> </i> <a href="#">More Links
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a title="More Links 1" href="#">
<i> </i> More Links 1
<i> </i> </a></li><li>
<i> </i> <a class="drop" href="#" title="More Links 2">More Links 2
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul class="left"><li><a title="More Sub Links 1" href="#">
<i> </i> More Sub Links 1
<i> </i> </a></li><li><a title="More Sub Links 2" href="#">
<i> </i> More Sub Links 2
<i> </i> </a></li><li><a title="More Sub Links 3" href="#">
<i> </i> More Sub Links 3
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li><a title="More Links 3" href="#">
<i> </i> More Links 3
<i> </i> </a></li><li><a title="More Links 4" href="#">
<i> </i> More Links 4
<i> </i> </a></li><li><a title="More Links 5" href="#">
<i> </i> More Links 5
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li>
<i> </i> <a href="#">More Links
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a title="More Links 1" href="#">
<i> </i> More Links 1
<i> </i> </a></li><li>
<i> </i> <a class="drop" href="#" title="More Links 2">More Links 2
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul class="left"><li><a title="More Sub Links 1" href="#">
<i> </i> More Sub Links 1
<i> </i> </a></li><li><a title="More Sub Links 2" href="#">
<i> </i> More Sub Links 2
<i> </i> </a></li><li><a title="More Sub Links 3" href="#">
<i> </i> More Sub Links 3
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li><a title="More Links 3" href="#">
<i> </i> More Links 3
<i> </i> </a></li><li><a title="More Links 4" href="#">
<i> </i> More Links 4
<i> </i> </a></li><li><a title="More Links 5" href="#">
<i> </i> More Links 5
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li>
<i> </i> <a href="#">More Links
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul><li><a title="More Links 1" href="#">
<i> </i> More Links 1
<i> </i> </a></li><li>
<i> </i> <a class="drop" href="#" title="More Links 2">More Links 2
<i> </i> <!--[if IE 7]><!--></a><!--<![endif]-->
<i> </i> <!--[if lte IE 6]><table><tr><td><![endif]-->
<i> </i> <ul class="left"><li><a title="More Sub Links 1" href="#">
<i> </i> More Sub Links 1
<i> </i> </a></li><li><a title="More Sub Links 2" href="#">
<i> </i> More Sub Links 2
<i> </i> </a></li><li><a title="More Sub Links 3" href="#">
<i> </i> More Sub Links 3
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li><li><a title="More Links 3" href="#">
<i> </i> More Links 3
<i> </i> </a></li><li><a title="More Links 4" href="#">
<i> </i> More Links 4
<i> </i> </a></li><li><a title="More Links 5" href="#">
<i> </i> More Links 5
<i> </i> </a></li></ul>
<i> </i> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<i> </i> </li></ul></div>
</body>
</html>
Yeah!!! That did the trick.
I changed one line though: you added height: 25px;
I just removed it cause it was causing the drop down menus to look bigger then I wanted.[/quote]
I did have one more question regarding the _top: 1px;
What does this do?[/QUOTE]
<i>
</i><style type="text/css">
/*-----------------------------------------------------------
Pure CSS Drop-down Menu
Last Updated: 12/31/2007 by Justin Spegele
Author: Justin Spegele
Spegele Design and Development
http://www.spegele.com/
This code is free to modify and use for any purpose, as
long as proper credit is given to the original designer.
----------------------------------------------------------- */
/* Overarching Menu
-----------------------------------*/
.cssnav {
position:relative;
z-index:1000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
height: 25px;
overflow: visible;
width: 100&#37;;
background:#467aa7;
border:1px solid #fff;
}
.cssnav ul {
padding:0;
margin:0;
list-style-type:none;
}
.cssnav ul ul {
width:149px;
text-align:left;
}
/* Main list
-----------------------------------*/
.cssnav li {
float:left;
width:106px; /* This controls the width of the topnav */
position:relative;
background:none; /* Added to override style */
padding:0px; /* Added to override style */
}
/* First Level
-----------------------------------*/
/* Links */
.cssnav a, .cssnav a:visited {
display:block;
text-decoration:none;
color:#fefefe;
/*border:1px solid #fff;*/
border-left: 1px solid #fff;
/*border-width:0px 0px 1px 1px;*/
background:#467aa7;
line-height:25px;
height: 25px;
}
.cssnav li li a { border-bottom: 1px solid #fff;
}
/* Links on hover */
.cssnav a:hover, .cssnav ul ul a:hover{
color:#fff;
background:#80b0da;
}
.cssnav :hover > a, .cssnav ul ul :hover > a {
color:#fff;
background:#80b0da;
}
/* Second Level
-----------------------------------*/
/* Links */
.cssnav ul ul a, .cssnav ul ul a:visited {
background:#578bb8;
line-height:1em;
padding:5px 10px;
width:128px;
border-width:0 1px 1px 1px;
}
/* Links on hover */
.cssnav ul ul a:hover {
background:#80b0da;
}
/* Visibility */
.cssnav ul li:hover ul, .cssnav ul a:hover ul{
visibility:visible;
}
/* Third Level
-----------------------------------*/
/* Links */
.cssnav ul ul ul a, .cssnav ul ul ul a:visited {
background:#578bb8;
}
/* Links on hover */
.cssnav ul ul ul a:hover {
background:#80b0da;
}
/* Positioning */
.cssnav ul ul ul{
left:150px;
top:-1px;
}
.cssnav ul ul ul.left {
left:-150px;
}
/* Visibility */
.cssnav ul :hover ul ul{
visibility:hidden;
}
.cssnav ul :hover ul :hover ul{
visibility:visible;
}
/* All Sub Levels
-----------------------------------*/
/* Default visibility */
.cssnav ul ul {
visibility:hidden;
position:absolute;
top:26px;
left:0;
border-top:1px solid #fff;
}
/* IE Table
-----------------------------------*/
.cssnav table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
</style>
0.1.9 — BETA 6.17