Solved

IE7 absolute and relative positioning problems ...

Posted on 2009-07-02
8
447 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

0
Comment
Question by:Eternal_Student
8 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24761886
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 24761956
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
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 200 total points
ID: 24769727
>>..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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 6

Expert Comment

by:poweraddict
ID: 24770120

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

Expert Comment

by:arekkusu
ID: 24770736
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 24772852
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
 
LVL 18

Author Comment

by:Eternal_Student
ID: 24772958
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
 
LVL 42

Assisted Solution

by:David S.
David S. earned 50 total points
ID: 24774946
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

776 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