IE and Firefox Issues with Vertical Navigation Bar

[jonbooster]

Hi,

I just created metallicatshirts.com and I am having trouble with the left hand vertical navigation menu in Internet Explorer and Firefox. After each link is clicked while using IE and Firefox, the list element shifts to the right and the navigation bar does not look consistent. This does not happen when I use Chrome and Safari and I get what I want. From doing some research on-line, I believe it may be the a:visited CSS rule in my CSS file that is causing the problem but I am not sure. I am not sure how to adjust this CSS code to accommodate IE and Firefox. Below is my CSS rules for the navigation bar. Any suggestions are much appreciated.

Thanks.

.ulNavBarVertical {
/* position:relative; */
padding:0;
margin:0;
width:0;

}
.ulNavBarVertical li {
list-style-type:none;
margin:0 0 0.25em 0;

}
.ulNavBarVertical a, .ulNavBarVertical a:visited {
position:relative;
display:block;
width:143px;
/*border:1px solid #333333;*/
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
text-align:left;
text-decoration:none;
/*background:#107AC0; */
color:#333333; /* ADDED */
padding-top: 0.25em;
padding-left: 5px;
padding-bottom: 0.25em;

/*padding:5px; */
}

.ulNavBarVertical a:hover {
color:#107AC0;
background-color: #FFFFFF;
background-image: none;

}
.ulNavBarVertical a span {
display:none;

}
.ulNavBarVertical a:hover span {
display:block;
position:absolute;
left:70px;
top:0;
text-align:left;
padding:0.5em;
width:24em;
background-color:#FFFFFF;
color:#333333;
border:1px solid #107AC0;

}
.ulNavBarVertical img {
border:1px solid #000;
float:left;
margin:0.25em 1em 0.5em 0;

}
.ulNavBarVertical a:hover span:first-line {
font-weight:bold;
font-size:1.2em;
color:#107AC0;

}

[Mottie]

From a quick look, the “ulNavBarVertical” has empty list items… how is it populated and shown? There isn’t a way for me to see the problem you described.

[takeiteasy04]

I don’t see the problem you’re referring to…

However, you’ll probably want to run the site through the validator. I saw a bunch of errors when I was trying to test.

For instance, when I view source’d it, the first things I saw were closing body and html tags. Validation has always been a huge help for me in fixing little quirks. Hope it can be for you too!

[Author]

Posts