Floats and top margins

Kyle James Matthews

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

Jul 20 '05 #1

Subscribe Post Reply

1737

Andrew Thompson

On Sat, 02 Oct 2004 21:59:46 GMT, Kyle James Matthews wrote:

Can someone explain why the upper-margin is there?

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

Jul 20 '05 #2

Kyle James Matthews

Andrew Thompson wrote:

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

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

Kyle

Jul 20 '05 #3

Tim

On Sat, 02 Oct 2004 22:24:43 GMT,
Andrew Thompson <Se********@www.invalid> posted:

It makes no sense to me that padding and margin should
apply to the HTML element itself

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.

Jul 20 '05 #4

Michael Winter

On Sat, 02 Oct 2004 21:59:46 GMT, Kyle James Matthews
<kj*********@comcast.net> wrote:

Please have a look at http://www.digitalovertone.com/v3/example.htm.
[snip]
Can someone explain why the upper-margin is there?

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.

Jul 20 '05 #5

Spartanicus

Kyle James Matthews <kj*********@comcast.net> wrote:

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?

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

Jul 20 '05 #6

Kyle James Matthews

Michael Winter wrote:

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.

Thanks!

Kyle

Jul 20 '05 #7

Kyle James Matthews

Spartanicus wrote:

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

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

Jul 20 '05 #8

by: viza | last post by:

Hi! This: p#p1 { text-align:left; } p#p2 { text-align:center; }

HTML / CSS

Problem with clearing floats in Firefox

by: Niels | last post by:

Hi group, I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example: <html><body> <div id='left' style='float:left;...

HTML / CSS

Floats, a problem with how high they float up to

by: Michael Rozdoba | last post by:

http://digitalrat.co.uk/test/index.html I float a div left in body prior to a div with top margin set. I expected the float to rise to the top of body, but instead in Firefox & Opera its top...

HTML / CSS

Shrink wrap header background & clearing floats

by: Michael Rozdoba | last post by:

I want to set a background colour on one level of headings, but have their width span only the text & a small amount of padding. I was styling display to inline to achieve this. Then I...

HTML / CSS

CSS Floats Images and IE (Help please!)

by: Daz | last post by:

Hello hello! I'm trying to finish off putting my design into HTML and I've come across a problem that I can't get my head around. I've got divs floating in two columns, but I'm having problems...

HTML / CSS

Best hack for floats not included in height

by: Chris Beall | last post by:

Here's the problem: http://pages.prodigy.net/chris_beall/Demo/theproblem.html The page contains inline text, then some additional pairs of text which are floated right and left. (This is a...

HTML / CSS

Preventing stuff from "sliding under" floats

by: Jeffrey Goldberg | last post by:

I suspect that this is a common problem (and so with a known solution/work-around), but my attempts to find it have failed. I have a float (a table of content box) on the left of a page. The...

HTML / CSS

margins on cleared floats in Opera

by: listerofsmeg01 | last post by:

Argh! I'm going nuts trying to get a constant margin after a floated div that works cross browser. This works in IE but not Firefox: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"...

HTML / CSS

How to center some text nicely between two floats

by: Hendrik Maryns | last post by:

Hi, There is a little problem with the header on the page I recently converted from frames to proper HTML+CSS. The top part with the navigation used to be the top frame but is now included via...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Floats and top margins

Similar topics