Solved

IE7 not displaying fly-out menus correctly, z-index issue?

Posted on 2011-02-28
3
209 Views
Last Modified: 2012-08-13
My page:

http://www.dbiservices.com/new/deangelobrothersinc

Works great in all browsers, including IE8. Client tells me users with IE7 are showing a problem. Screenshot is attached. I have z-index set already (I think). Any idea what this could be? Thank you!
default.png
0
Comment
Question by:bbdesign
  • 2
3 Comments
 
LVL 14

Accepted Solution

by:
R-Byter earned 500 total points
ID: 35002497
Here you go. Replace this classes in you css part:

SPAN.mainlinksfly A {
	PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #e7eeda; PADDING-LEFT: 8px; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-TOP: 4px; Z-INDEX: 1000; POSITION: relative;
}
SPAN.mainlinksfly A:hover {
	BACKGROUND-COLOR: #d5e2c0; Z-INDEX: 1000; POSITION: relative;
}
div.bodyleft, div.ph_home3 {
	z-index: -1000;
}

Open in new window


Basically you need to set z-index and position to span.mainlinksfly a element and also put lower z-index number and of course position on elements which will be overlaid.

Regards
0
 

Author Comment

by:bbdesign
ID: 35010875
Fixed. Thank you!
0
 
LVL 14

Expert Comment

by:R-Byter
ID: 35010971
You're welcome and thanks for the points.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question