dropdown is workin ini FF but not in IE

  • buzzby
  • Novice
  • Novice
  • buzzby
  • Posts: 25

Post 3+ Months Ago

i have this dropdown menu code with images as headers
Code: [ Select ]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul.IR li {
  position: relative;
  / *overflow: hidden;
  commented out for this example */
  font-size: 0.9em;
}
 
.IR em {
  display: block;
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
 
/* For IE5.x mac only */
* html>body .IR {
  position: static;
  / *overflow: visible;
  commented out for this example */
  font-size: 10px;
}
 
 
* html>body .IR em  {
position: static;
}
.nav {
list-style: none;
}
.nav li {
float: left;
padding-bottom: 10px;
 
}
.nav li, .nav li em {
width: 90px;
height: 23px;
}
.link1 em, .link2 em, .link3 em, .link4 em {
  background: url(linker.gif) no-repeat;
  cursor: pointer;
}
.link1 em {
left: 0;
}
.link1 em {
  background-position: -8px 0;
}
.link1:hover em {
  background-position: -8px -23px;
}
.link2 {
left: 0;
}
.link2 em {
  background-position: -132px 0;
}
.link2:hover em {
  background-position: -132px -23px;
}
.link3 { left: 0; }
.link3 em {
  background-position: -244px 0;
}
.link3:hover em {
  background-position: -244px -23px;
}
.link4 { left: 0; }
.link4 em {
  background-position: -362px 0;
}
.link4:hover em {
  background-position: -362px -23px;
}
 
.nav a { display: block; }
/* The Holly Hack */
* html .nav a { height: 1%; }
 
.nav li ul {
  position: absolute;
  z-index: 10; /* show the
  dropdowns above the images */
  top: 28px; /* position the dropdowns a set distance from the top of the image */
  left: -999em;
  list-style: none;
  border: 1px solid #FFCC00;
  width: 83px;
}
 
.nav li:hover ul {
left: auto;
margin: 0;
padding: 1px;
}
.nav { list-style: none; }
.nav li { float: left; padding-bottom: 10px; }
.nav li, .nav li em { width: 88px; height: 23px; }
 
 
</style>
</head>
 
<body>
<ul class="nav IR">
  <li class="link1">
    <a href="#"><em></em>Link 1</a>
    <ul>
      <li><a href="#">Submenu 1.1</a></li>
      <li><a href="#">Submenu 1.2</a></li>
      <li><a href="#">Submenu 1.3</a></li>
    </ul>
  </li>
  <li class="link2">
    <a href="#"><em></em>Link 2</a>
    <ul>
      <li><a href="#">Submenu 2.1</a></li>
      <li><a href="#">Submenu 2.2</a></li>
      <li><a href="#">Submenu 2.3</a></li>
    </ul>
  </li>
  <li class="link3">
    <a href="#"><em></em>Link 3</a>
    <ul>
      <li><a href="#">Submenu 3.1</a></li>
      <li><a href="#">Submenu 3.2</a></li>
      <li><a href="#">Submenu 3.3</a></li>
    </ul>
  </li>
    <li class="link4">
    <a href="#"><em></em>Link 3</a>
    <ul>
      <li><a href="#">Submenu 4.1</a></li>
      <li><a href="#">Submenu 4.2</a></li>
      <li><a href="#">Submenu 4.3</a></li>
    </ul>
  </li>
</ul>
 
</body>
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Untitled Document</title>
  4. <style>
  5. ul.IR li {
  6.   position: relative;
  7.   / *overflow: hidden;
  8.   commented out for this example */
  9.   font-size: 0.9em;
  10. }
  11.  
  12. .IR em {
  13.   display: block;
  14.   position: absolute;
  15.   top: 0; left: 0;
  16.   z-index: 1;
  17. }
  18.  
  19. /* For IE5.x mac only */
  20. * html>body .IR {
  21.   position: static;
  22.   / *overflow: visible;
  23.   commented out for this example */
  24.   font-size: 10px;
  25. }
  26.  
  27.  
  28. * html>body .IR em  {
  29. position: static;
  30. }
  31. .nav {
  32. list-style: none;
  33. }
  34. .nav li {
  35. float: left;
  36. padding-bottom: 10px;
  37.  
  38. }
  39. .nav li, .nav li em {
  40. width: 90px;
  41. height: 23px;
  42. }
  43. .link1 em, .link2 em, .link3 em, .link4 em {
  44.   background: url(linker.gif) no-repeat;
  45.   cursor: pointer;
  46. }
  47. .link1 em {
  48. left: 0;
  49. }
  50. .link1 em {
  51.   background-position: -8px 0;
  52. }
  53. .link1:hover em {
  54.   background-position: -8px -23px;
  55. }
  56. .link2 {
  57. left: 0;
  58. }
  59. .link2 em {
  60.   background-position: -132px 0;
  61. }
  62. .link2:hover em {
  63.   background-position: -132px -23px;
  64. }
  65. .link3 { left: 0; }
  66. .link3 em {
  67.   background-position: -244px 0;
  68. }
  69. .link3:hover em {
  70.   background-position: -244px -23px;
  71. }
  72. .link4 { left: 0; }
  73. .link4 em {
  74.   background-position: -362px 0;
  75. }
  76. .link4:hover em {
  77.   background-position: -362px -23px;
  78. }
  79.  
  80. .nav a { display: block; }
  81. /* The Holly Hack */
  82. * html .nav a { height: 1%; }
  83.  
  84. .nav li ul {
  85.   position: absolute;
  86.   z-index: 10; /* show the
  87.   dropdowns above the images */
  88.   top: 28px; /* position the dropdowns a set distance from the top of the image */
  89.   left: -999em;
  90.   list-style: none;
  91.   border: 1px solid #FFCC00;
  92.   width: 83px;
  93. }
  94.  
  95. .nav li:hover ul {
  96. left: auto;
  97. margin: 0;
  98. padding: 1px;
  99. }
  100. .nav { list-style: none; }
  101. .nav li { float: left; padding-bottom: 10px; }
  102. .nav li, .nav li em { width: 88px; height: 23px; }
  103.  
  104.  
  105. </style>
  106. </head>
  107.  
  108. <body>
  109. <ul class="nav IR">
  110.   <li class="link1">
  111.     <a href="#"><em></em>Link 1</a>
  112.     <ul>
  113.       <li><a href="#">Submenu 1.1</a></li>
  114.       <li><a href="#">Submenu 1.2</a></li>
  115.       <li><a href="#">Submenu 1.3</a></li>
  116.     </ul>
  117.   </li>
  118.   <li class="link2">
  119.     <a href="#"><em></em>Link 2</a>
  120.     <ul>
  121.       <li><a href="#">Submenu 2.1</a></li>
  122.       <li><a href="#">Submenu 2.2</a></li>
  123.       <li><a href="#">Submenu 2.3</a></li>
  124.     </ul>
  125.   </li>
  126.   <li class="link3">
  127.     <a href="#"><em></em>Link 3</a>
  128.     <ul>
  129.       <li><a href="#">Submenu 3.1</a></li>
  130.       <li><a href="#">Submenu 3.2</a></li>
  131.       <li><a href="#">Submenu 3.3</a></li>
  132.     </ul>
  133.   </li>
  134.     <li class="link4">
  135.     <a href="#"><em></em>Link 3</a>
  136.     <ul>
  137.       <li><a href="#">Submenu 4.1</a></li>
  138.       <li><a href="#">Submenu 4.2</a></li>
  139.       <li><a href="#">Submenu 4.3</a></li>
  140.     </ul>
  141.   </li>
  142. </ul>
  143.  
  144. </body>

its working in FF but not IE. can anyone enlighten me as to why please?

the site is here http://www.dmcobbinah.co.uk/dropdowntesting/
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

maybe just fix this and see what happens then ...
  • buzzby
  • Novice
  • Novice
  • buzzby
  • Posts: 25

Post 3+ Months Ago

sorry, its still not working
  • dapezboy
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Hawaii

Post 3+ Months Ago

It seems to work for me in FF, Chrome, and IE.
Maybe you have an outdated version of something, that it didn't work in.
  • paul_l81
  • Beginner
  • Beginner
  • paul_l81
  • Posts: 41

Post 3+ Months Ago

Hmmm...

Seems to be working in IE and FF for me. I'm on IE7, is your problem on IE6 specifically then?

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 43 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.