IE7 CSS Position Issue with Image

HTML & CSS
1

I’m trying to position an image in th ebottom left corner of a container and in FF, Chrome & Safari the image is in the correct position but in IE7 it’s not.

Any tips on how to get it in the correct position in IE7?

Thanks

http://cookingsecrets.togetheragency.co.uk:8080/contact.htm

/* Contact Form */

#oRightContentContact	{
	border:0px solid red;
	width:321px;
	margin-right:2px;
	font-style:normal;
	margin-top:-85px;
	font-size:11px;
	color:#43003E;
	position:absoloute;
	}
	
#oRightContentContact img 	{
	margin-right:0px;
	border:0px solid red;
	float:right;
	position:relative;
	left:697px;
	display:block;
	margin-top:-555px;
	bottom:-21px;
	
}

#oLeftContentContact	{
	width:550px;
	float:left;
	margin-top:100px;
	}
	
#oLeftContentContact h2 {
	border-bottom:1px solid red;
	padding-bottom:5px;
	}
	
#oContactForm {
	border:0px solid red;
	float:left;
	width:550px;
	margin-top:15px;
	}
	
#oContactFormLeft {
	font-size:11px;
	float:left;
	width:160px;
	padding-right:20px;
	border-right:1px solid #CCCCCC;
	height:242px;
	}
	
#oContactFormRight {
	font-size:11px;
	float:right;
	width:340px;
	border:0px solid red;
	}

#oContactFormRight form table tr td {
	padding:2px;
	color:#421B3E; 
	}
	
#oContactFormRight form table tr td input{
	width:95%;
	}
	
#oContactFormRight form table tr td textarea {
 	height:80px;
	width:95%;
	vertical-align:top;
	}
	
#oMapDownload {
	margin-top:140px;
	border:0px solid red;
	height:20px;
	background:url('../../images/page/pdf.gif') left 0px no-repeat;
	padding-left:25px;
	padding-top:2px;
	font-weight:bold;
	}
2

Hi,

You’ve placed that a bit strangely haven’t you :slight_smile:

The div is smaller than the image it holds which is going to confuse some browsers also.

I would change theses 2 styles as follows.


#oRightContentContact    {
    border:0px solid red;
    width:374px;
    margin-right:2px;
    font-style:normal;
    font-size:11px;
    color:#43003E;
    position:relative;
    float:right;
    }
    
#oRightContentContact img     {
    border:0px solid red;
    float:right;
    position:relative;
    bottom:-21px;
    margin-top:-100px;
}

However if you always wanted that image in the bottom of the page regardless of content on the left you would have been better setting position:relative on the main container and just absolutely placing the image at bottom:0 and right:0:

3

Sorry I meant the image of the women in the right corner.

4

Your link appears to be missing a /contact/

The pdf.gif is located at the bottom of the <div id=“oContactFormLeft”> element. If you want it to be lower than that, you will have to move it.

You might try putting it just above </div><!-- /Content End –>
to see if that is what you want.

Just reread your post and noticed that you say the problem is only IE7. I don’t have IE7 available to see the issue, so my solution is possibly wrong.