Absolute Div, wrapped in Relative Div (IE6 - AARRRGGHH)

[tenderfoot]

Hiya guys,

i am not sure if this is the best way to do this, but this is what I am trying to do:

I have three columns in a wrapper div called "templateContent3".

1. The second column just contains text content
2. And the third column contains a relatively positioned div.
3. The first column contains a relative div that has a nested absolute div inside of it. This renders perfectly in FF/IE7 but not in IE6.

My HTML is:

Code: Select all

<div id="templateContent3">
                <div id="col1">
                    <h5>My heading
                    </h5>
                    <img src="/images/h5-secondary4.gif" />
                    <ol>
                        <li><a href="#">Link</a></li>
                    </ol>
                    
                
                    <div id="postcardGlassesHolder">
                        <div id="postcardGlasses">
                            <!--<img src="/images/glasses-postcard.png" alt="Sun glasses and postcard" />  -->
                        </div>
                    </div>
                    
                </div>
   
                <div id="col2">
                    <h1 class="main">My other heading</h1>
                 
                    
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>                    
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

                </div>
   

                <div id="col3">
                    <img src="/images/BritishIsles.png" alt="British Isles" class="BritishIsles" />
                    
                    
                    <form method="post" action="#" id="Locator" name="Locator">
                        <label for="region">Select your region</label>
                        <select name="region" id="region">
                            <option value="1" selected="selected">Region</option>
                        </select><br />
                        
                        <label for="town">Select your town</label>
                        <select name="town" id="town">
                            <option value="2" selected="selected">Town</option>
                        </select>
                        
                        <input type="submit" name="SubmitRegionTown" id="SubmitRegionTown" value="Submit" />
                    </form>
              </div>
            </div>

My CSS is:

Code: Select all

body#wideTemplateStyle1 div#templateContent3 div#col1{width:200px;float: left;margin: -5px 0 0 10px;padding:0;}
body#wideTemplateStyle1 div#templateContent3 div#col1 div#postcardGlassesHolder{
    position: relative;
    top: -200px;
    width:1250px;
}

body#wideTemplateStyle1 div#templateContent3 div#col1 div#postcardGlasses{
    width: 800px;
    height: 666px;
    background-image: url(/images/glasses-postcard.png);
    background-position: center left;
    background-repeat: no-repeat;
    position: absolute;
    top: 200px;
    right: 1050px;    
}


body#wideTemplateStyle1 div#templateContent3 div#col1 ol li{

background-image: url(/images/dottedIE6.gif);
background-position: bottom;
background-repeat: repeat-x;
width: 190px;
font-size: 1em;
line-height: 220%;
font-weight: normal;
text-indent: 10px;
}

body#wideTemplateStyle1 div#templateContent3 div#col1 ol li a {
color: #4D4D4D;
background-color: transparent;
}

body#wideTemplateStyle1 div#templateContent3 div#col2{
width:350px;
float: left;
margin: 0 10px;
}

body#wideTemplateStyle1 div#templateContent3 div#col2 p{
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.15em;
line-height: 150%;
margin: 20px 0;
color: #4D4D4D; 
background-color: transparent;
}

body#wideTemplateStyle1 div#templateContent3 div#col3{
width:800px;
height: 571px;
background-image: url(/images/postcard.png);
background-position: top;
background-repeat: no-repeat;
position: relative;
left: 570px;
padding: 85px 0 0 0;
}

body#wideTemplateStyle1 div#templateContent3 div#col3 img.BritishIsles{
    position: relative;
    top:0;
    right: 500px;
}

body#wideTemplateStyle1 div#templateContent3 div#col3 form#Locator {
width: 250px;
margin: 20px 0 0 35px;
}

body#wideTemplateStyle1 div#templateContent3 div#col3 form#Locator select{
width: 140px;
clear:both;
margin: 0 0 0 22px;
border: 1px inset #4D4D4D;
background-color: #E0E0E0;
color: #4D4D4D;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.1em;
padding: 1px;
}

body#wideTemplateStyle1 div#templateContent3 div#col3 form#Locator label{
width: 230px;
display:block;
clear:both;
margin:2px 0 2px 22px;
color: #243F8A;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.1em;
}

body#wideTemplateStyle1 div#templateContent3 div#col3 form#Locator input#SubmitRegionTown
{
width: 60px;
color:#000;
background-color: #E4CA42;
border: 1px solid #868686;
padding: 1px;
font-size: 1.1em;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Any ideas?

The catch 22 I have is I want to absolutely position the div "#postcardGlasses" to take it out of flow for where it needs to render, but I need to close up the space it leaves behind - hence relatively position the containing div "#postcardGlassesHolder".

Thanks in advance for this!

[saltedm8]

have a look here, is this it ?

not sure http://www.agum.com/web/2008/01/17/c...yout-property/

[tenderfoot]

Cheers, saltedm8. I did have a look at: http://www.agum.com/web/2008/01/17/c...yout-property/

The fix in this article did not work for me, but after some trial and error experimentation, I created an IE6 conditional stylesheet with this style for the containing div of the absolutely position div...

Code: Select all

body#wideTemplateStyle1 div#templateContent3 div#col1 div#postcardGlassesHolder{position: absolute;top: 0;}

...instead of using a relative positioning that I used for more compliant browsers:

Code: Select all

body#wideTemplateStyle1 div#templateContent3 div#col1 div#postcardGlassesHolder{
    position: relative;
    top: -200px;
    width:1250px;
}

It seems to work. But I do not know why which is slightly annoying and probably means that the solution is incorrect and will break later on when the design in nearing finished.

But I guess for now I will have to accept to cross that bridge when I come to it!

[saltedm8]

the great thing with css is that it is easy to fix if it messes up, glad to be of help