The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Gap Between Image and Border - Newbie
murray:451
post Mar 18 2012, 06:39 AM
Post #1


Newbie
*

Group: Members
Posts: 12
Joined: 16-September 10
Member No.: 12,737



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 3)
pandy
post Mar 18 2012, 07:33 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
murray:451
post Mar 19 2012, 10:23 AM
Post #3


Newbie
*

Group: Members
Posts: 12
Joined: 16-September 10
Member No.: 12,737



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...,
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Mar 19 2012, 12:23 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Is div#content-photo inside div#panel-title-photo?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:46 PM