Solved

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

Posted on 2011-02-28
3
211 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 52
Little bit of help styling my heading 3 31
Using HTML5 and CSS How to place one element in front of another elemen 7 34
Using Specialized Fonts in CSS 1 24
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

829 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