PDA

View Full Version : IE6 problem - DIV Displaying Outside Container DIV



senkei
Feb 13th, 2010, 11:32 AM
Hi guys, for the life of me i can't work out how to fix this problem. It works fine on all the normal browsers and even IE7, but not IE6. The div in question is the "associations" div. Inside it, at the bottom of this div there is a div that houses the bottom box graphics, it's meant to just sit there under the content within the associations div, but for some reason in IE6 it is outside and there appears to be a large margin in between the content and it.

http://crosswebdesigns.net/display/2009/bourkehire/

http://crosswebdesigns.net/images/associations.ie6.problem.png

Here is the HTML:


<div id="associations">
<h2>Associations</h2>
<img src="images/registered_building_practitioner.gif" class="image" alt="Registered Building Practitioner" />
<img src="images/HRIA.gif" class="image" alt="HRIA" />
<div class="boxBot"></div>
</div>
<!--/associations-->

And the CSS:


#associations {
background: url(../images/sideBox.gif) no-repeat;
width: 211px;
float: left;
margin: 0 0 15px 17px;
text-align: left;
}
#associations h2 {
color: #2e2e2e;
padding: 12px 0 20px 15px;
text-transform: uppercase;
font-weight: bold;
}
#associations .image {
display: block;

}
#associations .boxBot {
background: url(../images/sideBoxBot.gif) no-repeat;
display: block;
width: 211px;
height: 38px;
margin: 5px 0 0 0;

float: right;
}

What's mind boggling about this is that the box above it ("contact") has almost identical code (some margin differences b/c of content) but the bottom div housing the graphics is fine.

Fang
Feb 14th, 2010, 03:35 PM
#associations .boxBot {position:relative;}

senkei
Feb 15th, 2010, 04:50 AM
That did not work for me, did it work for you? :0

Fang
Feb 15th, 2010, 12:04 PM
Yes, that's why I posted it.

ahallicks
Feb 15th, 2010, 03:24 PM
Change float: right, to float: left?