5 Replies - 1146 Views - Last Post: 01 November 2011 - 03:39 PM

#1 mido911  Icon User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 89
  • Joined: 29-October 10

css not working on IE

Posted 31 October 2011 - 10:06 AM

I am trying to make a drop down menu my only problem is that it is not working on IE when I do hover however on chrome seems to work fine. How can I make the css property of hover to work on IE? Below is my code:

<html>
<head>
<title></title>
<style type="text/css">

#nav{
       list-style:none;
       font-weight:bold;
       margin-bottom:10px;
       /* Clear floats */
       float:left;
       position:relative;


      
}
#nav li{
       float:left;
               font-family: Helvetica, sans-serif;
       font-size:12px;
       position:relative;
}
#nav a{
       display:block;
       padding:10px;
       color:#fff;
font-family: Helvetica, sans-serif;
       font-size:12px;
       text-decoration:none;
}
#nav a:hover{
       color:#fff;
       background:#6b0c36;
       text-decoration:underline;
}


#nav ul{
       background:#fff; 
       background:rgba(255,255,255,0);
       list-style:none;
       position:absolute;

               margin:0px;
       left:-9999px; 
}
#nav ul li{
       padding-top:1px;

       float:none;
       padding:0px;
       margin:0px;
       text-align:left;
       z-index:100;
}
#nav ul a{
       padding:0px;
       margin:0px;
       white-space:nowrap; 
}
#nav li:hover ul,li.over ul{ 
       left:-40px;
       /* Bring back on-screen when needed */
}
#nav li:hover a{ /
       background:#F9EFF7;
       color:#AD0148;

}
#nav li:hover ul a{ 
these effects. */
       text-decoration:none;
}
#nav li:hover ul li a:hover{ 
       background:#666;
}
</style>
</head>

<body>
<ul id ="nav">
<li><a href="#">Item&nbsp;&nbsp;&nbsp;</a>
</li>
<li>
<a href=#">ITEM1</a>
<ul id="nav">
<li>
<a href="#">ITEM11</a></li>
<a href="#">ITEM2</a></li>
</ul>
</li>
<li><a href="#">ITEM3</a></li>
</ul>
</body>
</html>


Mod edit - Please :code:

Is This A Good Question/Topic? 0
  • +

Replies To: css not working on IE

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,308
  • Joined: 07-September 06

Re: css not working on IE

Posted 31 October 2011 - 10:23 AM

Depending on the version of IE you are using the hover attribute can only be used for links (a). Also, most versions of IE require you to have a DOCTYPE specified, otherwise they give you a crippled version of general HTML, CSS, Javascript, etc.

I have made a couple of changes below, so go ahead and take a look at what I have modified, it now works in IE 9.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">

#nav{
       list-style:none;
       font-weight:bold;
       margin-bottom:10px;
       /* Clear floats */
       float:left;
       position:relative;


      
}
#nav li{
       float:left;
               font-family: Helvetica, sans-serif;
       font-size:12px;
       position:relative;
}
#nav a{
       display:block;
       padding:10px;
       color:#999;
font-family: Helvetica, sans-serif;
       font-size:12px;
       text-decoration:none;
}
#nav a:hover{
       color:#ccc;
       background:#6b0c36;
       text-decoration:underline;
}


#nav ul{
       background:#fff; 
       background:rgba(255,255,255,0);
       list-style:none;
       position:absolute;

               margin:0px;
       left:-9999px; 
}
#nav ul li{
       padding-top:1px;

       float:none;
       padding:0px;
       margin:0px;
       text-align:left;
       z-index:100;
}
#nav ul a{
       padding:0px;
       margin:0px;
       white-space:nowrap; 
}
#nav li:hover ul,li.over ul{ 
       left:-40px;
       /* Bring back on-screen when needed */
}
#nav li:hover a{ /
       background:#F9EFF7;
       color:#AD0148;

}
#nav li:hover ul a{ 
these effects. */
       text-decoration:none;
}
#nav li:hover ul li a:hover{ 
       background:#666;
}
</style>
</head>

<body>
<ul id ="nav">
<li><a href="#">Item 0</a></li>
<li>
  <a href=#">ITEM 1</a>
    <ul id="nav">
      <li>
        <a href="#">ITEM 1.1</a>
      </li>
      <li>
        <a href="#">ITEM 1.2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">ITEM 2</a></li>
</ul>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#3 mido911  Icon User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 89
  • Joined: 29-October 10

Re: css not working on IE

Posted 31 October 2011 - 10:48 AM

another question how can I make the menu when I make hover to be the same in width as to where the I do the hover i.e when I do hover over ITEM notice that the menu is not equal to where I do the hover.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,308
  • Joined: 07-September 06

Re: css not working on IE

Posted 31 October 2011 - 10:55 AM

Make the paddings and the margins the same or similar. Realize that margins are outside the box, adn paddings are inside. At the moment notice that your first-level lis have a padding of 10, but your second level has no padding (padding of 0).
Was This Post Helpful? 0
  • +
  • -

#5 mido911  Icon User is offline

  • D.I.C Head

Reputation: -3
  • View blog
  • Posts: 89
  • Joined: 29-October 10

Re: css not working on IE

Posted 31 October 2011 - 11:05 PM

how would you recommend if I want a more improved and fancier drop down menu if I want to add more style to mine?
Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: css not working on IE

Posted 01 November 2011 - 03:39 PM

If you provide a visual representation (I'm too lazy to test the code right now) of what your menu looks like, I may be capable of giving you suggestions on the look. Perhaps some CSS3 goodies and graceful degradation ;)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1