Link to home
Start Free TrialLog in
Avatar of bd9000
bd9000

asked on

Safari hover CSS links not working in ul or listitems

I have a simple unordered list with anchors inside each listitem, but can't seem to style the HOVER in CSS.  Every browser i've tried works great except Safari 4 & 5.
Safari completely ignores the a:hover specification (as if it did not exist) when it's in a container.

<ul class="menu">
<li><a href="whatever">whatever</a></li>
</ul>

the CSS markup:
.menu
{
      padding: 0px;
      list-style-type: none;
      margin: 5px 0px 5px 0px;
      list-style-position: inside;
      font-size: 13px;
}
.menu li
{
      margin: 2px 0px 5px 3px;
      display: list-item;
      list-style: none;
      list-style-position: inside;
      text-indent: 11px;
      background-position: left center;
      background-image: url('images/diaYB.gif');
      background-repeat: no-repeat;
}
.menu li a
{
      color: #FFFFFF;
      background-color: #285685;
      text-decoration: none;
      display: inline;
}
.menu li a:hover
{
      color: #285685;
      background-color: #FFFFFF;
      text-decoration: none;
      display: list-item;
      text-indent: 11px;
      background-position: left center;
      background-image: url('images/diaGW.gif');
      background-repeat: no-repeat;
      margin-right: 3px;
}



Safari does not recognize ".menu li a:hover", but it recognizes everything else.
Opera, IE 7,8, FF3.5 all work perfectly.
It looks like Safari can't handle the cascading part of CSS

any ideas? hacks?

 

Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

remove the class MENU to test safari -- I think you will find it works.  I know you want the class, but you should try it to test.  If it doesn't see the hover without the class, I would be very surprised.
Avatar of bd9000
bd9000

ASKER

that makes all the anchors formatted, and doesn't work anyway in Safari.

I'm going to have to style the individual li's instead. safari does work when I do something like (which works in all browsers so far):

.litm {
 
}
.litm a {
      color: #654321;
}
.litm a:hover
{
      color: #123456;
      background-color: #CCCCCC;
}


<ul>
      <li class="litm"><a href="#">This will hover in Safari</a></li>
      <li class="litm"><a href="#">Another list item</a></li>
</ul>



Safari doesn't seem to support nested specifiers beyond 2

ASKER CERTIFIED SOLUTION
Avatar of bd9000
bd9000

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bd9000

ASKER

discovered that Safari does not support display: list-item (at least not for unordered lists)