IE compatibility problem

Discussion in 'CSS' started by nisitha.p, Feb 5, 2008.

0
  1. #1
    Hello Everybody!
    i have been build one template using css.which is working fine in Mozilla and is not working in IE. I don't know what mistake i done. Can anyone help me please.

    HTML Code

    <div id="menu">
    <div class="nav" id="nav">
    <ul id="pop">
    <li class="liclass"><a href="index.php">HOME</a></li>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="">Overview</a></li>
    <li><a href="">List</a></li>
    </ul>
    </li>
    <li><a href="#">About Us</a></li>
    </ul>
    </div>
    </div>

    CSS Code


    #menu
    {
    background-color: #000000;
    width:200px;
    margin:4px 4px 0px 0;
    font-weight: bold;
    font-size: 16px;
    padding: 10 0 0 0;
    float: left;
    height:200px;
    line-height:24px;
    color: #FFFFFF;
    background-position: bottom;
    }
    #menu a
    {
    color: #FFFFFF;
    }
    .nav
    {
    font-family: arial, sans-serif;
    width:auto;
    height:auto;
    position:relative;
    margin:0;
    font-size:14px;
    margin:10px 15px 0 15px;
    font-weight: bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    .nav ul
    {
    list-style-type: none;
    }
    .nav ul li ul
    {
    display: none;
    }
    .nav ul li:hover ul, .nav ul li.over ul
    {
    display:block;
    position:absolute;
    top: 12px;
    left:130px;
    width:180px;
    color:#ffffff;
    background-color: #000000;
    }

    and here is the link

    http://hindinfo.summerhost.info/index.php
     
    nisitha.p, Feb 5, 2008 IP
  2. WHMTalK

    WHMTalK Banned

    Messages:
    184
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I noticed that you need to learn more about CSS pseudo-classes.

    You're trying to do something that is not supported by IE (6.0 and bellow?). I'm talking about the :hover pseudo class. The :hover pseudo class only works on the anchor tag if you're using Internet Explorer. This link might solve your problem: Whatever:hover
     
    WHMTalK, Feb 6, 2008 IP
  3. ayushsaran

    ayushsaran Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    the :hover is not supported in IE for anything other than A tags

    you can use a javascript file to determine the hover status
    google for sfhover.js , this is the file used by the popular 'son of suckerfish' javascript dropdowns

    the file ads a class of .sfhover to the element on hover, so you can target it for IE6.0

    you will need to define your hover twice

    Example:

    .nav ul li:hover ul, .nav ul li.sfhover ul{
     
    ayushsaran, Feb 9, 2008 IP