Floats and top margins

#1 July 21st, 2005, 12:55 AM

Hello all,

Please have a look at http://www.digitalovertone.com/v3/example.htm.
Netscape, Mozilla, and Firefox all insert an upper margin on 1 em on the
content on the left, and an upper margin of 2em on the content on the
right. Opera inserts an upper-margin of 1 em on both columns, and
IE6/Win displays this layout as I would like it. Can someone explain
why the upper-margin is there? Is there any way to deal with this other
than defining some negative margins and hacking to IE doesn't read it?

Thanks,

Kyle

#2 July 21st, 2005, 12:55 AM

On Sat, 02 Oct 2004 21:59:46 GMT, Kyle James Matthews wrote:
[color=blue]
> Can someone explain why the upper-margin is there?[/color]

I am not sure, but for a consistent (as practical) look I
generally also set the padding/margin of the 'html' element.

[ It makes no sense to me that padding and margin should
apply to the HTML element itself, ..but the validator confirms
it is valid CSS. ]

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane

#3 July 21st, 2005, 12:55 AM

Andrew Thompson wrote:[color=blue]
> I am not sure, but for a consistent (as practical) look I
> generally also set the padding/margin of the 'html' element.[/color]

Thanks for the tip, though unfortunately in this case it doesn't appear
to make any difference!

Kyle

#4 July 21st, 2005, 12:55 AM

On Sat, 02 Oct 2004 22:24:43 GMT,
Andrew Thompson <SeeMySites@www.invalid> posted:
[color=blue]
> It makes no sense to me that padding and margin should
> apply to the HTML element itself[/color]

The <body> element is contained within the page (the HTML), it doesn't have
to run to the edges. Of course you can add a margin around the body, or
you can add padding within the HTML to get almost the same effect.

If you don't want some browsers to do odd things, it can be best to specify
the HTML with zero margin and padding, then add margins to the body
element. I've seen some browsers with small white borders around the page
because of that sort of thing, or even a long border at the bottom on short
pages, where the body section doesn't reach all the way to the bottom of
the browser canvas.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.

#5 July 21st, 2005, 12:55 AM

On Sat, 02 Oct 2004 21:59:46 GMT, Kyle James Matthews
<kjmatthews7@comcast.net> wrote:
[color=blue]
> Please have a look at http://www.digitalovertone.com/v3/example.htm.[/color]

[snip]
[color=blue]
> Can someone explain why the upper-margin is there?[/color]

You have margins on your paragraphs. Applying the rule

p {
margin: 0 0 1em;
}

renders the page as you want on all the browsers mentioned.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

#6 July 21st, 2005, 12:55 AM

Kyle James Matthews <kjmatthews7@comcast.net> wrote:
[color=blue]
>Hello all,
>
>Please have a look at http://www.digitalovertone.com/v3/example.htm.
>Netscape, Mozilla, and Firefox all insert an upper margin on 1 em on the
>content on the left, and an upper margin of 2em on the content on the
>right. Opera inserts an upper-margin of 1 em on both columns, and
>IE6/Win displays this layout as I would like it. Can someone explain
>why the upper-margin is there?[/color]

Default paragraph top margin.

Why are you stretching the top image via html img attributes and then
shrinking it again with css? (try it sans css)

--
Spartanicus

#7 July 21st, 2005, 12:55 AM

Michael Winter wrote:[color=blue]
> You have margins on your paragraphs. Applying the rule
>
> p {
> margin: 0 0 1em;
> }
>
> renders the page as you want on all the browsers mentioned.[/color]

Thanks!

Kyle

#8 July 21st, 2005, 12:55 AM

Spartanicus wrote:[color=blue]
> Why are you stretching the top image via html img attributes and then
> shrinking it again with css? (try it sans css)[/color]

The image will eventually be replaced. I just pulled it off the current
version of the site, whose width is only 700px, to have *something* up
there in the header, stretched or otherwise.

Kyle

What is Bytes?

Popular Articles