[thelist] [TIP] Solution: Zero body margin with CSS in NN4.x

[Sharon F. Malone]

Craig -

A couple of weeks ago you posted a tip, the code for which I just placed into a CSS file and included (along with an @import file) on my site.

BODY {margin: -10px 0 0 -10px ;}
HTML BODY { margin: 0; padding: 0; }
#top { position: absolute; left:-6px; top:-6px; width: 100%;
background-color: #fefefe; border: none; }

Problem is, it works for the left and top margins but not the right margin (at the top of my Home and other pages) in NN4.7. Actually I just included the first line (BODY) but then placed all 4 lines in my CSS file and tested locally. Still doesn't fix the righthand margin. There's still about a 1/4" white space on the right.

What am I doing wrong? http://www.24caratdesign.com using NN4.7.

Thanks,
Sharon

On Friday, March 08, 2002 2:38 PM Craig Saila responded:

> Fortune Elkins wrote:
> >>You're seeing the whitespace NN4.x puts between most block elements (not
> >>TABLES, ironically), which a different and extremely annoying bug.
> >
> > is there no workaround at all for this? i've tried display:inline with no
> > results, and a very quick google search turns up no workaround. . .surely
> > there's a dodge for this?
>
> Sort of, but its ugly and only works in certain cases, like this one:
>    BODY {margin: -10px 0 0 -10px;}
>    HTML BODY { margin: 0; padding: 0; }
>    #top { position: absolute; left:-6px; top:-6px; width: 100%;
> background-color: green; border: none; }
>    DIV#top { left: 0; top: 0; } /* NN4.x won't recognize this */
>
> But this is venturing into the realm of ugly hacks -- one rule for
> NN4.x, one to cancel it. Using either HTML element { rule } or
> element#id { rule } are best used sparingly. There better solutions to
> avoid problems in NN4 such as:
> - create a seperate style sheet for NN4 and the rest
> - accept that some things will be off in NN4
> - use TABLEs
>
> I'd recommmed the first, and this is where @import is beneficial. The
> original tip Mark posted was meant to get rid of the invalid  attributes
> leftmargin="0" topmargin="0" marginwidth="0" marginheight="0".
>
> For more about hiding CSS from some browsers I strongly recommend:
> <http://pixels.pixelpark.com/~koch/hide_css_from_browsers/>
>
> For tips on doing CSS on NN4, read Mark's piece:
> <http://www.mark.ac/web/cssnn4.php>
>
> Cheers,
>
> Craig Saila
---------------------------------------------------------------------------
Sharon F. Malone
"web design and Internet writing services"
http://www.24caratdesign.com
sfmalo at 24caratdesign.com