IE7 absolute and relative positioning problems ...

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

LVL 18
Eternal_StudentAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
David H.H.LeeConnect With a Mentor Commented:
>>..It works in this example I have given but there must be some other factors in the real version.
I only able test via the test case here. Perhaps any other control that causing the issue? Possible post some of the real version code that not working properly?
0
 
David H.H.LeeCommented:
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;">
0
 
Eternal_StudentAuthor 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?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
poweraddictCommented:

<!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

0
 
arekkusuCommented:
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

0
 
Eternal_StudentAuthor 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?
0
 
Eternal_StudentAuthor 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

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.

All Courses

From novice to tech pro — start learning today.