Solved

IE7 absolute and relative positioning problems ...

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 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