?
Solved

Safari hover CSS links not working in ul or listitems

Posted on 2010-11-15
4
Medium Priority
?
1,069 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

600 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