•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,097 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,330 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 854 | Replies: 2
 |
•
•
Join Date: Jul 2008
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hello all. new here as i'm in need of help!
I've made a sliding door dropdown menu that works perfect in FF Safari and co, but it won't work properly in internet explorer 6
the issue lays with the first level <li><a></a></li>
the <li> are floating left but in ie6 the block level <a> is bursting out of the float and stretching to 100%, the problem can be fixed by giving the <li> a width, but this defeats the object of the sliding door tabs and makes the tabs stretch onto two line which obviously isn't what i want.
I've also tried floating the <a> and <span> tags left, this makes the menu look right, but then the dropdown messes up in all browsers.
If anyone has any words of wisdom, that'd be great!!
HTML
CSS
I've made a sliding door dropdown menu that works perfect in FF Safari and co, but it won't work properly in internet explorer 6
the issue lays with the first level <li><a></a></li>
the <li> are floating left but in ie6 the block level <a> is bursting out of the float and stretching to 100%, the problem can be fixed by giving the <li> a width, but this defeats the object of the sliding door tabs and makes the tabs stretch onto two line which obviously isn't what i want.
I've also tried floating the <a> and <span> tags left, this makes the menu look right, but then the dropdown messes up in all browsers.
If anyone has any words of wisdom, that'd be great!!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li><a href="index.php" title="Home" style="color: #00C7B2;" ><span>Home</span></a></li>
<li><a href="brands.php" title="Shop by Brand"><span>Shop by Brand</span></a>
<ul>
<li><a href="brand-details.php?bId=185">Skinceuticals</a></li>
<li><a href="brand-details.php?bId=187">ila-spa</a></li>
<li><a href="brand-details.php?bId=188">Juice Beauty</a></li>
<li><a href="brand-details.php?bId=189">Spiezia</a></li>
<li><a href="brand-details.php?bId=190">Jane Iredale</a></li>
<li><a href="brand-details.php?bId=191">Medik8</a></li>
<li><a href="brand-details.php?bId=192">Skin.ny</a></li>
<li><a href="brand-details.php?bId=194">Fake Bake</a></li>
<li><a href="brand-details.php?bId=195">This Works</a></li>
</ul>
</li>
<li><a href="products.php?catId=25" title="Skincare"><span>Skincare</span></a>
<ul><li><a href="products.php?catId=33" title="Cleansers & Toners">Cleansers & Toners</a></li>
<li><a href="products.php?catId=34" title="Exfoliants & Peels">Exfoliants & Peels</a></li>
<li><a href="products.php?catId=35" title="Eyes and Lips">Eyes and Lips</a></li>
<li><a href="products.php?catId=37" title="Treatments">Treatments</a></li>
<li><a href="products.php?catId=38" title="Suncare & Tanning">Suncare & Tanning</a></li>
<li><a href="products.php?catId=108" title="Kits">Kits</a></li>
<li><a href="products.php?catId=109" title="Moisturise">Moisturise</a></li>
</ul>
</li>
<li><a href="products.php?catId=26" title="Colour"><span>Colour</span></a>
<ul><li><a href="products.php?catId=31" title="Face">Face</a></li>
<li><a href="products.php?catId=32" title="Bronzing / Highlighting">Bronzing / Highlighting</a></li>
<li><a href="products.php?catId=39" title="Cheeks">Cheeks</a></li>
<li><a href="products.php?catId=40" title="Eyes">Eyes</a></li>
<li><a href="products.php?catId=41" title="Lips">Lips</a></li>
<li><a href="products.php?catId=42" title="Beauty tools">Beauty tools</a></li>
</ul>
</li>
<li><a href="products.php?catId=27" title="Bath & Body"><span>Bath & Body</span></a>
<ul><li><a href="products.php?catId=60" title="Bathing">Bathing</a></li>
<li><a href="products.php?catId=61" title="Bodycare">Bodycare</a></li>
<li><a href="products.php?catId=62" title="Relax">Relax</a></li>
</ul>
</li>
<li><a href="products.php?catId=28" title="Mens"><span>Mens</span></a>
<ul><li><a href="products.php?catId=63" title="Skincare">Skincare</a></li>
<li><a href="products.php?catId=64" title="Shaving">Shaving</a></li>
<li><a href="products.php?catId=65" title="Bath and body">Bath and body</a></li>
</ul>
</li>
<li><a href="products.php?catId=29" title="Gifts"><span>Gifts</span></a>
</li>
</ul>
</body>
</html>CSS
#nav {
height: 30px;
background: url(img/nav-bg.png) repeat-x;
margin-bottom: 20px;
}
#nav li { /* all list items */
display: block;
zoom: 1;
float: left;
background-color: #fff;
}
#nav a {
display: block;
zoom: 1;
color: #AAA38E;
text-transform: uppercase;
background: url(img/nav-tab-right.png) no-repeat top right;
}
#nav span {
display: block;
zoom: 1;
height: 17px;
background: url(img/nav-tab-left.png) no-repeat top left;
padding: 13px 12px 0 12px;
}
#nav a:hover {
color: #00C7B2;
background-position: bottom right;
text-decoration: none;
}
#nav a:hover span {
display: block;
background-position: bottom left;
}
#nav li ul { /* second-level lists */
position: absolute;
z-index: 1;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
width: 190px;
line-height: 18px;
background: url(img/nav-dropdown-bg-bottom.png) no-repeat left bottom;
padding: 0 0 8px 0;
margin: 0;
}
#nav li ul li {
float: none;
background: url(img/nav-dropdown-bg.png) repeat-y left;
padding: 0 1px 0 2px;
}
#nav li ul li a {
display: block;
height: auto;
background: none;
padding: 2px 8px 0 8px;
margin: 0 4px;
}
#nav li ul li a:hover {
color: #fff;
background-color: #00C7B2;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
•
•
Join Date: Feb 2007
Posts: 1
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hey -
I don't have a solution, but I'm having the same problem. I've distilled it down to a bare-bones test case, and it seems to the be the height declaration on the <a> tags that is causing problems. For some reason, assigning a height to the <a> tags causes IE6 to behave as if you'd set the width to 100%.
I see you posted this a month ago - have you found a solution?
I don't have a solution, but I'm having the same problem. I've distilled it down to a bare-bones test case, and it seems to the be the height declaration on the <a> tags that is causing problems. For some reason, assigning a height to the <a> tags causes IE6 to behave as if you'd set the width to 100%.
I see you posted this a month ago - have you found a solution?
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Other Threads in the HTML and CSS Forum
- Previous Thread: printing HTML with colours ?
- Next Thread: White Space in FF not IE
