PDA

View Full Version : Line Spacing Issue Beneath Image



chewbakarox
Oct 10th, 2009, 06:44 AM
Looking for some help with my CSS coding. In my "New Products" section, I have three product images. I'd like to eliminate the gap that exists beneath each image, and have the text line up directly under the image. I can't figure out where the gap is coming from in my existing CSS code.

HTML:


<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Homegrown Creation - Self Sufficient | Independent</title>
</head>

<body>

<div id="container">

<!-- HGC Banner -->

<h1 class="imagecenter">
Homegrown Creation
</h1>

<div class="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li>
<li><a href="#">shop</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>

<div id="main">
<img src="Slideshow.jpg">
<h2 class="content">Product Update from Homegrown Creation!!</h2>
<p class="content1">Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah</p>
</div>

<div id="productcontainer">
<h2 class="content">New Products</h2>
<img src="fernandomania.jpg">
<p class="content2">Fernandomania w/ LA Hands</p>
<img src="elements.jpg">
<p class="content2">Elements of Hip-Hop</p>
<img src="proud.jpg">
<p class="content2">Loud & Proud</p>
</div>


</div>

</body>

</html>

CSS:


/* global elements */

html {
margin: 0;
padding: 0;
}

body {
color: white;
background-image:url("Background.png");
font-family: Arial, Verdana, Sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

/* specific divs */

#container {
width: 750px;
margin: 0 auto;
text-align: left;
position: relative;
}

h1.imagecenter {
width: 100%;
height: 250px;
background: url("banner.jpg");
text-indent: -9999px;
margin: 0;
}

.navcontainer {
margin: 0 auto;
width: 100%;
border-top: 1px solid white;
border-bottom: 1px solid white;
}

#navlist {
width: 100%;
text-align: left;
margin: 0 auto;
margin-top: 5px;
padding: 0;
text-indent: 0;
list-style-type: none;
}

#navlist li {
padding: 10px;
margin: 0;
text-indent: 0;
display: inline;
}

#navlist li a {
letter-spacing: -1px;
text-decoration: none;
color: white;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid green;
}

#navlist li a:hover,#navlist a#current {
color: black;
border-top: none;
font-size: 1.5em;
}

#navlist a#current {
color: #fc6;
}

#main {
float: left;
margin: 0;
width: 550px;
text-align: justify;
}

h2.content {
padding-right: 10px;
letter-spacing: -1px;
margin: 0;
margin-top: 5px;
}

p.content1 {
padding-right: 10px;
font-size: 1em;
letter-spacing: -.75px
}

p.content2 {
text-align: center;
font-size: .75em;
letter-spacing: -.75px
margin: 0;
}

#productcontainer {
float: right;
width: 199px;
border-left: 1px solid white;
text-align: center;
}

Here's the site: LINK (http://www.homegrowncreation.com/media/test/index_test.html)

Thanks all.....your advice would be greatly appreciated! :)

Excavator
Oct 10th, 2009, 09:58 AM
It's the default margin on the <p>text under those images</p>

Try adding this bit to your CSS:

#productcontainer p {
margin: 0 0 15px 0;
}


I always put

* {
margin: 0;
padding: 0;
}in my CSS to zero out all browser margin/padding defaults since they are not the same from browser to browser.

chewbakarox
Oct 13th, 2009, 05:49 AM
It's the default margin on the <p>text under those images</p>

Try adding this bit to your CSS:

#productcontainer p {
margin: 0 0 15px 0;
}


I always put

* {
margin: 0;
padding: 0;
}in my CSS to zero out all browser margin/padding defaults since they are not the same from browser to browser.

I gave this a shot and nothing changed....any other thoughts? Thanks in advance.

Excavator
Oct 13th, 2009, 07:23 AM
Hmm, it works here. How/where are you adding that bit I suggested?

awayne96
Oct 13th, 2009, 08:23 AM
This seems to have worked:



<div id="productcontainer">
<h2 class="content">New Products</h2>
<img src="fernandomania.jpg"><br>Fernandomania w/ LA Hands<p>
<img src="elements.jpg"><br>Elements of Hip-Hop</p>
<img src="proud.jpg"><br>Loud & Proud</p></div>

chewbakarox
Oct 13th, 2009, 09:29 PM
Hmm, it works here. How/where are you adding that bit I suggested?

Ahh! I found my error. I had placed it within my existing "productcontainer" div instead of creating a completely new div. Thanks much, problem solved!

Scriptet
Oct 14th, 2009, 12:30 AM
I always put

* {
margin: 0;
padding: 0;
}in my CSS to zero out all browser margin/padding defaults since they are not the same from browser to browser.

I think in HTML 4 Strict, images have a little gap underneath them regardless of the reset. This is solved by either setting line-height font-size to 0, or the image to display:block.