Css/java navbar problems in Firefox, works in IE

[diegoavaya]

I have tried numerous suggestions and different codes without a firm solution, so I am hoping someone can take a look at my work and pin point my problem.

I have designed a website with a css/javascript vertical navigation sidebar. It looks and functions perfectly in IE. But in FF, it appears to function but the buttons are piled on top of each other and barely visible.

The page is http://www.azureflame.com/index.php

Here is the css:

<style>
.sidenav ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px;
border-bottom: 1px solid #ccc;
}
 
.sidenav ul li{
position: relative;
}
 
.sidenav ul li ul{
position: absolute;
width: 170px;
top: 0;
visibility: hidden;
}
 
.sidenav ul li a{
border-style:solid;
border-color:#CAC29C;
border-left:1px; 
border-right:1px; 
border-top:1px;
border-bottom:0px;
display: block;
overflow: auto;
color: white;
text-decoration: none;
padding-left:5px; 
padding-right:5px; 
padding-top:1px; 
padding-bottom:1px;
background-color:#CAC29C;
background-repeat: repeat-x;
background-position: bottom left;
background-image:url('images/site/glossyback2.jpg');
}
 
.sidenav ul li a:visited{
color: white;
}
.sidenav ul li a:hover{
background-color: #CAC29C;
background-image: url('images/site/glossyback.jpg');
}
 
.sidenav .subfolderstyle{
background-color:#CAC29C;
background-repeat: repeat-x;
background-position: bottom left;
background-image:url('images/site/glossyback2.jpg');
}
 
html .sidenav ul li { 
float: left; height: 1%; 
}
html .sidenav ul li a { 
height: 1%; 
}
 
</style>

----------------------------------------------------
Here is the html:
[html]
div class="sidenav" style="width: 139; height: 53">
<ul id="sidenav">
<li><a href="http://www.azureflame.com/index.php"><font size="1">HOME</font></a></li>
<li><a href="http://www.azureflame.com/news.php"><font size="1">NEWS</font></a>
<ul><li>etc, etc...</li></ul>
</li><li><a href="http://www.azureflame.com/rss.php"><font size="1">RSS AND PODCASTS</font></a></li>
</ul>
</ul></div>[/html]
----------------------------------------------------
and here is the javascript:

var menuids=["sidenav"] 
 
function buildsubmenus(){
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]) 
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" 
        else //else if this is a sub level submenu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" 
    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--){ 
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}
 
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

[drhowarddrfine]

Though IE does what you want, Firefox is doing what you coded. The problem is IE. You have no doctype. Without a proper doctype, IE goes into quirks mode and acts like it's 1998 rather than like modern browsers such as Firefox. See the article about doctypes under Howtos above.

You have 61 html errors and 7 CSS errors.

You use a xhtml namespace but don't declare xhtml with a doctype.

[diegoavaya]

Ah-ha! Now we're getting somewhere :) Thank you for your reply. I'm already seeing results. I apparently have a whole lot of rescripting to do on the entire site, but your HOWTO articles are going to help the quality immensely!!! Funny how I always thought (until about 2 days ago) that IE was the superior browser - LOL!!!

[drhowarddrfine]

Yes. IE7 is 10 years behind current web standards while all other browsers are reasonably up to date. IE is the worst browser on the planet.