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)
