[solved]ie6 Hover Bug -- Mysterious Padding?

[glopal]

Final Solution: Click HereI have this vertical css menu that works using unordered lists. It uses a little javascript too.Anyways, I've been trying to get it 100% working in IE6, and I'm close, but I can't figure out this last little bug.If I have no sub-levels, it works fine. Example:

<div class="sidebarmenu">  <ul id="sidebarmenu1">  <li><a href="index.html">Home </a> </li>  <li><a href="philosophy.html">Philosophy</a> </li>  </ul></div>

Once you add another level, it causes the problem. Example:

<div class="sidebarmenu">  <ul id="sidebarmenu1">  <li><a href="index.html">Home </a> </li>  <li><a href="philosophy.html">Philosophy</a> </li>  </ul></div>

The menu works, but when you hover over the menu item with the sub levels, it adds a space below the parent item, it looks like padding, but I dont think it is.Another thing I noticed, say I hit refresh, it initially loads the menu with the space under the items, but then corrects it self a second later. I removed the javascript to see how the menu would respond... it doesnt correct itself, its as if the javascript fixes it (sorta).So without the javascript, the page looks like the first image above. With it, it loads to the first, then corrects to the second.Its not my javascript, I understand a decent amount of it, but not enough to begin to figure out whats going on.Any ideas? Here is all my code.Menu CSS

/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 160px; /* Main Menu Item widths */border-bottom: 2px solid #778;} .sidebarmenu ul li{position: relative;}/* Top level menu links style */.sidebarmenu ul li a{display: block;overflow: auto; /*force hasLayout in IE7 */* height:1%;color: white;text-decoration: none;padding: 6px;border-top: 2px solid #778;border-right: 2px solid #778;border-left: 1px solid #778;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #2d49c4; /*012D58background of tabs (default state)*/}.sidebarmenu ul li ul  a:link, .sidebarmenu ul li ul a:visited, .sidebarmenu ul li ul a:active{background-color: #000097; /*012D58background of tabs (default state)*/}.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: black;}.sidebarmenu ul li ul a:hover{background-color: black;}/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: 0;visibility: hidden;}.sidebarmenu a.subfolderstyle{background:url('../images/right.gif') no-repeat 97% 50%;}

Javascript

//Nested Side Bar Menu (Mar 20th, 09)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction initsidebarmenu(){for (var i=0; i<menuids.length; i++){  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")	for (var t=0; t<ultags.length; t++){	ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item  else //else if this is a sub level submenu (ul)	ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it	ultags[t].parentNode.onmouseover=function(){	this.getElementsByTagName("ul")[0].style.display="block"	}	ultags[t].parentNode.onmouseout=function(){	this.getElementsByTagName("ul")[0].style.display="none"	}	}  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars  ultags[t].style.visibility="visible"  ultags[t].style.display="none"  }  }}if (window.addEventListener)window.addEventListener("load", initsidebarmenu, false)else if (window.attachEvent)window.attachEvent("onload", initsidebarmenu)

[dsonesuk]

this usually is the result on how ie6 renders padding the usual fix is find the height and reduce this by the padding top, and bottom. example: height: 30px; padding: 6px;(top +bottom =12) height should be height: 18px; for IE6.use !important hack to keep original height for other browsers (IE6 won't recognise height with !important and so use the next).height: 30px !important; height 18px:

[glopal]

this usually is the result on how ie6 renders padding the usual fix is find the height and reduce this by the padding top, and bottom. example: height: 30px; padding: 6px;(top +bottom =12) height should be height: 18px; for IE6.use !important hack to keep original height for other browsers (IE6 won't recognise height with !important and so use the next).height: 30px !important; height 18px:

No, that didnt seem to work.

[justsomeguy]

* height:1%;What's that asterisk doing there?For this style:.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: 0;visibility: hidden;}instead of using visibility, use display: none. Then you can remove this line:ultags[t].style.visibility="visible"

[glopal]

* height:1%;What's that asterisk doing there?For this style:.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: 0;visibility: hidden;}instead of using visibility, use display: none. Then you can remove this line:ultags[t].style.visibility="visible"

Removed some unnecessary code, thanks, but didnt fix it. BUT, I was fooling around, and I sorta fixed it.I kind of see it like this:Without the css, the ul looks like this.

• Philosophy
• Services
  • General

So the General is under Services, so when General is shown, even though it goes to the right, IE6 puts something under Services.That above theory is more than likely wrong, but it got me to try the following.So how do you prevent something from going under....sidebarmenu ul li{position: relative;float:left;}It works in IE6! The thing is though, that is messes up all the other browsers. So I tryed...

<!--[if IE 6]><style type="text/css">.sidebarmenu ul li{position:relative;float:left;}</style><![endif]-->

... but it doesn't work... not really sure why. Oh, and I got rid of the *.

[dsonesuk]

try this/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 160px; /* Main Menu Item widths */border-top: 1px solid #778;background-color: #778;}.sidebarmenu ul li{position: relative;border-bottom: 1px solid #778; /*MUST KEEP to prevent padding effect in IE6*/}/* Top level menu links style */.sidebarmenu ul li a{display: block;overflow: hidden; /*force hasLayout in IE7 */height:16px;color: white;text-decoration: none;padding: 6px; border-right: 2px solid #778;border-left: 1px solid #778;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #2d49c4; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li ul a:link, .sidebarmenu ul li ul a:visited, .sidebarmenu ul li ul a:active{background-color: #000097; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: black; }.sidebarmenu ul li ul a:hover{background-color: black; }/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: 0;visibility: hidden;}.sidebarmenu a.subfolderstyle{background:url('../images/right.gif') no-repeat 97% 50%;}

[glopal]

try this.sidebarmenu ul li{position: relative;border-bottom: 1px solid #778; /*MUST KEEP to prevent padding effect in IE6*/}

Ya, that does seem to work. Though the menu doesn't look very clean because of it. Perhaps with some tinkering you could make it work, but I'm happy with my fix above. Oh, and I got the conditional comment to work... I have a standalone IE6 for testing, but the version number says 7.

[dsonesuk]

i've made the folowing changes, and checked in IE6, IE7, Opera, FF and Chrome, up to 2 sublevel menus and they look the same..sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 160px; /* Main Menu Item widths */border-top: 1px solid #778;background-color: #778;}.sidebarmenu ul li{position: relative;border-bottom: 2px solid #778; /*MUST KEEP to prevent padding effect in IE6*/}/* Top level menu links style */.sidebarmenu ul li a{display: block;overflow: hidden; /*force hasLayout in IE7 */height: auto;width: 145px;color: white;text-decoration: none;padding: 6px; border-right: 2px solid #778;border-left: 1px solid #778;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #2d49c4; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li ul a:link, .sidebarmenu ul li ul a:visited, .sidebarmenu ul li ul a:active{background-color: #000097; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: black;}.sidebarmenu ul li ul a:hover{background-color: black; }/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: -1px;visibility: hidden; }.sidebarmenu a.subfolderstyle{background:url('../images/right.gif') no-repeat 97% 50%;}

[glopal]

Bravo! Very close. I'm thinking I'm going to adopt your method. One tiny glitch though, that I have noticed, I guess you dont see this on yours.For...

/* Top level menu links style */.sidebarmenu ul li a{display: block;height: auto;width: 145px;color: white;text-decoration: none;padding: 6px;border-right: 2px solid #778;border-left: 1px solid #778;}

width: 145px;width: 160px;I could fix this easy enough with a conditional comment, but I feel we're really close to getting it.

[dsonesuk]

is your page set as<!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">if not, this is the problem.replace <html> with above, or make the necessary changes yourself for plain html page.

[glopal]

is your page set as<!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">if not, this is the problem.replace <html> with above, or make the necessary changes yourself for plain html page.

Ya, I have all of that, but I had this above it:

<?xml version="1.0" encoding="utf-8"?>

Took that off and it works. But you need that line to validate... so I dunno.

[justsomeguy]

You can use HTML 4 strict instead of XHTML, HTML doesn't require the XML preamble. IE sees anything before the doctype, including apparently the XML preamble, as incorrect and immediately puts IE into quirks mode instead of strict mode. In quirks mode it uses its own box model like you're seeing, in strict mode it uses the same box model as Firefox.

[dsonesuk]

ok try this<!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" />

[Ingolme]

What do people see so special in XHTML?HTML 4.01 Strict is much more "correct" than XHTML 1.0 Transitional.

[dsonesuk]

Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Strict, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam, Spam.give it a rest ingolme for god sake!

[glopal]

Awesome, its working 100%. Here's all the code. (Made some small changes)CSS

/* Nested Vertical Menu */.sidebarmenu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 160px; /* Main Menu Item widths */border-top: 1px solid #778;background-color: #778;}.sidebarmenu ul li{position: relative;border-bottom: 2px solid #778; /*MUST KEEP to prevent padding effect in IE6*/}/* Top level menu links style */.sidebarmenu ul li a{display: block;width: 145px;color: white;text-decoration: none;padding: 6px;border-right: 2px solid #778;border-left: 1px solid #778;}.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{background-color: #2d49c4; /*012D58background of tabs (default state)*/ }.sidebarmenu ul li ul a:link, .sidebarmenu ul li ul a:visited, .sidebarmenu ul li ul a:active{background-color: #000097; /*012D58background of tabs (default state)*/}.sidebarmenu ul li a:visited{color: white;}.sidebarmenu ul li a:hover{background-color: black;}.sidebarmenu ul li ul a:hover{background-color: black;}/*Sub level menu items */.sidebarmenu ul li ul{position: absolute;width: 160px; /*Sub Menu Items width */top: -1px;display:none;}.sidebarmenu a.subfolderstyle{background:url('../images/right.gif') no-repeat 97% 50%;}

Javascript

//Nested Side Bar Menu (Mar 20th, 09)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction initsidebarmenu(){for (var i=0; i<menuids.length; i++){  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")	for (var t=0; t<ultags.length; t++){	ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item  else //else if this is a sub level submenu (ul)	ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it	ultags[t].parentNode.onmouseover=function(){	this.getElementsByTagName("ul")[0].style.display="block"	}	ultags[t].parentNode.onmouseout=function(){	this.getElementsByTagName("ul")[0].style.display="none"	}	}  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars  ultags[t].style.display="none"  }  }}if (window.addEventListener)window.addEventListener("load", initsidebarmenu, false)else if (window.attachEvent)window.attachEvent("onload", initsidebarmenu)

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" />

Thanks guys!

[justsomeguy]

I'm glad you got it working glopal.What's the point of that last post dsonesuk? Ingolme is correct - it's better to use HTML 4 strict than XHTML 1 transitional. In fact, I think it's better to use HTML over XHTML regardless. We welcome you answering questions on this forum, but you need to act in a respectful manner towards other people. If you have something to say, say it, if you have a point to make, make it, but don't just spam the place with meaningless posts. You didn't address Ingolme's question any further than essentially telling him to shut up. Like I said, we welcome your help, but if those are the type of posts we can expect from you it would probably be better if you refrain from posting.