SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    gaps in fluid image border

    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;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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}

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by antonyx View Post
    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.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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*/

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you are the grand master, thanks a lot


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
  •