Text poking out of div

HTML & CSS
1

Hi gurus

This is odd: I have a div defined in my CSS as follows:

#pagetitle {
position: absolute;
top: 98px;
left: 100px;
width: 800px;
height: 30px;
background-image: url(images/bgdgreen.png);
background-repeat: no-repeat;
}
#pagetitle p {
font-family: “Trebuchet MS”, Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFCC;
font-size: 1em;
font-weight: bold;
padding-left: 3px;
}

I can’t see anything wrong with it, but if you go to http://theberakahproject.org/musicians.html you’ll see that the text appears to have top padding, forcing it down below the level of pagetitle. The background image, bgdgreen.png, is 30px high, and this oddity happens in IE, Chrome and Safari.

Any ideas?

Thanks in advance.

Paul

2

Hey, this is good stuff to know.

Perhaps I’m stating the obvious, but using Eric Meyer’s CSS reset has saved me several times in the past, when I was dealing with precise CSS layouts:

http://meyerweb.com/eric/tools/css/reset/

For what it’s worth.

3

Hi Paul,

I think you’re getting whatever the default margins are on p’s in some browsers… or all browsers. It may look nicer if you tell that p
margin: 0;

4

Not to start a reset war, but Eric Meyers reset is completely bloated and everyone (including beginners) should spend their time understanding why margins need to be reset (and on what elements) and then you can create your own mini reset :wink:

5

Fantastic! Thanks so much.

All the best

Paul