PDA

View Full Version : Tags creating unwanted gaps



Spiritualized
Jun 20th, 2009, 06:56 PM
hi, this is probably a very common problem with a simple answer, but this is my first CSS site and I can't seem to think of the right search criteria in order to get the answer I need!

Basically, I've got some boxes with rounded corners, so they consist of a top div for the top of the box, a middle div for the content, a bottom div for the bottom of the box, and a container wrapping around the whole thing. The thing is, when I put a header tag on the text in the content div, it creates a massive gap between the top image div and the content div. I'll show you what I mean.

This is how it should look. I've styled the text this way by seting the text format of the div, rather than using an <h> tag.

http://www.numyspace.co.uk/~unn_t016254/cityforpeaceindex.html

However, this is what happens when I use header tags

http://www.numyspace.co.uk/~unn_t016254/cfpindextest.html

As you can see, it also does this with the lists. I'm pulling my hair out trying to work it out!

Please help!
Cheers

coothead
Jun 20th, 2009, 08:22 PM
Hi there Spiritualized,

and a warm welcome to these forums. ;)

Try adding this rule to your stylesheet...


h1,ul {
margin-top:0;
margin-bottom:0;
}

coothead

Spiritualized
Jun 20th, 2009, 11:14 PM
Fantastic! Thanks a lot that was really bugging me. Next thing I need to do is work out how to control the lists properly. I'll see if I can work it out myself first :)

coothead
Jun 20th, 2009, 11:22 PM
No problem, you're welcome. ;)