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

I'd do it like this.


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.

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...,

Is div#content-photo inside div#panel-title-photo?