We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

IE7 absolute and relative positioning problems ...

Eternal_Student
on
Medium Priority
469 Views
Last Modified: 2012-05-07
Hi,

If you look at the following code in IE7 and FF you will see the difference. The layer should appear over all other layers but in IE7 it doesn't ... any ideas?

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
 
<div style="position:relative;width:300px;height:200px;border:1px solid #000;">
	<div style="position:absolute; width:200px; height:400px; background-color:#FFFF00;border:1px dotted #ff0000; z-index:99">This box should overlap the box below?</div>
</div>
 
<div style="position:relative; width:300px; height:200px; border:1px solid #000; background-color:#CCCCCC; z-index:0;">
	<p>... But it doesn't in IE7?</p>
</div>
 
</body>
</html>

Open in new window

Comment
Watch Question

David H.H.LeeDigital Marketing (Hospitality)
CERTIFIED EXPERT

Commented:
Hi Eternal_Student,
Try reduce the z-index using negative value.
eg:
<div style="position:relative; width:300px; height:200px; border:1px  solid #000; background-color:#CCCCCC; z-index:-1;">

Author

Commented:
Hi x com,

I had already tried that and the div disappears completely.

It works in this example I have given but there must be some other factors in the real version.

Any other ideas?
Digital Marketing (Hospitality)
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Documment</title>
</head>
 
<body>
    <div style="position:absolute;width:200px; height:400px; background-color:#FFFF00;border:1px dotted #ff0000; z-index:1">This box should overlap the box below?</div>
<div style="position:relative;width:300px;height:200px;border:1px solid #000;">
     
 
 </div>
<div style="position:relative; width:300px; height:200px; border:1px solid #000; background-color:#CCCCCC; z-index:0;">
        <p>... But it doesn't in IE7?</p>
</div>
 
</body>
</html>

Open in new window

Commented:
For me ditch the relative positioning and the z-index - then it displays how you wish.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
 
<div style="width:300px;height:200px;border:1px solid #000;">
        <div style="position:absolute; width:200px; height:400px; background-color:#FFFF00;border:1px dotted #ff0000;">
		This box should overlap the box below?
	</div>
</div>
 
<div style="width:300px; height:200px; border:1px solid #000; background-color:#CCCCCC;">
        <p>... But it doesn't in IE7?</p>
</div>
 
</body>
</html>

Open in new window

Author

Commented:
OK - I have noticed that if I add position:relative to my container it works by setting the z-index to -1.

Why would the container need position:relative?

Author

Commented:
But now when I set the z-index to -1 it hides in FF with position:relative on the container!!!

I have added a hack for ie ... any ideas why this is happening also?

Here is what I have ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
 
<div style="width:99.8%;font-size:82%;background-color:#fff; position:relative">
 
<div style="position:relative;width:300px;height:200px;border:1px solid #000;">
	<div style="position:absolute; width:200px; height:400px; background-color:#FFFF00;border:1px dotted #ff0000; z-index:99">This box should overlap the box below?</div>
</div>
 
<div style="position:relative; width:300px; height:200px; border:1px solid #000; background-color:#CCCCCC; *z-index:-1">
	<p>... But it doesn't in IE7?</p>
</div>
 
</div>
 
</body>
</html>

Open in new window

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.