Overlap DIVs

Question

I have a guy who wants a hideous design brought to life, this
invloves overlapping some divs for an image display. As always it
works really well in Safari (god bless the Mac) but goes all mental
in IE. The page is here:
www.pslshopfitting.co.uk/typical.htm
The images and text are within a parent div called container
and the css for them all is as follows:
#container {position:relative; top:0; left:0; width:520px;
height:400px;}
#first {position:absolute; top:0; left:0; width: 290px;
height:220px; z-index:1;
background-image:url(../images/jpg/typical_1.jpg);}
#second {position:absolute; top:131px; left:215px; width:
290px; height:220px; z-index:10;
background-image:url(../images/jpg/typical_2.jpg);}
#third {position:absolute; top:282px; left:0px; width: 290px;
height:220px; z-index:20;
background-image:url(../images/jpg/typical_3.jpg);}
#fourth {position:absolute; top:433px; left:215px; width:
290px; height:220px; z-index:15;
background-image:url(../images/jpg/typical_4.jpg);}
#fifth {position:absolute; top:584px; left:0px; width: 290px;
height:220px; z-index:5;
background-image:url(../images/jpg/typical_5.jpg);}
#first_desc {position:absolute; top:30px; left:300; width:
200px; height:200px; z-index:100; font-size:18px; font-weight:bold;
color:#006699; vertical-align:middle; float:left;}
#second_desc {position:absolute; top:230px; left:10px; width:
200px; height:200px; z-index:150; font-size:18px; font-weight:bold;
color:#006699;text-align:right; float:right;}
#third_desc {position:absolute; top:368px; left:299px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:left; float:left;}
#fourth_desc {position:absolute; top:524px; left:10px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:right; float:right;}
#fifth_desc {position:absolute; top:668px; left:295px; width:
200px; height:200px; z-index:200; font-size:18px; font-weight:bold;
color:#006699;text-align:left; float:left;}
The top lot are the images and the bottom lot are the tag
lines.
Could someone please tell me how to get this to display in
IE?? I want shot of this hideous project
Thanks in advance

Answer 1

Here is the problem you are struggling with:
All of your images/captions are in absolutely postioned
elements. Since
they are absolutely positioned, they are removed from the
normal flow. When
they are removed from the normal flow, they cannot affect any
other elements
on the page, including the relatively positioned container,
which is what
you *REALLY* need to have happen with this layout. What you
might try is to
give that container a height of about 900px or so and keep
your fingers
crossed.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Jansolo" <[email protected]> wrote in
message
news:[email protected]...
>I have a guy who wants a hideous design brought to life,
this invloves
> overlapping some divs for an image display. As always it
works really well
> in
> Safari (god bless the Mac) but goes all mental in IE.
The page is here:
>
>
http://www.pslshopfitting.co.uk/typical.htm
>
> The images and text are within a parent div called
container and the css
> for
> them all is as follows:
>
> #container {position:relative; top:0; left:0;
width:520px; height:400px;}
> #first {position:absolute; top:0; left:0; width: 290px;
height:220px;
> z-index:1;
background-image:url(../images/jpg/typical_1.jpg);}
> #second {position:absolute; top:131px; left:215px;
width: 290px;
> height:220px;
> z-index:10;
background-image:url(../images/jpg/typical_2.jpg);}
> #third {position:absolute; top:282px; left:0px; width:
290px;
> height:220px;
> z-index:20;
background-image:url(../images/jpg/typical_3.jpg);}
> #fourth {position:absolute; top:433px; left:215px;
width: 290px;
> height:220px;
> z-index:15;
background-image:url(../images/jpg/typical_4.jpg);}
> #fifth {position:absolute; top:584px; left:0px; width:
290px;
> height:220px;
> z-index:5;
background-image:url(../images/jpg/typical_5.jpg);}
>
> #first_desc {position:absolute; top:30px; left:300;
width: 200px;
> height:200px; z-index:100; font-size:18px;
font-weight:bold;
> color:#006699;
> vertical-align:middle; float:left;}
> #second_desc {position:absolute; top:230px; left:10px;
width: 200px;
> height:200px; z-index:150; font-size:18px;
font-weight:bold;
> color:#006699;text-align:right; float:right;}
> #third_desc {position:absolute; top:368px; left:299px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:left; float:left;}
> #fourth_desc {position:absolute; top:524px; left:10px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:right; float:right;}
> #fifth_desc {position:absolute; top:668px; left:295px;
width: 200px;
> height:200px; z-index:200; font-size:18px;
font-weight:bold;
> color:#006699;text-align:left; float:left;}
>
> The top lot are the images and the bottom lot are the
tag lines.
>
> Could someone please tell me how to get this to display
in IE?? I want
> shot of
> this hideous project
>
> Thanks in advance
>