menu IE7 problem - HTML / CSS

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

 
#nav, #nav ul { /* all lists */

    position:absolute;

    padding: 0;

    margin: 0;

    list-style: none;

    line-height: 1;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    color:#000;

    border-top:1px #CCCCCC solid;  

    border-bottom:1px #CCCCCC solid; 

    width:980px;

    height:25px;

    background:#EFEFED;

}
 
#nav a

{

    display: block;  

    text-decoration: none;

    color:#000000;     

    border-bottom:2px #EFEFED solid;

    padding-bottom:3px; 
 
}  

#nav a:hover{

    color:#000;

    border-bottom:2px #CC3300 solid;

}
 
#nav li { /* all list items */

    float: left;

    /* width: 80px; */ /* width needed or else Opera goes nuts */ /* no it does not go nuts anymore */

    height: 20px;  

    background: url(../images/arrow_down.gif) 5px right no-repeat #EFEFED;  

    padding: 5px 20px 0px 15px;              

    border-right:2px #FFFFFF solid;    

}  
 
*html #nav li { /* all list items */

    height: 21px; 

}
 
#nav .last{

    border-right:0px;

}
 
#nav li ul { /* second-level lists */

    position:absolute;     

    background:none;        

    width: 10em;    

    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */

    margin:4px 0px 0px -15px;

    border:0px;   

    border-top:1px #CCCCCC solid;

}
 
*html #nav li ul { /* second-level lists */

    margin:5px 0px 0px -15px;

}
 
#nav li ul li {

    background-image:none;

    padding:0px;

    width:150px;

    border-bottom:1px #CCCCCC solid;

    border-left:1px #CCCCCC solid;

    border-right:1px #CCCCCC solid;

    height:25px;

}
 
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

    left: auto;

}
 
#nav li:hover li a, li.sfhover li a,

#nav li:hover li:hover li a, li.sfhover li.sfhover li a,

#nav li:hover li:hover li:hover li a, li.sfhover li.sfhover li.sfhover li a,

#nav ul li a

 {

    padding:5px 0px 5px 0px;

}

#nav li:hover li:hover a, 

#nav li:hover li:hover li:hover a, li.sfhover li.sfhover li.sfhover a,

#nav li:hover li a:hover, li.sfhover li a:hover,

#nav li:hover li:hover li:hover a:hover, li.sfhover li li a:hover,

#nav li:hover li:hover li:hover li:hover a:hover, li.sfhover li.sfhover li.sfhover li.sfhover a:hover,

#nav ul li a:hover

{

    background: #d8efca;

    color:#598527;

    border:0px;

    height:15px;

    padding:5px 0px 5px 0px;

}
 
/* for two level menu */
 
#nav li ul ul {

    margin: -1em 0 0 10em;

}
 
#nav, #nav ul {

    padding: 0;

    margin: 0;

    list-style: none; 

    line-height: 1;

}
 
#nav li:hover ul ul, #nav li.sfhover ul ul {

    left: -999em;

}
 
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {

    left: auto;

}
 
/* three level menu */
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

    left: -999em;

}
 
#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 {

    left: auto;

}
 
/* for four level menu */
 
#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 {

    left: -999em;

}
 
#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 {

    left: auto;

}

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">

<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"> </span><input type="button" name="search" value="Search" class="FormButton" /><span class="btn_right"> </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>

<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>

<div id="wrapper" class="clearfix">

<div id="twocols" class="clearfix">

<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"> </span><input type="button" name="search" value="Go" class="FormButton" /><span class="btn_right"> </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> </td>
<td colspan="5"><span class="btn_left"> </span><input type="button" name="search" value="Add Another Expense" class="FormButton" /><span class="btn_right"> </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> </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> </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> </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> </td>
<td colspan="7" class="remarks">Text will come here, text will come here</td>
</tr>
</table>
<div class="blue_band"> </div>
  <span class="btn_left"> </span><input type="button" name="search" value="Submit" class="FormButton" /><span class="btn_right"> </span>  
<span class="btn_left"> </span><input type="button" name="search" value="Save Draft" class="FormButton" /><span class="btn_right"> </span>  
<span class="btn_left"> </span><input type="button" name="search" value="Discard & Exit" class="FormButton" /><span class="btn_right"> </span>
</div>
</form>
</div>
</div>

</div>

</div>

<div id="footer_bg_wide"> </div>
</div>
</body>
</html>

Oct 19 '07 #1

Subscribe Post Reply

2170

drhowarddrfine

7,435

Expert 4TB

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

Ravi Joshi

thanks i hav solved this problem

Oct 22 '07 #3

Similar topics

javascript toolbar-menu problem

by: JesusFreak | last post by:

From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host:...

Javascript

need help with menu javascript

by: Jackson Yap | last post by:

can someone kind enough to help me look at the attached html and js file? Why is it that the javascript menu could not work at www.apchosting.net...

Javascript

Dynamic Menu for all browsers

by: Stromboli | last post by:

hi people, My problem is that I need to build a dynamic menu (preferably that works in all the browsers) that appears when I mouseover a certain...

HTML / CSS

Unhandled Exception in ASP.NET 2 asp:Menu control

by: Chuck Hartman | last post by:

I have a Windows service that requests web pages from a site using an HttpWebRequest object. When I try to request a page from an ASP.NET 2 site,...

ASP.NET

Menu handle program

by: Gary Wessle | last post by:

Hi I need help organizing this program in the right way. I included the code below which compiles and runs and gives the desired effect to a...

C / C++

Menu Control Odd Behavior

by: AG | last post by:

I realize that the obvious suggestion would be malware, but my definitions are up to date and I have already scanned for it. I have also tried...

ASP.NET

Problem with CSS Horizontal Dropdown Menu

by: Jim | last post by:

Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm...

HTML / CSS

how to collapse a custom toolbar in VBA

by: CD Tom | last post by:

This only shows up in access runtime. When a user select a report from my report menu when they close the report they get a menu I've called Add-ins...

General

Basic concepts of WebLogic Admin training?

by: Naresh1 | last post by:

What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...

Oracle Database

https redirect with reverse proxy

by: jalbright99669 | last post by:

Am having a bit of a time with URL Rewrite. I need to incorporate http to https redirect with a reverse proxy. I have the URL Rewrite rules made...

IIS / Internet Information Server

Hyperconverged All-in-One Streaming Engine, ushering in new age for distributed database

by: antdb | last post by:

Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...

General

How to layout php header location with a variable as the location?

by: Matthew3360 | last post by:

Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...

PHP

HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computer

by: AndyPSV | last post by:

HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...

General

How do I view Redshift db tables in Alteryx

by: Arjunsri | last post by:

I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and...

General

by: WisdomUfot | last post by:

It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...

General

PHP Curl Not wanting to connect to localhost.

by: Matthew3360 | last post by:

Hi, I have been trying to connect to a local host using php curl. But I am finding it hard to do this. I am doing the curl get request from my web...

PHP