Hey everybody! I have a space problem that is haunting me. A draft of the website I'm designing is at http://www.lucidcitypictures.com See on the right hand side tab under "Upcoming Films" (<div id="colOne">) how there is a gap between the bottom of the pictures and their text? I don't want the gap! I've tried taking out the picture and there's a gap between the two text types. I've tried eliminating spaces and changes text types and so on. But nothing is working. I'd really appreciate any help anyone could give me on this. Thanks so much. JP
that because you're using <p> the gap is there by default, varies in size from browser to browser to control that just add p { margin:0; } Code (markup): to your css or do it inline that should do the trick
sorry wrong one but the same rule applies to all h1 h2 h3 etc.... just give them a margin class and it'll go away
Me again i took a closer look at your code here's another problem <h3>Lost Until You're Found<a href="http://www.lostuntilyourefound.com" target="_blank"><img src="images/pictures/lostuntilfound_thumb.jpg" title="Check out the official site for Lost Until You're Found" border="1" height="133" width="200"></a></h3> Code (markup): that is wrong you shouldn't put images in your H tags do it like so: <h3>Lost Until You're Found</h3> <a href="http://www.lostuntilyourefound.com" target="_blank"><img src="images/pictures/lostuntilfound_thumb.jpg" title="Check out the official site for Lost Until You're Found" border="1" height="133" width="200"></a> Code (markup):
jBud you're awesome. It's fixed. Thanks!!! Big time. Quick newb question: Does margin add that space on top and bottom or just bottom?
both but if you do not specify the margins it'll get inherited from the top level, or if there is none it defaults to the browser settings for that particular object. If you want total control over the margins you can use something like this: h1 { /* h1 p or any other element */ margin-top: 5px; margin-right: 1px; margin-bottom: 5px; margin-left: 10px; } Code (markup):