works in firefox, not IE

[jeff5656]

I hate IE (as I'm sure most web people do!). Nonetheless, since most use it, I have to get my menu drop-down to work.  This css and html code works in firefox.  In IE however, when I hover, the drop down dows not display.

Since it works in FF, I have NO idea how to debug this.  Does anyone know wha explorer doesn't like about my CSS or html code?

css:

#qm0 a	
{	
	padding:5px 4px 5px 5px;
	color:#555555;
	font-family:Arial;
	font-size:10px;
	text-decoration:none;
}


/*"""""""" (SUB) Container""""""""*/	
#qm0 div, #qm0 ul	
{	
	padding:10px;
	margin:-2px 0px 0px 0px;
	background-color:transparent;
	border-style:none;
}


/*"""""""" (SUB) Items""""""""*/	
#qm0 div a, #qm0 ul a	
{	
	padding:3px 10px 3px 5px;
	background-color:transparent;
	font-size:11px;
	border-width:0px;
	border-style:none;
}


/*"""""""" (SUB) Hover State""""""""*/	
#qm0 div a:hover, #qm0 ul a:hover	
{	
	background-color:#DADADA;
	color:#CC0000;
}


/*"""""""" (SUB) Active State""""""""*/	
body #qm0 div .qmactive, body #qm0 div .qmactive:hover	
{	
	background-color:#DADADA;
	color:#CC0000;
}


/*"""""""" Individual Titles""""""""*/	
#qm0 .qmtitle	
{	
	cursor:default;
	padding:3px 0px 3px 4px;
	color:#444444;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
}


/*"""""""" Individual Horizontal Dividers""""""""*/	
#qm0 .qmdividerx	
{	
	border-top-width:1px;
	margin:4px 0px 4px 0px;
	border-color:#BFBFBF;
}


/*"""""""" Individual Vertical Dividers""""""""*/	
#qm0 .qmdividery	
{	
	border-left-width:1px;
	height:15px;
	margin:4px 2px 0px 2px;
	border-color:#AAAAAA;
}


/*"""""""" (main) Rounded Items""""""""*/	
#qm0 .qmritem span	
{	
	border-color:#DADADA;
	background-color:#F7F7F7;
}

/*"""""""" (main) Rounded Items Content""""""""*/	
#qm0 .qmritemcontent	
{	
	padding:0px 0px 0px 4px;
}

</style>

 

HTML:

<td colspan="4" align="center">
  <ul id="qm0" class="qmmc">

<li><a class="qmtitle" href="../../warren/billview.php">Billing View</a>
	<ul>
	<li><a class="qmtitle" href="../../warren/billview.php">Active Patients</a></li>
	<li><a class="qmtitle" href="../../warren/displaysignoff-bill.php">Discharged patients</a></li>
	</ul>
    </li>
<li><span class="qmdivider qmdividery" ></span></li>
    
    <li><a class="qmtitle" href="../../warren/staffdisplay.php">Staff View</a>
	<ul>
	<li><a class="qmtitle" href="../../warren/staffdisplayp.php">Staff View Print</a></li>
	</ul>
     </li>
     <li><span class="qmdivider qmdividery" ></span></li>
     <li><a class="qmtitle" href="../../warren/displayactive.php">Resident View</a>
		 <ul>
		 <li><a class="qmtitle" href="../../warren/displayactive.php">Active list</a></li>
		 <li><a class="qmtitle" href="../../warren/displaysignoff.php">Discharged patients</a></li>
             </ul>
      </li>
      <li><span class="qmdivider qmdividery" ></span></li>
      <li><span class="qmdivider qmdividery" ></span></li>
      <li><form name="ptsearch" method="post" action = "search_results.php"> <input name="mrn" type="text" size="20" /><input type="submit" value="Search by MRN" /></form></li>
      
      
    </ul>
    
    </td>

[SuperBlue]

Wich version of IE? Tried the code you posted, and i can't get it to work in either of the browsers.

 

Basically it just shows me a list, with some nested unodered lists.

[pquery]

sometimes I've found the need to add IE specific stylesheets or add IE specific lines to the head of the document(s)

 

There's 6 specific rules/conditions that can be applied:

 

1. [if IE] - if above or equal to version 5

2. [if IE 6] - if equal to version 6

3. [if lt IE 6] - if less than version 6

4. [if lte IE 6] - if less than or equal to version 6

5. [if gt IE 6] - if greater than version 6

6. [if gte IE 6] - if greater than or equal to version 6

 

here's an example:

 

<!–[if gte IE 5]>
   <style type="text/css">@import "IE_only.css";</style>
<![endif]–> 

 

[DamienRoche]

In the past, I used conditional ie statements, but then I found out that they often don't work on mac and possibly other operating systems.

 

Best way is to analyze and tweak this until you find a cross browser compatible solution.

 

From the code, I'm assuming this is a javascript hover menu. Would really need to see your javascript code to debug it.

 

Best of luck!

[TheFilmGod]

IE6 has poor support for :hover. Are you using IE6 or IE7? ... Or maybe you're using IE8 beta?

[vila]

your IE's edition is high than 6?

[phparray]

In the past, I used conditional ie statements, but then I found out that they often don't work on mac and possibly other operating systems.

 

That's the point these conditional statements only work in IE which makes it perfect for fixing IE style problems. Always list your IE css files last if IE sees them they override your regular css file because the last definition of a class or id is the one used.  In any other browser is looks like a comment and the file is not used.

 

In my experience "padding" has been the biggest headache. You pretty much always have to have IE specific definitions for padding because the distance stated is rendered differently in IE6 and IE7 and Firefox.