Jump to content

IE6 problem :: Labels inside nested list

elementalgrace

By elementalgrace
in HTML/XHTML

Recommended Posts

elementalgrace Member

elementalgrace

Posted
Posted

Hi,I am having an issue in (surprise surprise) Internet Explorer 6 and was hoping someone could give me any ideas as to why this is happening.I have a CSS only dropdown menu, which is a modified version of one used on CSS play. When used as it is supposed to be (as a dropdown menu) there are no problems. The problem occurs when I have to do something a bit odd with it. In the submenu, I need to incorporate a form. I have it so that each of the label/form elements are set within each li and in all the modern browsers it works fine but in IE6 if you hover over the label the entire submenu disappears! I can't for the life of me work out why this would be.I only have the code locally so I can't post a link to it (sorry) but it is below: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" xml:lang="en"><head>     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssreset/reset-min.css" />    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssfonts/fonts-min.css" />    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssgrids/grids-min.css" />    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0pr1/build/cssbase/base-min.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /><!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /><![endif]--><title>XXXXXXXXXXX</title><meta http-equiv="Content-language" content="en-gb" />   </head><body><div id="all"><!--HEADER--><div id="header"><!--MENU--><div class="multi-level" style="margin-right:20px;"><ul class="menu">	<li class="top "><a href="" id="Account" class="top_link" title="ACC">ACC<!--[if IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="sub">		    <li><span class="title">XXXX</span></li>			<li><a href="">YYYY</a></li>			<li><a href="">ZZZZ</a></li>			<li><a href="">VVVV</a></li>		</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li class="top"><a href="" id="Admin" class="top_link"><span>Admin</span><!--[if IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="sub">		<li><span class="title">Admin</span></li>			<li><a href="">AAAA</a></li>			<li><a href="">BBBB</a></li>			<li><a href="">CCCC</a></li>			<li><a href="">DDDD</a></li>			<li><a href="">EEEE</a></li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li class="top"><a href="" id="Help" class="top_link"><span>Help</span><!--[if IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="sub">		<li><span class="title">FFFF</span></li>			<li><a href="">GGGG</a></li>			<li><a href="">HHHH</a></li>			<li><a href="">JJJJ</a></li>			<li><a href="">KKKK</a></li>			<li><a href="">LLLL</a></li>			<li><a href="">MMMM</a></li>		</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li class="top"><a href="" id="LogOut" class="top_link" alt="Log Out" title="Log Out"><span>Log Out</span></a></li></ul></div><!--END: MENU--><!--FORM--><div class="multi-level" style="float:left; margin-left:10px;"><ul class="menu">	<li class="top "><a href="" id="ctl00" href="setfilters.aspx" class="top_link" title="Form">Form<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><span class="title">Form</span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier1" id="ctl00__cpanel_lblTier1">Label 1</label><select name="ctl00$_cpanel$ddlTier1" id="ctl00__cpanel_ddlTier1"><option value=""></option></select></span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier2" id="ctl00__cpanel_lblTier2">Label 2</label><select name="ctl00$_cpanel$ddlTier2" id="ctl00__cpanel_ddlTier2"><option value=""></option></select></span></li><li><span class="data"><label for="ctl00__cpanel_ddlTier3" id="ctl00__cpanel_lblTier3">Label 3</label><select name="ctl00$_cpanel$ddlTier3" id="ctl00__cpanel_ddlTier3"><option value=""></option></select></span></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div><!--END: FORM--></div><!--CONTENT--><div class="content-mid"><div class="content-top"></div><div id="content"><h1>Lorem Ipsum Sit dolor amet</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu arcu, eleifend sit amet, accumsan a, laoreet sed, nunc. Aliquam eleifend pede eu metus. Nunc mattis, nisi eu tincidunt pretium, nibh erat ultrices nibh, eget malesuada nisi turpis et eros. Etiam augue nisl; pharetra vitae, consectetuer ornare; pellentesque sit amet, odio. Aenean sed massa eu sem vestibulum bibendum? <a href="#">Praesent id nulla eu magna tincidunt ullamcorper</a>. In consequat neque eu nibh. Nunc dapibus molestie odio. Sed in libero. Etiam arcu eros, vehicula ut, lobortis at, tincidunt non, libero. Nullam pede lacus, pretium ac, mollis ut, eleifend sit amet, quam. Nam sit amet dolor. Morbi eleifend volutpat arcu. In sit amet mauris. Nulla vel sapien id magna tempus malesuada. Fusce fermentum lectus imperdiet mauris. Fusce dolor orci, lobortis non, lobortis nec, tempor eu; velit. Suspendisse viverra augue eget dui.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu arcu, eleifend sit amet, accumsan a, laoreet sed, nunc. Aliquam eleifend pede eu metus. Nunc mattis, nisi eu tincidunt pretium, nibh erat ultrices nibh, eget malesuada nisi turpis et eros. Etiam augue nisl; pharetra vitae, consectetuer ornare; pellentesque sit amet, odio. Aenean sed massa eu sem vestibulum bibendum? Praesent id nulla eu magna tincidunt ullamcorper. In consequat neque eu nibh. Nunc dapibus molestie odio. Sed in libero. Etiam arcu eros, vehicula ut, lobortis at, tincidunt non, libero. Nullam pede lacus, pretium ac, mollis ut, eleifend sit amet, quam. Nam sit amet dolor. Morbi eleifend volutpat arcu. In sit amet mauris. Nulla vel sapien id magna tempus malesuada. Fusce fermentum lectus imperdiet mauris. Fusce dolor orci, lobortis non, lobortis nec, tempor eu; velit. Suspendisse viverra augue eget dui.</p></div><!--FOOTER--><div id="footer"><div class="left">Segala Certified<br />Copyright 2008. All rights reserved.</div><div class="right"><br /><a href="#">T & Cs</a> :: <a href="#">Accessibility</a> :: <a href="#">Privacy</a></p></div><div class="clear"></div></div><!--END: FOOTER--><div class="content-bottom"></div></div></div></body></html>

CSS:

body {margin:0; padding:0; color:#003e7e; font-family:Arial, Sans-Serif;}/*ALL*/#all{width:990px;  background-color:#fff; margin:auto; }h1{font-size:125%;}h2{}h3{}h4{}p{line-height:140%; font: small arial, sans-serif; }a{color:#505050; }a:hover{color:#888; text-decoration:none;}/*HEADER, NAV & SELECT DATA*/#header{background: #fff url(../images/header.png) no-repeat; position:relative; width:990px; height:130px;}/*MENU*/.multi-level {height:2em; position:relative; z-index:100; float:right; margin-top:95px; }.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif; }.menu li.top {display:block; float:left; position:relative; font-size:small; }.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}.menu th, .menu td{border:0;}.menu li.top a.top_link {display:block; float:left;  color:#fff; margin: 0 10px 0 15px; height:40px; }.menu li a{text-decoration:none;}.menu a:hover {visibility:visible;} /* for IE6 */.menu li:hover { position:relative; z-index:200;} /* for IE7 */.menu ul, .menu :hover ul ul, .menu :hover ul :hover ul ul,.menu :hover ul :hover ul :hover ul ul,.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}.menu :hover ul.sub {left:-5px; top:20px; background: #fff; padding:2px 2px 0 2px; border:1px solid #e4e4e4; width:165px; height:auto;}.menu :hover ul.sub li {display:block; height:5%; position:relative; float:left; width:159px;  border-bottom:2px solid #fff;text-align:left;}.menu :hover ul.sub li span.title {display:block; font-size:small; height:5%;width:159px; height:5%; color:#fff; background:#6385ac url(../images/menutitle_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li span.data {display:block; font-size:small; height:5%;width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li a {display:block; font-size:small; height:5%;width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li span.selectdata {display:block; font-size:small; width:159px; height:5%; color:#003e7e; background: #dde5ee url(../images/menu_bg.png) repeat-x bottom left; padding:3px; text-decoration:none; }.menu :hover ul.sub li a:hover {background:#aec1cc; color:#000;}/*SELECT DATA*/.menu :hover ul.sub li label{display:block;}#ctl00_cpanel input, #ctl00_cpanel select{width:95%;}.cp_month, .cp_year{width:49.5%; float:left;}.multi-level label{font-weight:normal; font-size:small; color:#000066; float:left; padding-left:5px;}.multi-level input, .selectdata select{font-size:small; color:#000066; border:1px solid #000066;}#ctl00__cpanel_cp_row_tier1, #ctl00__cpanel_pnlFunction, #ctl00__cpanel_pnlCostCentre, #ctl00__cpanel_pnlMonthYear, .cp_year, #cp_row_recs{padding-bottom:5px;}.multi-level .button{background:#6385ac url(../images/menutitle_bg.png) repeat-x bottom left; color:#fff; font-size:small; border:1px solid white;}/*CONTENT*/.content-top{background: url(../images/content-top.png) no-repeat !important;  width:990px; height:14px; margin:0; padding:0; }.content-mid{background: #fff url(../images/content-mid.png) repeat-y; width:990px; }.content-bottom{background: #fff url(../images/content-bottom.png) no-repeat !important; width:990px; height:26px;}#content{min-height:300px; width:940px; border: 1px solid #fff; margin:auto; }/*FOOTER*/#footer{background: #fff url(../images/footer.png) no-repeat; width:959px;margin:auto;margin-left:14px; padding-top:35px; font: x-small arial, sans-serif; }#footer .left{color:#505050; padding:0; margin:0; width:48%; float:left; padding-left:10px;text-align:left;}#footer .right{padding:0; margin:0;width:48%; float:right; text-align:right; padding-right:10px;}#footer a{color:#505050; text-decoration:underline;}#footer a:hover{text-decoration:none;}/*TABLES*//*FORMS*//*MISC*/.clear{clear:both; height:1px;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...