Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Gap Between Image and Border - Newbie

Posted by: murray:451 Mar 18 2012, 06:39 AM

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


Posted by: pandy Mar 18 2012, 07:33 AM

I'd do it like this.

CODE
div#content-photo img    { display: block }


For the explanation, see https://developer.mozilla.org/en/Images,_Tables,_and_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.

Posted by: murray:451 Mar 19 2012, 10:23 AM

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

Posted by: Darin McGrew Mar 19 2012, 12:23 PM

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)