2 replies [Last post]
shivam
Offline
newbie
Last seen: 11 years 42 weeks ago
Joined: 2009-04-14
Posts: 5
Points: 0

Hello,

Below is the code which works very fine in FF. In IE6 it strucks. The code

  .preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}
 
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; border-right:1px solid #360000;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:36px; color:#FFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 7px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background: url(three_0a.gif) no-repeat right top;}
 
#nav li:hover a.top_link {color:#fff; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:0px;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:200;} 
 
#nav li:hover ul.sub
{left:1px; top:36px; background: #191B1C; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:125px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:125px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:125px; line-height:18px; text-indent:5px; color:#FFF; text-decoration:none;border:0px solid #F2F3E1;}
#nav li ul.sub li a.fly
{background:#C12524 url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#FD8A02; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#7F0C0D url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
 
#nav li b {display:block; font-size:11px; height:18px; width:120px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#C12524; border-bottom:1px solid #ff6; cursor:default;}
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #FE7F03; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
 
#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#7F0C0D url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#C12524 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#C12524;} 
 

html

  <ul id='nav'>
	<li class='top'><a href='http://localhost/index.html' class='top_link'> <span>Home</span></a>
	</li>
 
 
	<li class='top'><a href='http://localhost/products.html' id='products' class='top_link'><span class='down'>Products</span></a>
		<ul class='sub'>
			<li><b>Products2</b></li>
			<li><a href='http://localhost/products2.html' class='sub'>Products2</a></li>	
 
  </ul>

Thanks

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 39 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

IE6 only recognizes a:hover,

IE6 only recognizes a:hover, not li:hover.
Try using googling the script whatever:hover and see if that helps.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

shivam
Offline
newbie
Last seen: 11 years 42 weeks ago
Joined: 2009-04-14
Posts: 5
Points: 0

Index of Z

Thanks for replying.

I searched and found that,

	<li class="top"><a href="http://www.cssplay.co.uk" id="home" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
			<li><a href="../menu/" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>
						<li><a href="../mozilla/">Nikon</a></li>
						<li><a href="../ie/">Minolta</a></li>
						<li><a href="../opacity/">Pentax</a></li>
					</ul>
					<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
 
</ul>

has to used for IE 6 and IE 7. It works fine. In my page there is a div, its z-index is 1000. In IE the menu goes behind that div, from the css of menu

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

I tried to increase the above value and also tried to decrease the value of the div having 1000 as div index. In IE nothing is happening.

i understood it will work only on li and not on table. Which tag name should i have to use to make it work on IE?