SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Padding Issues

    Hi,

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

    http://boots2010.togetheragency.co.u...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
    Code 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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •