Gap Between Image and Border - Newbie |
Gap Between Image and Border - Newbie |
murray:451 |
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;} |
pandy |
Mar 18 2012, 07:33 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 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. |
murray:451 |
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..., |
Darin McGrew |
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?
|
Lo-Fi Version | Time is now: 5th May 2024 - 09:33 PM |