gaps in fluid image border

**antonyx** · May 23, 2011 01:48

hello all.

my page is here: ##

as you can see there are 2 gaps in the border of my main container (top left and top right corner). can anybody see what is causing this. my code is below, thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="/scripts/style.css"
	media="screen,projection,tv"
/>

<title>
	##
</title>

</head><body>

<div id="wrapper">
	<div id="header">
		<!--#include virtual="\includes\header.asp"-->
	</div>
	<div id="container">
		<div id="leftdiv">
			<!--#include virtual="\includes\left-bar.asp"-->
		</div>
		
		<div id="content">
			
			<div class="contentBox">
		<h2><span></span>Welcome to London Heathrow Cars&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe src="http://free.timeanddate.com/clock/i2ifgyzy/n136/tluk/fs10/fcfff/tc5e9fa5/pc5e9fa5/ahl/tt0/tw1/tm1/td2/th1/ts1/ta1/tb1" frameborder="0" width="151" height="15"></iframe>
</h2>


		<div class="borderFirstSide"><div class="borderSecondSide">
			
		<!-- .borderSecondSide, .borderFirstSide --></div></div>
		<div class="borderBottom"><div></div></div>
	<!-- .contentBox --></div>

		</div>
		
		<div id="rightdiv">
			<!--#include virtual="\includes\right-bar.asp"-->
		</div>
	</div>
	<div id="footer">
		
	</div>
</div>

</body></html>

Code:

#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0px;
	width: 976px;
}

#header {
}

#leftdiv {
	float: left;
	width: 215px;
}

#phonediv {
	background-image: url(http://www.heathrowcar.co.uk/images/phone-box.jpg);
	background-repeat: no-repeat;
	background-position:20px; 
}

#quotediv {
	background-image: url(http://www.heathrowcar.co.uk/images/quote-box.jpg);
	background-repeat: no-repeat;
	background-position:20px; 
}

#rightdiv {
	float: right;
	width: 261px;
}

#content { 
	float: left;
	width: 500px;
}

#footer {
	clear: both;
	background: #A2A2A2;
}


.contentBox {
	width:500px;
	min-width:500px;
	max-width:500px;
	margin:0 auto;
	text-align:left;
}

* html .contentBox {
	width:500px;
	width:expression(
		(document.body.clientWidth>1280) ? "1248px"
			: ((document.body.clientWidth>640) ? "95%" : "608px")
	);
}

.contentBox h2 {
	position:relative;
	height:1%;
	overflow:hidden; /* chop off bottom of span automatically */
	padding:8px 0 8px 8px;
	font:bold 11pt arial,helvetica,sans-serif;
	color:#FFF;
	background:#59A url(http://www.heathrowcar.co.uk/images/borders.png) 0 0 no-repeat;
}

.contentBox h2 span {
	float:right;
	width:14px;
	height:84px;
	margin:-8px 0 -76px -14px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1266px 0 no-repeat;
}

.contentBox .borderFirstSide {
	padding-left:1px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1280px 0 repeat-y;
}

.contentBox .borderSecondSide {
	padding:1em 7px 0 0;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) top right repeat-y;
}

.contentBox .borderBottom {
	overflow:hidden; /* wrap floats */
	height:12px;
	font-size:1px; /* prevent IE smallest height bug */
	background:url(http://www.heathrowcar.co.uk/images/borders.png) 0 -84px no-repeat;
}

.contentBox .borderBottom div {
	float:right;
	width:14px;
	height:12px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1266px -84px no-repeat;
}

**Paul O'B** · May 23, 2011 02:02

Hi,

It will be the default bottom margin on the h2 pushing the element away because margins will appear to pass through their parent container due to the collapsing margin effect. Just set the margin to zero which will do the trick. (In a container you can always add a 1px top and bottom padding if you don't want the margins of the inner elements to push through.)

You should also never use height:1% and overflow:hidden in the same rule because you may get just what you want a 1 % height with all content in excess hidden.

Code:

.contentBox h2 {
  background:#5599AA url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat 0 0;
  color: #FFFFFF;
  /*height: 1%;*/
  margin: 0;
  overflow: hidden;
  padding: 8px 0 8px 8px;
  position: relative;
}
* html .contentBox h2{height:1%;overflow:visible}

**antonyx** · May 23, 2011 02:10

thanks for that response paul much appreciated.

a couple more things if you dont mind. firstly the page now looks like this: ##

what i would prefer is rather then have the h2 tag set the top of the container (and the green colour) - i would prefer if the container was it's normal shape (i.e. green top, with borders) without a h2 tag. right now if i remove the h2 from my html it removes the green part of the box.

lastly if i can get that green part to appear regardless of whether there is a h2 tag or not, i would prefer to be able to set the height of it manually..

here is my current css

Code:

#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0px;
	width: 976px;
}

#header {
}

#leftdiv {
	float: left;
	width: 215px;
}

#phonediv {
	background-image: url(http://www.heathrowcar.co.uk/images/phone-box.jpg);
	background-repeat: no-repeat;
	background-position:18px; 
}

#quotediv {
	background-image: url(http://www.heathrowcar.co.uk/images/quote-box.jpg);
	background-repeat: no-repeat;
	background-position:18px; 
}

#rightdiv {
	float: right;
	width: 261px;
}

#content { 
	float: left;
	width: 500px;
}

#footer {
	clear: both;
	background: #A2A2A2;
}


.contentBox {
	width:500px;
	min-width:500px;
	max-width:500px;
	margin:0 auto;
	text-align:left;
}

* html .contentBox {
	width:500px;
	width:expression(
		(document.body.clientWidth>1280) ? "1248px"
			: ((document.body.clientWidth>640) ? "95%" : "608px")
	);
}

.contentBox h2 {
  background:#5599AA url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat 0 0;
  color: #FFFFFF;
  /*height: 1%;*/
  margin: 0;
  overflow: hidden;
  padding: 8px 0 8px 8px;
  position: relative;
}

.contentBox h2 span {
	float:right;
	width:14px;
	height:84px;
	margin:-8px 0 -76px -14px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1266px 0 no-repeat;
}

* html .contentBox h2{height:1%;overflow:visible}

.contentBox .borderFirstSide {
	padding-left:1px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1280px 0 repeat-y;
}

.contentBox .borderSecondSide {
	padding:1em 7px 0 0;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) top right repeat-y;
}

.contentBox .borderBottom {
	overflow:hidden; /* wrap floats */
	height:12px;
	font-size:1px; /* prevent IE smallest height bug */
	background:url(http://www.heathrowcar.co.uk/images/borders.png) 0 -84px no-repeat;
}

.contentBox .borderBottom div {
	float:right;
	width:14px;
	height:12px;
	background:url(http://www.heathrowcar.co.uk/images/borders.png) -1266px -84px no-repeat;
}

**Paul O'B** · May 23, 2011 03:05

Originally Posted by antonyx

thanks for that response paul much appreciated.

a couple more things if you dont mind. firstly the page now looks like this: ##

what i would prefer is rather then have the h2 tag set the top of the container (and the green colour) - i would prefer if the container was it's normal shape (i.e. green top, with borders) without a h2 tag. right now if i remove the h2 from my html it removes the green part of the box.

lastly if i can get that green part to appear regardless of whether there is a h2 tag or not, i would prefer to be able to set the height of it manually..

If I understand you correctly then just add a div where you have the h2 and apply the styling to the div instead of the h2.

e.g.

Code:

.boxtop {
  background: url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat 0 0 #5599AA;
  color: #FFFFFF;
  margin: 0;
  overflow: hidden;
  padding: 8px 0 8px 8px;
  position: relative;
min-height:50px;/* or whatever*/
}
* html .boxtop{height:50px}/* for ie6*/

If you then need an h2 then just stick it inside that div as required but remember to address its margins etc.

**antonyx** · May 23, 2011 03:59

thanks paul, if you see the page now the green section is wider than the box, i have tried to adjust the boxtop width and am not getting anywhere, how can i match the widths?

thanks

Code:

.boxtop {
  background: url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat 0 0 #5599AA;
  color: #FFFFFF;
  margin: 0;
  margin-top:13px;
  overflow: hidden;
  padding: 8px 0 8px 8px;
  position: relative;
min-height:16px;/* or whatever*/

}
* html .boxtop{height:16px}/* for ie6*/

**Paul O'B** · May 23, 2011 04:17

Hi,

You must have changed or removed something else as the div should have performs the same function as the h2 and the display would have been the same. Did you remove an inner elements or something similar?

As you are using a sprite the right side of the image needs to be supplied with another element. You could use the contentBox for this.

Code:

.contentBox {
    width:500px;
    min-width:500px;
    max-width:500px;
    margin:13px auto 0;
    text-align:left;
    background: url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat 0 0 #5599AA;
}
* html .contentBox {
    width:500px;
 width:expression(  (document.body.clientWidth>1280) ? "1248px"             : ((document.body.clientWidth>640) ? "95%" : "608px")  );
}
.boxtop {
    color: #FFFFFF;
    margin: 0;
    overflow: hidden;
    padding: 8px 0 8px 0;
    margin:0 0 0 8px;
    position: relative;
    min-height:16px;/* or whatever*/
    background: url("http://www.heathrowcar.co.uk/images/borders.png") no-repeat -788px 0;
}
* html .boxtop {
    height:16px
}/* for ie6*/

Note the extra image and margin/padding changes.

You must have originally had something similar in place otherwise you wouldn't have both sides of the sprite showing.

**antonyx** · May 23, 2011 04:26

you are the grand master, thanks a lot

User Tag List

Thread: gaps in fluid image border

Thread Tools

Display

gaps in fluid image border

Bookmarks

Bookmarks

Posting Permissions