Solved

Safari hover CSS links not working in ul or listitems

Posted on 2010-11-15
4
1,055 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
migrating to phpbb forum from vBulletin 4.2 3 95
CSS Won't Show Up On Drupal Omega Sub-Theme 1 35
html5 1 45
Excel to HTML macro with inserting lines 14 51
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…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

739 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