Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Safari hover CSS links not working in ul or listitems

Posted on 2010-11-15
4
Medium Priority
?
1,067 Views
Last Modified: 2012-05-10
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?

 

0
Comment
Question by:bd9000
  • 3
4 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34141494
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.
0
 

Author Comment

by:bd9000
ID: 34141647
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

0
 

Accepted Solution

by:
bd9000 earned 0 total points
ID: 34141675
Ok,  Found out the REAL problem:

display: list-item;

is keeping the hover from working on Safari.

0
 

Author Closing Comment

by:bd9000
ID: 34179135
discovered that Safari does not support display: list-item (at least not for unordered lists)
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question