Div layout problem IE 6 and IE 7

[nichols]

I have designed a fluid rounded box on one of my website pages. However it looks completely different in IE 6 than it does in IE 7. The two middle side bars do not span the same distance as that of the middle div. There are also gaps at the top and bottom corner divs.

The css code looks like this:

#content_3_right {
	float:right;
	width:180px;
	height:394px;
	background:#ffffff;
	margin: 0px;
	padding:0px;
	background:#ffffff;
	color:#FFFFFF;
	
}
#Ukadv_type_box_top_right {
	float:right;
	margin-left:-3px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:12px;
	height:12px;
	background:#ffffff url(../v4/test1.jpg) no-repeat;
	padding:0 0 0 0;
	font-size:2px;
}
#Ukadv_type_box_top_left {
	float:left;
	margin-left:0px;
	margin-right:-3px;
	margin-top:0px;
	margin-bottom:-3px;
	height:12px;
	width:12px;
	background: #ffffff url(../v4/test2.jpg) no-repeat;
	padding:0 0 0 0;	
}
#Ukadv_type_box_top {
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:auto;
	border-top:#1f76d7 solid 3px;
	height:9px;
	background:#91b4d0;
	padding:0 0 0 0;
}
#Ukadv_type_box_middle_right {
	float:right;
	margin-left:-3px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:12px;
	height:400px;
	background:#91b4d0;
	border-right:#1f76d7 solid 3px;
	padding:0 0 0 0;
}
#Ukadv_type_box_middle_left {
	float:left;
	margin-left:0px;
	margin-right:-3px;
	margin-top:-0px;
	margin-bottom:0px;
	width:12px;
	height:400px;
	background:#91b4d0;
	border-left:#1f76d7 solid 3px;
	padding:0 0 0 0;
}
#Ukadv_type_box_middle {
	float:none;
	margin-left:-3px;
	margin-right:-3px;
	margin-top:-3px;
	margin-bottom:-3px;
	width:auto;
	height:400px;
	background:#91b4d0;
	padding:0 0 0 0;
}
#Ukadv_type_box_bottom_right {
	float:right;
	clear:both;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:12px;
	height:12px;
	background:#ffffff url(../v4/test3.jpg) no-repeat;
	padding:0 0 0 0;

}
#Ukadv_type_box_bottom_left {
	float:left;
	clear:both;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:12px;
	height:12px;
	background:#ffffff url(../v4/test4.jpg) no-repeat;
	padding:0 0 0 0;
}
#Ukadv_type_box_bottom {
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	width:auto;
	height:9px;
	border-bottom:#1f76d7 solid 3px;
	background:#91b4d0;
	padding:0 0 0 0;
}

The web page code looks like this:

<div id="content_3_right">
				<div id="Ukadv_type_box_top_right"></div>
				<div id="Ukadv_type_box_top_left"></div>
				<div id="Ukadv_type_box_top"></div>
				<div id="Ukadv_type_box_middle_right"></div>
				<div id="Ukadv_type_box_middle_left"></div>
				<div id="Ukadv_type_box_middle">
					<dl>
								<dt><a href="[URL unfurl="true"]http://www.textlinks247.com/test/New_layout/browse.php">[/URL]
								<p><strong>Text link Adverts</strong></a> - Text links are text based ads sold on a set time frame for a set price i.e. per 30 days.</p>
								</dt>
								<dt><a href="[URL unfurl="true"]http://www.textlinks247.com/test/New_layout/browse.php?show_length=0">[/URL]
								<p><strong>Pay Per Click Advertising</strong></a> - This type of online advertising is bought on a Cost Per Click (CPC) basis. You as the advertiser set your daily budget (i.e. £30 per day).
								<p></dt>
								<dt><a href="[URL unfurl="true"]http://www.textlinks247.com/test/New_layout/test.php">[/URL]
								<p><strong>Banner adverts</strong></a> - Banners come in the format of an image, a banner or flash. </p>
								</dt>
								<dt><a href="[URL unfurl="true"]http://www.textlinks247.com/test/New_layout/test.php">[/URL]
								<p><strong>Video adverts</strong></a> - Advertise in video format and increase traffic to  site. </p>
								</dt>
								<dt><a href="[URL unfurl="true"]http://www.textlinks247.com/test/New_layout/test.php">[/URL]
								<p><strong>Popunder adverts</strong></a> Adverts that appear under the browser. </p>
								</a></dt>
					</dl>
				</div>
				<div id="Ukadv_type_box_bottom_right"></div>
				<div id="Ukadv_type_box_bottom_left"></div>
				<div id="Ukadv_type_box_bottom"></div>
			</div>

I hope someone can shed some light on this because it is driving me mad.

Cheers
nichols

 

[nichols]

The url of the page with the problem above is :

http://www.textlinks247.com/test/New_layout/uk_internet_advertising_online.php

 

[Vragabond]

Your method seems very convoluted and there are many pre-made solutions available to you. I suggest you go for one of those. Here's a website listing some of them:

http://www.web2coder.com/css/list-of-rounded-corners-websites

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

There's also some useful links you could try in thread215-1468257

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd