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 Reply

1750

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*********@co mcast.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*********@co mcast.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

Similar topics

2923

margins between floats and inline content alongside

by: viza | last post by:

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

HTML / CSS

8088

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; border:1px solid red;'>Floated left</div> <div id='right' style='float:right; border:1px solid blue;'>Floated right</div>

HTML / CSS

2387

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 won't go above the top border of the following div (In IE it does go right up). Is this correct behaviour? Unless I'm missing something, this appears to be a case of CSS

HTML / CSS

3641

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 realised I need to have clear: left, to keep the headings against the lefthand side, should they come near floats. I can't see how to do this without having to introduce unpleasant extra markup.

HTML / CSS

1603

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 trying to put in images and floating them left or right. In safari it leaves a gap inbetween two of my divs and the image overlaps the gap, in IE it does the same unti you mouse over the hyperlink in the div, which then hides the gap and puts...

HTML / CSS

2135

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 transcript of a historical legal document with signatures on the right and witnesses on the left). The 'document' ends with no additional inline text. The background of the entire document should be brown inside a white body, (in this test the body...

HTML / CSS

1688

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 headers within the main material either have distinct background colors or borders. These borders don't seem to recognize that they are in material that is wrapped around the float. I can force specific headers to have sufficiently large left...

HTML / CSS

2220

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" lang="en"> <head></head> <body> <div style="float:left; height:100px; background-color:red;">Hi, I'm floating</div>

HTML / CSS

2756

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 SSI. On a broad screen, it looks good, but if you make the viewport small, the slogan text in the middle overlaps with the navigation buttons. http://www.weltladen-tuebingen.de/

HTML / CSS

8989

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9367

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9319

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8241

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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6073

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4599

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4869

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3309

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2213

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General