?
Solved

problem with a:hover in ie 8?

Posted on 2009-12-21
4
Medium Priority
?
837 Views
Last Modified: 2012-05-08
Hi all i have a nav menu in my page.

the css works fine in firefox, etc but in ie8 the following class isn't working?? any ideas why?

#nav
{
    position: relative;
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    height:50px;
    background-image:url('../images/nav_bg.png');
    background-repeat:repeat;
    cursor:pointer;
}

#nav ul
{
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    width:120px;
}

#nav li
{
    margin:0;
    padding:0;
}

#nav a
{
    -x-system-font:none;
    border-left:solid 1px #CCCCCC;
    color:#555555;
    display:block;
    font-family:sans-serif,arial;
    font-size:14px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    margin:0;
    padding:17px 5px 17px 5px;
    text-align:center;
    text-decoration:none;
}

#nav .logo
{
    float:left;
    padding: 0 0 0 10px;
    border:none;
    width:210px;
}

#nav ul a:hover:not(.logo)
{
    position: relative;
    border-left:solid 1px #666666;
    background-color:#000000;
    background: url('../images/nav_bg_mouse_over.png');
    background-repeat:repeat-x;
    color:#666666;
}

#nav ul ul
{
    display:none;
    border-top:solid 1px #666666;
    border-bottom:solid 1px #666666;
    background-color:#666666;
    background: url('../images/nav_bg.png');
    background-repeat:repeat-x;
}

#nav ul li:hover ul
{
    display: block;
}

#nav ul ul:hover
{
    border-right:solid 1px #666666;
}


html is

  <div id="nav">

    <div class="logo" onclick="window.location = 'index.asp'">
      <img src="./images/logo_small.png" alt="Home"/>
    </div>

    <ul>
      <li>
        <a href="personal.asp">Personal</a>

        <ul>
          <li>
            <a href="faqs.asp">FAQ's</a>
          </li>
        </ul>

      </li>
    </ul>

    <ul>
      <li>
        <a href="cost.asp">Costing</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="about_us.asp">about us</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="civil.asp">Civil</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="infant.asp">Infant</a>
      </li>
    </ul>

    <ul>
      <li>
        <a href="contact.asp">Contact Us</a>
      </li>
    </ul>

  </div>
0
Comment
Question by:flynny
4 Comments
 
LVL 15

Accepted Solution

by:
ludofulop earned 1400 total points
ID: 26095543
i presume that it's because of the css3's :not, which is not well supported yet... remove it and change the .logo class instead
0
 
LVL 7

Expert Comment

by:techsathish
ID: 26095548
Hi,

Can we have the link.
0
 
LVL 11

Assisted Solution

by:asafadis
asafadis earned 600 total points
ID: 26095608
@ludofulop is orrect.

Run this test in all your browsers... it should  shed some light, as well as break your heart!
http://www.css3.info/selectors-test/test.html
0
 

Author Comment

by:flynny
ID: 26103459
great thank you the link you provided showed this.

it wasd the not() in the css.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

616 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