Padding problems in all top 5 major browsers.

Formatting text.

[a0731370]

Hi
I tried searching the forums but I didn't find an answer to my current problem.

The problem is no matter what I do there is always
something like a 14 to 18 pixel padding applied
to the top of my #center div. So even if I set p to padding-top:0; there is still padding applied to the text at the top of the div.

Here is my HTML and CSS code.

Anyone have any clues to what's going on?
Help is greatly appreciated. :)

HTML

<div id="container">
<div id="header">
</div>
<div id="leftside">
</div>
<div id="center">
<p>
</p>
</div>
<div id="rightside">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

CSS Text styling Code

p {
font-family:Arial, Verdana, Helvetica, Helvetica Neue, Tahoma, Lucida Grande,
Geneva, Nimbus Mono L, DejaVu Sans Mono, sans serif;
color:#000000;
font-size:1.0em;
letter-spacing:0;
word-spacing:0;
line-height:100%;
text-align:left;
vertical-align:baseline;
text-decoration:none;
text-transform:none;
white-space:normal;
text-indent:10px;
padding-top:0;
padding-right:10px;
padding-bottom:0;
padding-left:10px;
}


Main CSS page styling



body {
margin:0;
padding:0;
background-color:#333333;
color:#FFFFFF;
line-height:100%;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
}

#container {
position:relative;
left:0px;
top:0px;
width:512px;
height:512px;
background-color:#000000;
color:#FFFFFF;
margin-top:100px;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
padding:0;
background-image:none;
border:2px dotted#FFFFFF;
}

#header {
position:absolute;
left:0px;
top:0px;
width:512px;
height:64px;
background-color:#888888;
color:#FFFFFF;
padding:0;
margin:0;
border:0;
}

#leftside {
position:absolute;
left:0px;
top:64px;
width:64px;
height:384px;
background-color:#555555;
color:#FFFFFF;
padding:0;
margin:0;
border:0;
}

#center{
position:absolute;
left:64px;
top:64px;
width:384px;
height:384px;
background-color:#FFFFFF;
color:#FFFFFF;
overflow:auto;
padding:0;
margin:0;
border:0;
}

#rightside {
position:absolute;
left:448px;
top:64px;
width:64px;
height:384px;
background-color:#777777;
color:#FFFFFF;
padding:0;
margin:0;
border:0;
}

#footer {
position:absolute;
left:0px;
top:448px;
width:512px;
height:64px;
background-color:#999999;
color:#FFFFFF;
padding:0;
margin:0;
border:0;
}

[MichaelBluejay]

a0731370, first rule of troubleshooting is to simplify the problem as much as possible, to get a working version, and then start adding in extra code and see where it breaks. Your code is far, far too long. Which brings me to my next point: The first rule of asking for help with your code is to post only the minimum code necessary. Nobody wants to wade through a full page of code for a simple issue. I certainly don't, and won't.

So, start off by creating some ultra-simple code, like this:

<div style="border:1px solid gray"><p>test</p></div>

Did you get the results you expected? If yes, then great! Start adding more code and see where it breaks.

Or, if you *didn't* get the results you expected, then post the one line of code that gave you problems. With such a brief amount of code to examine, it's far more likely that someone can either spot the error (if there is one) or explain why what you're seeing is expected behavior.

[alt131]

Hi a0731370,

The problem is no matter what I do there is always
something like a 14 to 18 pixel padding applied
to the top of my #center div. So even if I set p to padding-top:0; there is still padding applied to the text at the top of the div.

Looks like a margin on the p.
Fix with p {margin:0;}

[a0731370]

Okay I trimmed the code down a lot to try and figure out what was going on.

#textbox {
position:relative;
left:0px;
top:0px;
width:512px;
height:512px;
background-color:#999999;
color:#FFFFFF;
border: 2px solid white;
}

p {
font-family:Arial;
color:#000000;
font-size:1.0em;
margin:0px;
padding:0px;
}

With the code like this the text touches the
the left border and now there is only a 4 pixel
gap from the top border.

I did some reading up on fonts
and if you set your font-size to 1.0em it will
default the font size to whatever you have the size set to in your browser. I read 16px is the
most common setting in browsers today.

I used Firefox. It's default is 16 pixels and if you measure from the top border to the bottom of a capitol letter it's you guessed it 16px.

If you add a line-height of 1.5 it adds another
2px to the top and I think maybe the bottom but
I don't know for sure I didn't check..

Anyways, I looked up type face on Wikipedia and there is ascender height and a descender height.

I'm guessing that is why there is a slight gap
from the top border even tho the padding is set to 0. And if you add line-height of 1.5 it's going to increase the distance, which it did.

Sorry for the long winded post but I wanted to share my findings with you all so you understand
why your text looks the way it does with these settings.

Anyone care to comment? Please do as I'd like to
hear what other people have to say.

[alt131]

Removing the default margins resolved the issue for me, and I am not seeing a 4px gap using just your new rules for #textbox and p and this html:

<div id="textbox">
<p>Quick fox jumps sleeping dog</p>
<p>Quick fox jumps sleeping dog</p>
<p>Quick fox jumps sleeping dog</p>
</div>

The main question for me is why you want to try to control this to the point of eradicating the "gaps" caused by allowing for descenders/ascenders.

The firebug extension for firefox can really help understanding of code, especially the "computed" tab which displays information about line-height, etc. I also wonder if you might find Eric Mayer's Unitless line-heights [meyerweb.com] interesting, as well as the section on line-height and leading [w3.org] in the recommendations.