Jump to content


Problem W/ CSS & IE :hover


2 replies to this topic

#1 ecntrc

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Location:Hawaii
  • Interests:designing, coding is my favorite.. more than graphics.. im a stay at home mom and a web master from home.. so.. teaching my son and computers and my web design.. pretty much it.. reading.. i love john grisham..

Posted 11 July 2006 - 01:33 AM

Heres my code..
<html>
<head>
<title>PACIFIC EXPOS - HAWAII'S LEADING CONSUMER TRADE SHOW COMPANY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<style type="text/css">
/*** Nav bar style<strong></strong>s ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
		margin: 0;
		padding: 0;
		cursor: default;
		list-style-type: none;
}

ul.nav{
		width: 25ex;
/*Optional, to make the navigation bar positions on the left of the content*/
		float: left;
		margin-right: 0em;
}

ul.nav>li{
		margin: 0;
		padding: 3px 7px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
		display: none;
		position: absolute;
		width: 20ex;
		left: 35ex;
		margin-top: -8em;
		margin-left: 15px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
		display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
		display: block;
		border-color:#000000;
		border-left: thin;
		border-right: thin;
		border-bottom: thin;
		border-top: thin;
		padding: 2px 10px;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
		background-color: #fff;
		color: #000;
		font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
}


.nav ul a:hover{
font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
border: solid 1px #FFCC00;
		background-color: #000000;
		color:#FFCC00;
}
		

ul.nav li:active,
.nav li a:active{
		background-color: #;
		color: #000;
	
}

ul{
		border: 0px solid #000;
}

.nav a{
		text-decoration: none;
}

</style>

 <!-- The line below starts the conditional comment -->
 <!--[if IE]>
  <style type="text/css">
   body {behavior: url(csshover.htc);}
  </style>
 <![endif]--> <!-- This ends the conditional comment -->

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="200" border="2" align="center" cellpadding="2" bordercolor="#000000">
  <tr>
	<td><!-- ImageReady Slices (index.psd) -->
	<table id="Table_01" width="876" height="716" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="3">
			<img src="images/index_01.jpg" width="195" height="186" alt=""></td>
		<td>
			<img src="images/index_02.jpg" width="680" height="93" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="93" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_03.jpg" width="680" height="79" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="79" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_04.jpg" width="680" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_05.jpg" width="195" height="21" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td rowspan="11">&nbsp;
			<iframe src="MainFrame.htm" name="Main" width="680" height="526" scrolling="auto" frameborder="0"></iframe></td>
		<td>
			<img src="images/spacer.gif" width="1" height="13" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_07.jpg" width="195" height="40" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="40" alt=""></td>
	</tr>
	<tr><td>
	<ul class="nav">
<li class="nav"><strong><img src="/images/index_08.jpg"></img></strong>
		<ul style="border: 2px solid #000000">
		<li><a href="BoothInfoSNPS.htm">Booth Information</a></li>
		<li><a href="SpringShowAPP.pdf">Show Contract (*download)</a></li>
		<li><a href="SpecialEventsSNPS.htm">Special Events</a></li>
		<li><a href="PressReleaseSNPS.htm">Strong Man</a></li>
		<li><a href="PicturesSNPS.htm">Pictures</a></li>
		</ul>
</li>

<li><strong><img src="/images/index_09.jpg"></img></strong>
		<ul style="border: 2px solid #000000">
		<li><a href="BoothInfoBHGS.htm">Booth Information</a></li>
		<li><a href="HomeShowAPP.pdf">Show Contract (*download)</a></li>
		<li><a href="SpecialEventsBHGS.htm">Special Events</a></li>
		<li><a href="PressReleaseBHGS.htm">Press Release</a></li>
		<li><a href="DiscountCoupon.htm">Discount Coupon</a></li>
		<li><a href="PicturesBHGS">Pictures</a></li>
		</ul>
</li>

<li><strong><img src="/images/index_10.jpg"></img></strong>
		<ul style="border: 2px solid #000000">
		<li><a href="BoothInfoWS.htm">Booth Information</a></li>
		<li><a href="WeddingShowAPP.pdf">Show Contract (*download)</a></li>
		<li><a href="PicturesWS.htm">Pictures</a></li>
		</ul>
</li>

<li><strong><img src="/images/index_11.jpg"></img></strong>
		<ul style="border: 2px solid #000000">
		<li><a href="BoothInfoFNPS.htm">Booth Information</a></li>
		<li><a href="FoodShowShowAPP.pdf">Show Contract (*Download)</a></li>
		<li><a href="SpecialEventsFNPS.htm">Special Events</a></li>
		<li><a href="PicturesFNPS.htm">Pictures</a></li>
		</ul>
</li>

<li><strong><a href="http://www.philtradeexpo.com/"><img src="images/index_12.jpg" border="0"></img></a></strong></li>
</ul></td></tr>
	<tr>
		<td>
			<a href="http://www.tarachanel.com" target="_blank"><img src="images/index_13.jpg" alt="" width="195" height="41" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="OOTExhibitors.htm" target="Main"><img src="images/index_14.jpg" alt="" width="195" height="33" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="33" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="Questionnaire.htm" target="Main"><img src="images/index_15.jpg" alt="" width="195" height="28" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="ContactUs.htm" target="Main"><img src="images/index_16.jpg" alt="" width="195" height="40" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="40" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices --></td>
  </tr>
</table>
</body>
</html>


Heres my problem...
I have made a CSS only based vertical pop out menu. In FF & Safari its fine. it works. just as I wanted it to. But in IE, it shows the whole list. I know that Ie does not support that behaviour. I tried csshover.htc file, I tried a JS one, I tried putting extra codes in there and display and not. Ive tried doing other vertical menus BUT I have a sliced layout. Ive been working on fixing this for the past week. Im on vaca and I only have like 4 more days of DW and 5 of my FTP program. So I dont have much time. This is for a client btw. I want it to work because once the programs are out im going to turn in my invoice so i need it to work. want it to work. its so beautiful (LOL :D ) to me in FF but man IE you suck. can someone help me out please? I dont know what I am doing wrong. Im so puzzled. I would GREATLY appreciate and one day soon return the favor. ....... lol im desperate.

#2 cperkins

    Young Padawan

  • Members
  • Pip
  • 17 posts

Posted 12 July 2006 - 01:27 AM

IE only supports :hover on <a> tags. It is not supported on any other element.

I'm not sure that's your problem, but my guess is that it is.


Chris Perkins
http://www.medialab.com/sitegrinder You design. We grind. Photoshop straight to the web.

#3 ecntrc

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Location:Hawaii
  • Interests:designing, coding is my favorite.. more than graphics.. im a stay at home mom and a web master from home.. so.. teaching my son and computers and my web design.. pretty much it.. reading.. i love john grisham..

Posted 13 July 2006 - 02:11 AM

No I already knew that. I was seeing if anyone can help me fix it
ive made two and not sure if either works because I dont have IE
http://www.pacificexpos.com/menu.html
http://www.pacificexpos.com/menu2.html





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users