Help - Search - Members - Calendar
Full Version: Gap Between Image and Border - Newbie
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
murray:451
First let me say I'm not a good programmer, let alone a CSS programmer. I've tried but I don't have it! I've built my site by borrowing ideas and code from friends and free code and used parts from each to get the effect I want. I cheat - it's the only way my brain can cope with CSS.

So, try as I might I haven't been able to solve this problem, even though I've read many solutions. How do I get rid of the gap between the image and the border on my site! Help please.

www.clouddays.co.uk

style sheet starts here.,

html,body{margin:0;padding:0}
body{font: 76% "HelveNueThin", Helvetica, Arial,sans-serif;text-align: center;background-image: url(resources/bg.png);background-repeat: repeat}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}

div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}

div#container{text-align:left}
div#container{width:850px;margin:0 auto}

div#container link { color:purple ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#container link a{color:#4f5053; text-decoration:none;}

div#content{float: left;width: 500px;height:550px;background-image: url(resources/bg-middle.png);background-repeat: repeat;}
div#content p{line-height:1.4}
div#content-photo{margin: 35px 65px 25px 65px;border: 10px gray solid;}
div#content-photo a{text-decoration:none;}

div#content-link { color:#4f5053 ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#content-link a{color:#4f5053; text-decoration:none;}

div#panel{float: right;width: 300px;height: 550px; background-image: url(resources/bg-left-panel.png);background-repeat: repeat;}
div#panel-title{text-align: center;font-size: 35px;color: black;padding-top: 45px;text-transform: lowercase;}
div#panel-title-photo{margin: 15px 25px 15px 25px;border: 10px gray solid;}

div#panel-link { color:#4f5053 ; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:10px;}
div#panel-link a{color:#4f5053; text-decoration:none;}

div#panel p{font-size: 13px;text-align:left;padding: 5px 15px 5px 15px;color:black;}
div#panel .p_center{font-size:13px;text-align:center;padding: 5px 15px 5px 15px; color:black;}

div#panel-gallery{float: right;width: 300px;height: 400px; background-image: url(resources/bg-left-panel.png);background-repeat: repeat;}
div#panel-gallery-title{text-align: center;font-size: 35px;color: black;padding-top: 45px;text-transform: lowercase;}
div#panel-gallery-title-photo{margin: 15px 25px 15px 25px;border: 10px gray solid;}

div#main-gallery{float: left;width: 500px;height:550px;background-image: url(resources/bg-middle.png);background-repeat}
div#main-gallery p{line-height:1.4}
div#main-gallery-view{float: left; width: 450px; height: 450px; position: relative; background-color: teal; margin: 20px; padding: 10px;}

pandy
I'd do it like this.
CODE
div#content-photo img    { display: block }


For the explanation, see https://developer.mozilla.org/en/Images,_Ta...Mysterious_Gaps . Meyer talks about tables, that was the problem at hand back then, but this isn't limited to tables. You might want to skim though the article because you will encounter this many times.
murray:451
Thank you.

I guess if I asked why it works when the css now looks like this;

div#panel-title-photo img{display:block; .......}

...but the index.html looks like this;

<div id="content-photo"><img src="resources/clouddays.jpg" ......</div>

I doubt I'd understand the answer !!

Nonetheless, I thank you again. My skill has advanced a smidgeon...,
Darin McGrew
Is div#content-photo inside div#panel-title-photo?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.