margins on cleared floats in Opera

listerofsmeg01

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:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can't seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin:0; border:0;
padding:0;">&nb sp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin:0; border:0;
padding:0;">&nb sp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where's the sodding whitespace coming from! Argh!

Many thanks for any help

Nov 5 '06 #1

Subscribe Reply

2219

listerofsmeg01

listerofsme...@ hotmail.com wrote:

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:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin-top:50px;">This text should have a
margin after the floated div</div>
</body>
</html>

This works in both IE and firefox, but not Opera

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th;"></div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

It appears Opera only honours the clearing div for margins if it
contains something. However, if it contains something, then I get extra
whitespace which I can't seem to get rid of. ie:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin:0; border:0;
padding:0;">&nb sp;</div>
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

This appears to work fine, until you make the margin smaller - say 2
pixels:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head></head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<div style="clear:bo th; margin:0; border:0;
padding:0;">&nb sp;</div>
<div style="margin-top:2px;">This text should have a margin after
the floated div</div>
</body>
</html>

Where's the sodding whitespace coming from! Argh!

Many thanks for any help

I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)

Nov 5 '06 #2

Bergamot

li************@ hotmail.com wrote:

>
I should add that the bottom 2 examples have a non breaking whitespace
in the clearing div, but this has disappeared from my post (I guess it
got translated by my browser!)

Which is one reason why you should always post a URL, not code.

--
Berg

Nov 5 '06 #3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:bo th">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.or g/wiki/KISS_principle;-)

Nov 5 '06 #4

listerofsmeg01

VK wrote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:bo th">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.or g/wiki/KISS_principle;-)

So what's the simple way then?

Nov 5 '06 #5

listerofsmeg01

listerofsme...@ hotmail.com wrote:

VK wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>KISS</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float:le ft; height:100px; background-color:red;">Hi,
I'm floating</div>
<br style="clear:bo th">
<div style="margin-top:50px;">This text should have a margin after
the floated div</div>
</body>
</html>

See also <http://en.wikipedia.or g/wiki/KISS_principle;-)

So what's the simple way then?

Sorry, just realised you weren't quoting my code (D'oh!).

However, your solution doesn't work in any of the browsers :-/

Nov 5 '06 #6

However, your solution doesn't work in any of the browsers :-/

What browser's did you try? It tested for IE6 SP1, Firefox 1.5, Opera
9.02.

Otherwise pls redefine what does "work" imply in your case. In your
original post you stated "to get a constant margin after a floated div"
and this is exactly what happens.

Nov 5 '06 #7

listerofsmeg01

VK wrote:

However, your solution doesn't work in any of the browsers :-/

What browser's did you try? It tested for IE6 SP1, Firefox 1.5, Opera
9.02.

Otherwise pls redefine what does "work" imply in your case. In your
original post you stated "to get a constant margin after a floated div"
and this is exactly what happens.

My apologies, I was missing a quote. I'm going markup blind. Many
apologies for that.

It does now work in Opera 9.02 and Firefox 1.5.0.7
It does not work in IE 6 SP2

Nov 5 '06 #8

My apologies, I was missing a quote. I'm going markup blind.

I'm not sure about what are you saying. Are you talking about a
physical problem or about some working approach?

It does now work in Opera 9.02 and Firefox 1.5.0.7
It does not work in IE 6 SP2

There is nothing here that could do not work in IE: unless you have
removed DOCTYPE declaration and so dropped IE back into BackCompat
mode. Otherwise you have red floating div and below it another div. The
vertical space between the bottom border of the red div and the upper
border of another div is defined by margin-top rule plus default margin
of the red div (because the red div doesn't have any margins explicetly
set). That is for any UA unless it really badly broken - and IE 6 is
not the one, despite all its numerous defaults.

btw there is not IE 6 SP2 - only IE 6 SP1. You must be talking about IE
6 on Windows XP SP2.

Nov 5 '06 #9

listerofsmeg01

VK wrote:

My apologies, I was missing a quote. I'm going markup blind.

I'm not sure about what are you saying. Are you talking about a
physical problem or about some working approach?

Heh. Nevermind. I just meant that I've been staring at markup all day
long and it's starting to all merge together (like "snow blind" ;-)

There is nothing here that could do not work in IE: unless you have
removed DOCTYPE declaration and so dropped IE back into BackCompat
mode.

Nope, my doctype is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I even tried removing this before you posted to make sure you weren't
running in quirks mode. I fails both ways on mine. :-/

Otherwise you have red floating div and below it another div. The
vertical space between the bottom border of the red div and the upper
border of another div is defined by margin-top rule plus default margin
of the red div

Nope, on IE the top of the second div is near enough touching the
bottom of the red div.

btw there is not IE 6 SP2 - only IE 6 SP1. You must be talking about IE
6 on Windows XP SP2.

Well yes, although it does list SP2 as an update version.
Specifically:
Version 6.0.2900.2180.x psp_sp2_gdr.050 301-1519
Update Versions:; SP2;

Anyway thanks for your help. Like I said I've been staring at this for
hours now so it's more than likely that I'm doing something stupid.
Thanks anyway.

Nov 5 '06 #10

Similar topics

3734

body margins....

by: Frances Del Rio | last post by:

when I test my stuff with the validator in HomeSite it tells me the body tag no longer reads margin attributes.. does this mean now margins are to be specified only in CSS? I work for an internet co., they support IE 5+ and the old pre-6 Netscape.. if you don't put this tag in html docs, what version of HTML does it default to? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

HTML / CSS

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

3421

Centering Thumbnail Galleries with CSS: Floats, Inline, Lists, ???

by: Filippo Giarratano | last post by:

Hi -- I'm trying to figure out how to make a photo thumbnail gallery page using CSS and no tables that (1) has a caption below each image and (2) is centered -- so that as browser width changes the images consistently reconstitute themselves as centered rows with the maximum number of images on each row. I've made a test page at http://www.americanstate.org/test/gal01/ that illustrates what I'm aiming for and how close I've gotten. I've...

HTML / CSS

4414

Default margins of elements inside table cells

by: Jukka K. Korpela | last post by:

I just noticed that most browsers render <table border="1"><tr><td><p>foo</p></td></tr></table> the same way as <table border="1"><tr><td>foo</td></tr></table> That is, they ignore the p markup in the sense that they don't apply the normal default top and bottom margins. This is rather odd, especially

HTML / CSS

1750

Floats and top margins

by: Kyle James Matthews | last post by:

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...

HTML / CSS

1761

Opera Ignores 0 Margins?

by: fleemo17 | last post by:

The same layout I discussed earlier (http://www.sunriveronline.org/misc/clrn ) looks pretty darn good in most of the browsers I've checked it with, except for Opera. Apparently, Opera is applying my 0 Margin attribute on the background image, but keeping an 8-pixel margin for the page's elements, which throws the design into a tizzy. Is there a way to make Opera apply the 0 margin to all the elements on the page? -Fleemo

HTML / CSS

1737

collapsing margins in css 2.1

by: yb | last post by:

Hi, I'm looking for clarification of css 2.1 specification in section 8.3.1 "Collapsing Margins" The 6th bullet reads "If the top and bottom margins of a box are adjoining ..." I won't paste the whole point here, its too long. But, from this first line does this mean that the element has empty

HTML / CSS

3052

UL margins with a floated img are off?

by: hgraham | last post by:

Hi, I created a very simple page to illustrate my problem. All I'm trying to do is float an image left with a margin and have the text on the right wrap around the image and the text includes an unordered list. The paragraphs all work fine, but the ul starts way over in the image for some reason? It looks the same in Firefox and IE, so I don't think it's a browser bug. The page link is below if someone wouldn't mind taking a look at...

HTML / CSS

1909

IE and margins (I suppose) again...

by: Gregor Kofler | last post by:

Sigh... Where come those white "spacers" on IE6 from? Perfectly ok in FF, Opera, Safari, alas IE again is choking... Sample with inline styles: http://web.gregorkofler.com/test.htm I've tried all sorts of things (width, margin, etc.), alas those extra spaces remain.

HTML / CSS

8788

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

9476

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9335

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

9263

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

8210

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

6751

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6053

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

4825

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

3279

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