Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

menu IE7 problem

Newbie
  
Join Date: May 2007
Posts: 6
#1: Oct 19 '07
The menu on my site works fine in IE6 and Firefox.

In IE7, there is a problem with the menu: when you mouse over the various main catagories, the sub-catagories all appear to the right as they should; however, as soon as you mouse towards any but the TOP sub-catagory, all those sub-catagories still view there.

It will work first time quite fine..but if user clicks outsite anywhere in screen then this problem occur..
i think it's css problem,that's why i m sending you both css and code also..


CSS--:
Expand|Select|Wrap|Line Numbers
  1. #nav, #nav ul { /* all lists */
  2.     position:absolute;
  3.     padding: 0;
  4.     margin: 0;
  5.     list-style: none;
  6.     line-height: 1;
  7.     font-family:Verdana, Arial, Helvetica, sans-serif;
  8.     color:#000;
  9.     border-top:1px #CCCCCC solid;  
  10.     border-bottom:1px #CCCCCC solid; 
  11.     width:980px;
  12.     height:25px;
  13.     background:#EFEFED;
  14. }
  15.  
  16.  
  17. #nav a
  18. {
  19.     display: block;  
  20.     text-decoration: none;
  21.     color:#000000;     
  22.     border-bottom:2px #EFEFED solid;
  23.     padding-bottom:3px; 
  24.  
  25. }  
  26. #nav a:hover{
  27.     color:#000;
  28.     border-bottom:2px #CC3300 solid;
  29. }
  30.  
  31. #nav li { /* all list items */
  32.     float: left;
  33.     /* width: 80px; */ /* width needed or else Opera goes nuts */ /* no it does not go nuts anymore */
  34.     height: 20px;  
  35.     background: url(../images/arrow_down.gif) 5px right no-repeat #EFEFED;  
  36.     padding: 5px 20px 0px 15px;              
  37.     border-right:2px #FFFFFF solid;    
  38. }  
  39.  
  40. *html #nav li { /* all list items */
  41.     height: 21px; 
  42. }
  43.  
  44. #nav .last{
  45.     border-right:0px;
  46. }
  47.  
  48. #nav li ul { /* second-level lists */
  49.     position:absolute;     
  50.     background:none;        
  51.     width: 10em;    
  52.     left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  53.     margin:4px 0px 0px -15px;
  54.     border:0px;   
  55.     border-top:1px #CCCCCC solid;
  56. }
  57.  
  58. *html #nav li ul { /* second-level lists */
  59.     margin:5px 0px 0px -15px;
  60. }
  61.  
  62. #nav li ul li {
  63.     background-image:none;
  64.     padding:0px;
  65.     width:150px;
  66.     border-bottom:1px #CCCCCC solid;
  67.     border-left:1px #CCCCCC solid;
  68.     border-right:1px #CCCCCC solid;
  69.     height:25px;
  70. }
  71.  
  72. #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
  73.     left: auto;
  74. }
  75.  
  76. #nav li:hover li a, li.sfhover li a,
  77. #nav li:hover li:hover li a, li.sfhover li.sfhover li a,
  78. #nav li:hover li:hover li:hover li a, li.sfhover li.sfhover li.sfhover li a,
  79. #nav ul li a
  80.  {
  81.     padding:5px 0px 5px 0px;
  82. }
  83. #nav li:hover li:hover a, 
  84. #nav li:hover li:hover li:hover a, li.sfhover li.sfhover li.sfhover a,
  85. #nav li:hover li a:hover, li.sfhover li a:hover,
  86. #nav li:hover li:hover li:hover a:hover, li.sfhover li li a:hover,
  87. #nav li:hover li:hover li:hover li:hover a:hover, li.sfhover li.sfhover li.sfhover li.sfhover a:hover,
  88. #nav ul li a:hover
  89. {
  90.     background: #d8efca;
  91.     color:#598527;
  92.     border:0px;
  93.     height:15px;
  94.     padding:5px 0px 5px 0px;
  95. }
  96.  
  97. /* for two level menu */
  98.  
  99. #nav li ul ul {
  100.     margin: -1em 0 0 10em;
  101. }
  102.  
  103. #nav, #nav ul {
  104.     padding: 0;
  105.     margin: 0;
  106.     list-style: none; 
  107.     line-height: 1;
  108. }
  109.  
  110. #nav li:hover ul ul, #nav li.sfhover ul ul {
  111.     left: -999em;
  112. }
  113.  
  114. #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
  115.     left: auto;
  116. }
  117.  
  118. /* three level menu */
  119.  
  120. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  121.     left: -999em;
  122. }
  123.  
  124. #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  125.     left: auto;
  126. }
  127.  
  128. /* for four level menu */
  129.  
  130. #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
  131.     left: -999em;
  132. }
  133.  
  134. #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
  135.     left: auto;
  136. }
  137.  
Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />
<script type="text/javascript" language="javascript1.2" src="js/menu.js"></script>
</head>
<body>
<div id="pagewidth">
<!-- header -->
<div id="header">
<div id="logo"><img src="images/logo.gif" width="126" height="64" alt="Smiles CRM" border="0" /></div>
<div id="user_details_top"><em>Sumeet Kumar</em> | Supervisor <a href="#">{ Mark Out }</a></div>
<div id="user_pref_top"><a href="#">Log out</a> | <a href="#">Change Password</a> | <a href="#">Prefences</a> | <a href="#">Help</a></div>
<div id="top_info">
<a href="#">My Profile</a> | <a href="#">My Team</a> | <a href="#">Directory</a> |
<form name="search" action="#" method="post">
<input type="text" name="emp_name" id="emp_name" class="FormInputs" value="Enter Emp Name or No." />
<select>
<option selected="selected">Select Criteria</option>
<option>Select Criteria</option>
<option>Select Criteria</option>
<option>Select Criteria</option>
</select>
<span class="btn_left">&nbsp;</span><input type="button" name="search" value="Search" class="FormButton" /><span class="btn_right">&nbsp;</span>
</form>
</div>
<div id="topnav">
<ul id="nav">
<li><a href="#">Leave (2)</a>
<ul>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
<li><a href="#">Sub Menu</a></li>
</ul>
</li>
</ul> </div>
</div>
<!-- /header -->
<div id="header_bg_wide">
<div id="maincol_tabs">
<ul>
<li><a href="#">Need to Act (2)</a> |</li>
<li><a href="#">My Requests (4)</a> |</li>
<li><a href="#">What's New (2)</a></li>
</ul>
</div>
</div>
<!-- wrapper -->
<div id="wrapper" class="clearfix">
<!-- twocols -->
<div id="twocols" class="clearfix">
<!-- maincol -->
<div id="maincol_wide">
<div id="inner">
<form name="exp" method="post" action="#">
<h1>Business Expense Claim</h1>
<div id="claim_details">
<div id="box1">
<span class="label">Claim Type*:</span>
<select name="claim_type" class="FormInputs" id="hide-this">
<option>Travel</option>
<option>Travel 2</option>
</select><br /><br />
<span class="label">Claim Date:</span> 22/11/06<br /><br />
<span class="label">Status:</span> <strong>New Claim</strong><br /><br />
<span class="label">Claim Reference*:</span> AS/TRV/0078<br /><br />
<span class="label">Approved Requests*:</span>
<select name="approved_requests" class="FormInputs">
<option>20/06/06 - 24/06/06</option>
<option>20/06/06 - 24/06/06</option>
</select><br /><br />
<span class="label">Tour Summary:</span>
<textarea name="tour_summary" class="FormTxtBox" cols="1" rows="1"></textarea>
<br /><br />
</div>
<div id="box2">
<span class="label">Employee:</span> Ashish Jindal<br /><br />
<span class="label">Function:</span> Corporate<br /><br />
<span class="label">Approver:</span> Sumeer Kapur<br /><br />
<span class="label">Role:</span> CEO<br /><br />
</div>
<div id="box3">
<h3>Travel Request</h3>
<span class="label">From:</span> 24/06/06<br /><br />
<span class="label">To:</span> 24/06/06<br /><br />
<span class="label">Travel Type*:</span> Domestic<br /><br />
<span class="label">Purpose of Travel*:</span> Assignment<br /><br />
<span class="label">Type of Work*:</span> Client<br /><br />
<span class="label">Client Name*:</span> Abcd Ltd<br /><br />
<span class="label">Billable*:</span> Yes<br /><br />
</div>
</div>
<h2>Add Business Expenses</h2>
<div id="bness_exp">
<strong>Select Expense Date:</strong>
<select name="expense_date" class="FormInputsSpc">
<option>20/06/06 - 24/06/06</option>
<option>20/06/06 - 24/06/06</option>
</select>
<strong>Select Expense Type:</strong>
<select name="expense_type" class="FormInputs">
<option>Travel</option>
<option>20/06/06 - 24/06/06</option>
</select>
<span class="btn_left">&nbsp;</span><input type="button" name="search" value="Go" class="FormButton" /><span class="btn_right">&nbsp;</span>
<table width="100%" cellpadding="0" cellspacing="2" border="0">
<tr>
<th>Mode</th>
<th>Class</th>
<th>From - To</th>
<th>Txn Amt.</th>
<th>Payment Mode</th>
<th width="30%">Cost Center</th>
</tr>
<tr>
<td>
<select name="mode" class="FormInputsSpc">
<option>Air</option>
<option>Air Air Air</option>
</select>
</td>
<td>
<select name="class" class="FormInputsSpc">
<option>Business</option>
<option>Air Air Air</option>
</select>
</td>
<td>
<input type="text" name="fromto" value="Enter Text" class="FormInputs" />
</td>
<td>
<input type="text" name="txnamt" value="Enter Text" class="FormInputsSmall" /> INR
</td>
<td>
<select name="pmt_mode" class="FormInputsSpc">
<option>Paypal</option>
<option>Air Air Air</option>
</select>
</td>
<td>
<input type="text" name="cstcntr" value="Enter Text" class="FormInputsLarge" />
</td>
</tr>
<tr>
<td>Comments:</td>
<td colspan="5"><textarea name="comments" class="FormTxtBoxLarge"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="5"><span class="btn_left">&nbsp;</span><input type="button" name="search" value="Add Another Expense" class="FormButton" /><span class="btn_right">&nbsp;</span></td>
</tr>
</table>
</div>
<h2>Business Claim Summary</h2>
<div id="bness_smry">
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<th>Date</th>
<th>Expense Type</th>
<th>Txn Amt.</th>
<th>Payment Mode</th>
<th>Cost Center</th>
<th colspan="2">Expense Info.</th>
<th>&nbsp;</th>
</tr>
<tr>
<td rowspan="3"><strong>26/06/06</strong></td>
<td rowspan="3">Travel</td>
<td rowspan="3">5,000</td>
<td rowspan="3">Credit Card</td>
<td rowspan="3">Test text</td>
<td class="info_head">Mode</td>
<td>Air</td>
<td rowspan="3"><a href="#">Edit</a> <span class="blue">|</span> <a href="#">Delete</a></td>
</tr>
<tr>
<td class="info_head">Class</td>
<td>Business</td>
</tr>
<tr>
<td class="info_head">From - To</td>
<td>Mumbai - Delhi</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="7" class="remarks">Text will come here, text will come here</td>
</tr>
<tr>
<td rowspan="3"><strong>26/06/06</strong></td>
<td rowspan="3">Travel</td>
<td rowspan="3" class="error"><input type="text" name="txnamt" value="5,000" class="FormInputsSmallError" /></td>
<td rowspan="3" class="error"><input type="text" name="txnamt" value="Credit Card" class="FormInputsSmallError" /></td>
<td rowspan="3">Test text</td>
<td class="info_head">Mode</td>
<td>Air</td>
<td rowspan="3"><a href="#">Edit</a> <span class="blue">|</span> <a href="#">Delete</a></td>
</tr>
<tr>
<td class="info_head">Class</td>
<td>Business</td>
</tr>
<tr>
<td class="info_head">From - To</td>
<td>Mumbai - Delhi</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="7" class="remarks">
Text will come here, text will come here
<h4>some error text comes here</h4>
<h4>some error text comes here</h4>
</td>
</tr>
<tr>
<td><strong>26/06/06</strong></td>
<td>Travel</td>
<td>5,000</td>
<td>Credit Card</td>
<td>Test text</td>
<td class="info_head">Type</td>
<td>Dinner</td>
<td><a href="#">Edit</a> <span class="blue">|</span> <a href="#">Delete</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="7" class="remarks">Text will come here, text will come here</td>
</tr>
</table>
<div class="blue_band">&nbsp;</div>
&nbsp;&nbsp;<span class="btn_left">&nbsp;</span><input type="button" name="search" value="Submit" class="FormButton" /><span class="btn_right">&nbsp;</span>&nbsp;&nbsp;
<span class="btn_left">&nbsp;</span><input type="button" name="search" value="Save Draft" class="FormButton" /><span class="btn_right">&nbsp;</span>&nbsp;&nbsp;
<span class="btn_left">&nbsp;</span><input type="button" name="search" value="Discard &amp; Exit" class="FormButton" /><span class="btn_right">&nbsp;</span>
</div>
</form>
</div>
</div>
<!-- /maincol -->
</div>
<!-- /twocols -->
</div>
<!-- /wrapper -->
<div id="footer_bg_wide">&nbsp;</div>
</div>
</body>
</html>
drhowarddrfine's Avatar
Expert
  
Join Date: Sep 2006
Posts: 5,562
#2: Oct 19 '07

re: menu IE7 problem

Microsoft, in its infinite wisdom, has decided to make the '*' hack not work in IE7. So you need to hack your IE6 hacks to make IE7 hacks work.

Overall, the best way to deal with IE, other than hope for its demise, is use "conditional comments". Please google for that. Conditional comments can be made to work in all IE versions of IE.
Newbie
  
Join Date: May 2007
Posts: 6
#3: Oct 22 '07

re: menu IE7 problem

thanks i hav solved this problem
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,387 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved