Click here to get back home

margins on cleared floats in Opera
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
margins on cleared floats in Opera listerofsmeg01 11-05-2006
Posted by listerofsmeg01 on November 5, 2006, 5:05 pm
Please log in for more thread options

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

OK, I obviously am doing something stupid, since I just cut and pasted
your entire code snippet and it works just fine as you say.

Here is my entire code that doesn't work in IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<br style="clear:both;"/>
<div style="margin-top:20px;">This text should have a margin after
the floated div</div>
</body>
</html>


Posted by Eik on November 5, 2006, 5:44 pm
Please log in for more thread options


> Argh! I'm going nuts trying to get a constant margin after a floated
> div that works cross browser.

Opera 7/8 allowed top margins on cleared boxes, just like IE, but in Opera
9 it changed to be like Mozilla and Safari, and only apply the bottom
margin of the float.

However there was a bug in Opera 7/8 that gaused a 1em gap to appear above
some cleared boxes (in addition to any margins that should separate the
float and the cleared box) and although this was fixed in Opera 9, a new
bug was introduced that causes the bottom margin of flowed boxes to be
ignored if there's a float nearby. If the flowed box extends below the
float this can cause problems.

I don't know if this has been fixed in Opera 9.1 but here's a test page
that should have a 2em gap above the green box:

http://www.geocities.com/prestocsin/clear.html

In Opera 7/8 it's 3em, in Opera 9.0 it's 1em but IE, Safari and Mozilla
get it right with 2em.

I would recommend you rely on the bottom margin of floats and previous
flowed elements to determine the gap between them and cleared elements,
and don't worry if only Opera gets it wrong. They should fix their bugs
faster. The top margin of the cleared box should be ignored by the float
but not any previous flowed box. (personally I prefer being able to add
top margin to cleared boxes like IE and old Opera because it's more
flexible, but it's more important that browsers render things the same)

Similar ThreadsPosted
CSS Floats Images and IE (Help please!) September 4, 2005, 6:55 am
clearing only local floats November 11, 2006, 11:22 am
Clearing floats without introducing a new line. How? August 18, 2005, 2:47 pm
Print versions of HTML cut off at margins September 14, 2004, 9:01 am
suppressing margins on
and tags
 September 18, 2005, 5:08 pm
Opera bug workaround July 28, 2004, 11:58 am
Opera 9.5 final is here... June 13, 2008, 1:29 pm
Only clean text in Opera, why ? December 23, 2004, 12:48 pm
Mozilla/Opera Scrollbars January 19, 2006, 4:40 pm
opera doesn't reload iframe August 8, 2006, 6:28 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap