• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

CSS IE7 Overlay Bug

Hi There,

Our login box is always not overlaying at the top on IE7.When you hover it to Sign In @ the top of the page,the login box doesn't display correcly.
The site is @ http://78.153.202.163/


ie7-bug.docx
0
informabiz
Asked:
informabiz
  • 2
1 Solution
 
LZ1Commented:
Your #header #nav does not have any z-index applied. And since IE 7 hates z-index and layers, your going to have to apply the proper positioning.  Absolute should work, but I know it's going to screw with your layout.  
However, just for right now, try positioning it absolutely with a lower z-index.  Let us know when you've done that and we'll have another look
0
 
remorinaCommented:
Hi Informabiz,
Can you please try adding z-index value to the css class #header #top-header as below.

Let us know how it goes

Cheers
#header #top-header {
	margin: 24px 0 0 0;
	float: right;
	background: url(../images/bgTopHeader.png) no-repeat;
	width: 444px;
	height:  49px;
	position: relative;
        z-index:100;
}

Open in new window

0
 
informabizAuthor Commented:
Hi All,

Thanks for response.I have tried z-index but didn't work.
But we have found one solution on online:

We used JS to fix it.

$('#header #login-button, #header #login-box').mouseover(function(){
             $("#header #login-box").css({'top':'45px'});
             $("#nav li, #nav li a").css({'position':'static'});
}).mouseout(function(){
             $("#header #login-box").css({'top':'-9999px'});
             $("#nav li, #nav li a").css({'position':'relative'});
});

Thanks for alll your efforts
0
 
informabizAuthor Commented:
Found the answer onlie:
$('#header #login-button, #header #login-box').mouseover(function(){
             $("#header #login-box").css({'top':'45px'});
             $("#nav li, #nav li a").css({'position':'static'});
}).mouseout(function(){
             $("#header #login-box").css({'top':'-9999px'});
             $("#nav li, #nav li a").css({'position':'relative'});
});
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now