Solved

IE7 absolute and relative positioning problems ...

Posted on 2009-07-02
8
452 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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).

734 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