Safari - mouseover highlight menu

[Sliight]

I guess I'd like to ask two questions that have to do with browsers.

Question 1: I'm using two lists for menus on the right and left of my screen. When you place the mouse over any list item, it will change to a darker color essentiall showing the link. This works in IE, FF, and Opera, but it will not work in Safari. Does anyone know a work around for this, or am I just SOL?

Please view my site for the example, assuming you peek with Safari ;)
http://www.usejeff.com

Question 2: This question has to do with both of the lists referenced above. In IE it works perfectly, and the alignment of the list items is correct as well. The entire block his highlighted on mouseover from the left edge to the right edge. However, in FF and Opera the menu text appears to be indented, and it also does not highlight the entire block from the left to right edges.

I'm going to post the code for the left menu, and all of my CSS as well for reference.

Thank you!!

After previewing it the .tl decendant has a 0 top, and 30 left and right px margins, this is placed because of the roundcorners. Not sure if this has any effect on it or not...

HTML in page:

<div class="left_box">
<div class="left_top"><div></div></div>

<div id="tl"><span>Local Partners</span>
</div>


<div id="sidenav">

<ul id="sidenavigation">

<!--#include file="sidenavigation.txt" -->

<li><span> </span></li>
</ul>

</div>

<div class="left_bottom"><div></div></div>
</div>

sidenavigation.txt code:

<li><a href="/coming_soon.shtml"><span>Partner 1</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 2</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 3</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 4</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 5</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 6</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 7</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 8</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 9</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 10</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 11</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 12</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 13</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 14</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 15</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 16</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 17</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 18</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 19</span></a></li>
<li><a href="/coming_soon.shtml"><span>Partner 20</span></a></li>


CSS code:

.left_box {
position: absolute;
top: 165px;
font-family: Times, "Times New Roman", serif;
font-size: 1.1em;
color: #ffffff;
background-color: #ed8001;
width: 11%;
text-align: center;
}
.left_top div {
background: url(images/roundedcornr_944392_tl.png) no-repeat top left;
}

.left_top {
background: url(images/roundedcornr_944392_tr.png) no-repeat top right;
}
.left_bottom div {
background: url(images/roundedcornr_944392_bl.png) no-repeat bottom left;
}
.left_bottom {
background: url(images/roundedcornr_944392_br.png) no-repeat bottom right;
}

.left_top div, .left_top,
.left_bottom div, .left_bottom {
width: 100%;
height: 30px;
font-size: 1px;
}
.tl { margin: 0 30px; }

#tl {
position: relative;
z-index: 5;
height: 15px;
background-repeat: no-repeat;
left: 0px;
top: -10px;
color: #ffffff;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
font-size: .9em;}

#sidenav {
color: #22556d;
display: block;
background-color: #fadbb7;
text-align: center;
margin-top: -10px;
font-size: .8em;
margin-left: 0em;
background-position: 0%;}

#sidenav a:link {
text-decoration: none;
color: #22556d;}

#sidenav a:visited {
text-decoration: none;
color: #22556d;}

#sidenav a:hover {
text-decoration: none;
color: #ffffff;
background-color: #f5ba75;
background-position: 0em;
display: block;
margin: 0em;}

#sidenav ul {
display: block;
list-style-type: none;
margin-left: 0px;
}

No css for #sidenavigation div.

[jscheuer1]

Try (for 1):


#sidenav a span:hover {
text-decoration: none;
color: #ffffff;
background-color: #f5ba75;
background-position: 0em;
display: block;
margin: 0em;}

and for 2:


#sidenav ul {
display: block;
width:100%;
list-style-type: none;
margin-left: 0px;
padding-left:0;
}

[Sliight]

Well your code fixed the spanning to the edges problem. Now all browsers have the text placed properly, and all but safari block out the background to each border.

I just can't get safari to highlight the list text at all. This is strange because safari will however change background colors in my top menu. I'm not sure why it's not doing it... guess I'll just have to dabble some more.

If you have any more ideas on how to get safari to highlight the background on hover please let me know. It won't even change the text color on hover either.

Thank you!

[jscheuer1]

#sidenav a:link span, #testimonials a:link span {
display:block;
}
#sidenav a:hover span, #testimonials a:hover span {
text-decoration: none;
color: #ffffff;
background-color: #f5ba75;
margin:0;
}

Tested and works here. The key was to get the span big enough (display:block) to begin with, so that the hover event, when it happened, would be registered.

[Sliight]

Sweet you rock... it works! :)

Thank you!

[Sliight]

That is the strangest thing... I'm really hoping that it's my safari browser. It was working, then it stopped. I deleted code that became redundant from the changes you gave me. Then it worked again... and now, it doesn't!

Baffling... would someone mind looking at http://www.usejeff.com using the safari browser and please tell me if the menus for partners, and testimonials have a highlight hover effect when you mouse over them? They should block dark orange, and the text should become white.

I'm really hoping it's just a glitch in my computer or browser. Really really hoping..

Thanks!

[Sliight]

It was a Safari bug... I cleared the cache, and rebooted. Works now.

Things really look good in that browser, but there are enough sites that don't work to make me avoid it. Hope they get it all dialed in...

Thanks!