|
|
Posted by David on 11/03/06 01:52
All my problems are fixed now. Thanks a lot Ben. I can see now how
Firefox is actually acting the correct way, and IE is not. Adding a
margin-right to #navbar fixed the padding problem. The footer problem
is fixed also. I appreciate all of the help.
Ben C wrote:
> 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]
|