Solved

Safari hover CSS links not working in ul or listitems

Posted on 2010-11-15
4
1,057 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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)
Suggested Courses

617 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