Member Avatar for ryy705

Hello,

Please take a look at :
The site works fine in IE8 and FF3.5

But I am having trouble with the menu in IE7. I made the mistake of not testing the site in IE7 as I was putting it together.

If you hover over a menu item, the drop down does not line up with the parent element in IE7. Has this happened to anyone before?
(please use IE Tester if you do not have IE7 installed)

Son of Suckerfish simply hides the drop down with left: -9999 and brings it back with left:auto;
I know this method works fine in IE7. Did I screw up some padding or margin somewhere?

I have spent substantial amount of time with this. But I am unable to figure it out. Please Please help.

I am pasting the css file for navigation for your covenience:

#nav {
	overflow: hidden;
	height: 30px;
	background-color: #CA0000;
	border-top: 3px solid #000;
	border-bottom: 3px solid #000;
}
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;
	font-size: 11px;
}

#nav li { /* all list items */
	
	font-family: "Verdana Bold";
	font-weight: bold;
	float: left;
	line-height: 30px;
	text-align: center;
	width: 80px; /* width needed or else Opera goes nuts */
}
#nav li a {
	color: #FFF;
	margin:0;
	padding-left: 0px;
	padding-right: 0px;
}
#nav li li a,#nav li li li a{
	color: #000;
}
#nav li li a {
	border-left: 1px solid #CA0000;
	border-right: 1px solid #CA0000;
	border-bottom: 1px solid #CA0000;
	border-top: 1px solid #CA0000;
	padding-left: 3px;
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #EFEFEF;
	width: 115px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul :hover { 
  background: #FFF;
}

#nav li ul li, #nav li ul li ul li{ /* second & third -level lists */
	line-height: 15px;
	text-align: left;
}
#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#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 { /* lists nested under hovered list items */
	left: auto;
}
  • 2 Contributors
  • 1 Reply
  • 187 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

A few focused checks will fix this in IE7. The misalignment you describe is usually caused by the submenu being absolutely positioned without the parent <li> acting as the positioning context, combined with centering styles or mixed units that change the anchor width. is right to point at the text-align on the <li> — that can shift inline/inline-block children and make the visible label and the submenu use different reference boxes.

A compact, cross-browser approach is to make each <li> the positioned ancestor, make the anchor fill its <li>, and use explicit offsets for visible and nested submenus:

/* make each li the positioning context (helps IE7) */
#nav li { position: relative; zoom: 1; }

/* ensure the link fills the li so visual label and position match */
#nav li a { display: block; width: 100%; box-sizing: border-box; }

/* hide off-screen and place submenu directly under its parent */
#nav li > ul { position: absolute; left: -9999px; top: 100%; }

/* show aligned under parent */
#nav li:hover > ul,
#nav li.sfhover > ul { left: 0; }

/* nested flyouts sit to the right of their parent item */
#nav li ul li > ul { left: 100%; top: 0; }

Why this helps: position:relative on the <li> gives the absolutely positioned submenu a stable containing block. Using width:100% on the anchor removes mismatches caused by mixing em and px. Explicit left:0 (rather than leaving it to the browser) produces consistent alignment across engines. The zoom:1 is a lightweight IE7 "hasLayout" trigger if you still see odd rendering.

Extra checks: confirm a standards doctype (no quirks mode), validate the nav markup for stray text nodes, and test in a real IE7 environment (or BrowserStack/IE tester). If accessibility is a concern, keep the off-screen technique or use ARIA instead of display:none.

Member Avatar for ko ko

Check your mail list tag

<li>

, it has

text-align: center

property. It can move all child element to center. If you want to main menu text to center, you may give

<a>

element to text align property. But, notice that it will apply all text in anchor tag. Let try this:

#nav li a {
text-align: center }
#nav li:hover ul a {
text-align: left }

It will work.
Sorry for bad English skill.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.