|
|
Posted by Ben C on 11/02/06 10:14
On 2006-11-02, David <david@liferipple.com> wrote:
> I have fixed up some of my web page with some of the tips I was given.
> I am still having a few problems. In firefox, my footer, that says
> "copyright..." has an extra line break above it
This is caused by dodgy margin collapsing in IE we were just discussing
in another thread.
The first thing in #body is dl, which is getting a top margin from the
default stylesheet.
That margin collapses with the top margin of #body, moving #body down by
the gap you're seeing.
Since #body and #navbar have the same heights specified (5.0in), but
body starts a bit lower down, you get the gap at the bottom.
Easiest fix is to add to the selector for #body
padding-top: 1px;
dl now gets 1px more than its default margin, but who cares. If it's a
problem, alter the top margin on dl in your styles. Now the top margin
for the dl is enclosed within #body, so it ends at the same point
vertically as the navbar, and the annoying gap goes away.
> , and there is no padding in firefox on the left of the text in the
> body.
That is also correct behaviour. dl and all the things with class bodytxt
are block-level elements, with their left margin edge aligned with the
edge of their container. #navbar is a float originating in a preceding
anonymous block box. According to the rules, the inline boxes in dl and
..bodytxt flow around the float, but the positions of those block boxes
themselves should be unchanged. The float should be rendered above the
padding and border areas, which it is. This is all in section 9.5 of the
spec.
So the padding is there, but behind #navbar. If you increase the left
padding of .bodytxt to 176px (165 for the width of navbar, 1 for its
right border, and 10 for the padding you want) you will get the desired
effect.
But then IE will probably give you far too much padding-- 176px between
the text and the right edge of #navbar.
So perhaps a better solution is to put the 10px as a right margin on
#navbar instead. So change padding in .bodytxt to
padding: 3px 10px 3px 0px;
and add to #navbar
margin-right: 10px;
And just hope it works in IE.
Navigation:
[Reply to this message]
|