M
Martin Plotz
Hi everybody,
I have run into a problem which I hope somebody of you can solve:
My page contains 2 "div"s which are located next to each other (css
position "absolute"). Both contain an image.
I would now like to add another div within the left div. This new div
should be visible even if it is bigger than its parent div.
I have created the page like shown at the end of this post (using CSS
overflow:visible). It works on Firefox but not IE6. Do you have any
suggestions what could be done to make it work with IE?
(I know that it would help if the div on top of the others would not be
a child of the left div, but that would cause some other problems,
because there is much JScript in my page).
Thanks for any help,
Martin
Here is the validated markup:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE Overflow</title>
</head>
<body>
<div
style="position:absolute;left:0px;top:0px;overflow:visible;width:64px;height:64px;">
<img alt="img1" style="z-index:0;" src="img1.jpg" />
<div style="position:absolute;left:12px;top:0px;z-index:2;">
<img src="inner.jpg" alt="img_inner" />
</div>
</div>
<div style="position:absolute;left:64px;top:0px;z-index:0;">
<img src="img2.jpg" alt="img2" style="z-index:0;" />
</div>
</body>
</html>
I have run into a problem which I hope somebody of you can solve:
My page contains 2 "div"s which are located next to each other (css
position "absolute"). Both contain an image.
I would now like to add another div within the left div. This new div
should be visible even if it is bigger than its parent div.
I have created the page like shown at the end of this post (using CSS
overflow:visible). It works on Firefox but not IE6. Do you have any
suggestions what could be done to make it work with IE?
(I know that it would help if the div on top of the others would not be
a child of the left div, but that would cause some other problems,
because there is much JScript in my page).
Thanks for any help,
Martin
Here is the validated markup:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IE Overflow</title>
</head>
<body>
<div
style="position:absolute;left:0px;top:0px;overflow:visible;width:64px;height:64px;">
<img alt="img1" style="z-index:0;" src="img1.jpg" />
<div style="position:absolute;left:12px;top:0px;z-index:2;">
<img src="inner.jpg" alt="img_inner" />
</div>
</div>
<div style="position:absolute;left:64px;top:0px;z-index:0;">
<img src="img2.jpg" alt="img2" style="z-index:0;" />
</div>
</body>
</html>