By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,321 Members | 1,875 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,321 IT Pros & Developers. It's quick & easy.

menu IE7 problem

P: 6
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>
Oct 19 '07 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 19 '07 #2

P: 6
thanks i hav solved this problem
Oct 22 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.