The <p> element has a margin-top by default, which pushes the whole content down. You can get rid of it using margin-top: 0 on that <p>.
RichieHindle
2009-05-13 07:55:44
+2
A:
Indeed. I was answering my question while you did the same ;) But this isn't really solving the problem, just the simptoms.While I can see how collapsing borders sometimes can be handy, I feel it should not be the default. I thought border-collapse: seperate would do the trick. But it doesn't.
borisCallens
2009-05-13 08:01:12
A:
It is because <p> is block element and always starts in new line.
if you want your code to work with the <p> tag then add to you CSS
p
{
display:inline;
}
Dmitris
2009-05-13 07:56:57
The new line is not the problem. That's because it's a block element. It's the collapsed top margin of the parent element I was worried about.
borisCallens
2009-05-13 07:59:46
A:
This is kinda lame, but I actually found it myself.
Once again it's the collapsing borders tricking me. Here is a good forum post that describes it.
In my design it was appropriate to remove the margin from the <p> element.
From what I read the next best thing is giving the parent a tiny margin of it's own.
borisCallens
2009-05-13 07:58:41
+2
A:
All browsers load a default stylesheet before any styles you define.
This is the style you see when you load a "plain" HTML into your browser.
You should look into and use a CSS reset in pretty much all your projects.
Greg B
2009-05-13 07:59:16
Although I agree that a CSS reset is a good idea, taking one from somewhere has caused me a bunch of head aches before.Css is a real bitch so I want to run a tight ship. Writing my own makes sure I know every character in there. I know "re-inventing the wheel", but in this case I want to know every nut'n bolt of the wheel.
borisCallens
2009-05-13 08:04:34
Thats fine, I wasn't really advocating a 3rd party reset. It's just a good way to avoid things like you describe above
Greg B
2009-05-13 10:56:39
I know, but the answer is not really solving the cause, more the remedy.Also, is the spacing of your answer deliberatly?
borisCallens
2009-05-13 08:05:33
i just tested that and it really works oh and a lot of people gave the same answer really
lock
2009-05-13 08:19:08
A:
Yep there will be a gap at the top, because paragraph leaves some space before and after. The following removes the space try it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Lay-Out</title>
<style>
html{
overflow: auto; /*for IE*/
height: 100%;
}
body{
background-color: orange;
margin: 0;
height: 100%;
}
#page{
background-color: green;
height: 100%;
margin-bottom: -50px;
}
#page p.first{
margin-top:0;
}
#footer{
background-color: red;
height: 50px;
}
</style>
</head>
<body>
<div id="page">
<p class="first">test</p>
</div>
<div id="footer">footer</div>
</body>
</html>
TheVillageIdiot
2009-05-13 08:12:53
That would .. hide the overflow. I don't think that's what I'm aiming for.
borisCallens
2009-05-13 08:17:25
Are you sure? It actually makes the paragraph go fully inside the parent element; margin and all.
Uqqeli
2009-05-13 08:36:26
This could be true in the demo case, but it would also hide the overflow. And that's not something I want. In the real site, my content may be much bigger then the word "test"
borisCallens
2009-05-14 06:51:41