IE7 Padding Issues

HTML & CSS
1

Hi,

I’ve got an issue with padding on the border of this page I’m working on

http://boots2010.togetheragency.co.uk:8080/w/headoffice/our-stories/julia-bunting/

I’ve put a border on a div called #ourstoriesbreaklinebottom however in IE7 there is a 20px padding where in the other browsers it’s ok?

Any advice?

CSS

@charset "utf-8";

#ourstoriespageheader {
	float: right;
	width: 636px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	border:0px solid red;
	}
	
#ourstoriesheaderquote { 
	padding-top: 10px;
	width: 636px;
	overflow: hidden;
	border:0px solid red;
}

#ourstoriespageheadertitle { 
	width: 636px;
	overflow: hidden;
}
	

#ourstoriespageheadertitle h1 {
	color: #00498F;
	font-weight: bold;
	font-size: 26px;
	margin: 0;
}

#ourstoriespageheadertitle p {
	font-size: 19px; 
	color: #44A5DC;
	margin-top: 6px;
}

#ourstoriespagesubtitle {
	font-size: 26px; 
	color: #44A5DC;
	margin-top:0;
	padding:0;
	border:0px solid red;
}


#ourstoriesinstruction {
	padding-top: 10px;
	font-size:12px;
	color:#605764;
	margin-top:10px;
	
}

#ourstoriesboxes	{
	float:right;
	width: 636px;
	background: transparent url('../images/common/dotted-splitter.gif') left top repeat-x;
	padding-top: 22px;
	margin-top:10px;
	border:0px solid red;
	position: relative;
	}


.ourstoriesrow	{
	clear:both;
	float:left;
	width:100%;
}

.ourstoriesboxleft {
	width:208px;
	height:101px;
	margin-bottom:7px;
	border:0px solid red;
	float:left;
	}
	
.ourstoriesboxcenter {
	width:208px;
	height:101px;
	margin-bottom:7px;
	border:0px solid red;
	float:left;
	margin-left:6px;
	}
	
.ourstoriesboxright{
	width:208px;
	height:101px;
	margin-bottom:7px;
	float:right;
	border:0px solid red;
	
	}


#ourstoriesbreakline {
	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
	*margin-bottom: 0px;
	margin-bottom: 10px;
	padding-top:10px;
	*padding-top:0px;
	float:right;
	width: 636px;
	overflow: hidden;
	border:0px solid green;
}


#ourstoriesbreaklinebottom	{
	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
	margin-bottom: 10px;
	padding-top:1px;
	float:right;
	width: 636px;
	overflow: hidden;
	border:0px solid green;
	display:inline;
	}


#ourstoriesbreaklinenopadding {
	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
	margin-bottom: 10px;
	padding-top:1px;
	float:right;
	width: 636px;
	overflow: hidden;
	border:0px solid green;
}


#oustoriestitle	{
	color:#00498e;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	margin-bottom:5px;
	}
	
#ourstoriestext {
	float:left;
	width:312px;
	border:0px solid red;
	min-height:343px;
	}
	
#ourstoriestext p {
	font-size:12px;
	color:#605764;
	margin-bottom:13px;
}

#ourstoriestext p strong {
	font-weght:bold;
	color:#00498e;
}


#ourstoriespicture	{
	margin-left:45px;	
	border:0px solid red;
	position:absolute;
	right:0;
	bottom:287px;
	*bottom:317px; /* targets IE6 and 7 */
	height:343px;
	}

#ourstoriesquote	{
	margin-left:45px;	
	border:0px solid red;
	position:absolute;
	right:0;
	top:25px;
	}

#ourstoriesfooter {
	float:left;
	margin-top:0px;
	width: 637px;
	border:0px solid red;
	}
	
#ourstoriesfootertitle	{
	color:#00498e;
	font-weight:bold;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:10px;
	}
	
#furtherstories {
	border:0px solid red;
	float:left;
	}

#furtherstories ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

#furtherstories ul li {
	float:left;
	border-right:1px solid #c0c0c0;
	width:158px;
	height:80px;
}

#obacklink {
	float:right;
	font-weight:bold;
}

#obacklink .morelink a {
	float: left;
	text-decoration: none;
	font-weight: bold;
	height: 19px;
	line-height: 19px;
	vertical-align: middle;
	padding-right: 24px;
	color: #00498F;
	background: transparent url('../images/common/arrow_button_a.png') right center no-repeat;
}

#obacklink  .morelink a:hover {
	background-image: url('../images/common/arrow_button_b.png');
}


#ourstoriesfooterspacer {
	float:left;
	width:100%;
	margin-bottom:40px;
	}
	
#ourstoriespagination	{
	border:0px solid red; 
	float:right; 
	width:100%;
	text-align:right;
	
}

/* Our Stories Slider */

#slideshow #slidesContainer {
  margin:0 auto;
  width:636px;
  overflow:auto; /* allow scrollbar */
  position:relative;
  border:0px solid red;
}

.control {
	cursor:pointer;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#00498e;
	font-weight:bold;
	text-decoration: none;
	font-weight: bold;
	height: 19px;
	line-height: 19px;
	vertical-align: middle;
	padding-right: 24px;
	color: #00498F;
	background: transparent url('../images/common/arrow_button_a.png') right center no-repeat;
	display: block;

	}
	
.control:hover	{
	background-image: url('../images/common/arrow_button_b.png');
	text-decoration:none;
	}
2

Hi,

Try setting the rule (ourstoriesbreaklinebottom) to have font-size:0 and then set the image in the ul to vertical-align:bottom.

I’m not sure why you just didn’t use the existing wrapper and save using an extra div though :slight_smile: