Really basic float right problem cross browser

C

Ciaran

I've come across this small annoying problem many times but never
managed to figure out a satisfactory solution.
It's incredibly simple: an element that is floated right which has
inline content in before it looks different in every browser.

In the past, all browsers rendered the floated element down a line
which meant a negative margin-top would fix the problem but the latest
version of firefox and chrome (correctly) display the floated content
on the same line as the rest of the inline stuff.

I've found one workaround: putting the floated element before the
inline content correctly renders it in the right spot but I'd prefer
to keep the HTML clean and fix this with CSS. Any Ideas?

Look at this in FF and then IE and you'll see what I mean:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
Some inline content<div style="float:right">floated right!</div>
</body>
</html>
 
D

dorayme

Ciaran said:
I've come across this small annoying problem many times but never
managed to figure out a satisfactory solution.
It's incredibly simple: an element that is floated right which has
inline content in before it looks different in every browser.

In the past, all browsers rendered the floated element down a line
which meant a negative margin-top would fix the problem but the latest
version of firefox and chrome (correctly) display the floated content
on the same line as the rest of the inline stuff.

I've found one workaround: putting the floated element before the
inline content correctly renders it in the right spot but I'd prefer
to keep the HTML clean and fix this with CSS. Any Ideas?

Look at this in FF and then IE and you'll see what I mean:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
Some inline content<div style="float:right">floated right!</div>
</body>
</html>
Click to expand...

Why would you be using transitional as a doctype? What are you
transitioning from, as a well known regular around here likes to say?

Anyway, all of my Mac browsers show the same. But this does reveal an
unexpected bug in my FF 3.5.3 (and possibly independent of this problem
you are seeing), namely that the right float disappears completely at
narrow browser window sizes! It is perhaps connected to that even the
inline text will not wrap at narrow browser sizing. Curious indeed.

FF has always been a bit funny in the past its engagement with the float
rules.

The more logical way to do your above is to

<div>
<div style="float:right">floated right!</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque
augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis
nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam
posuere vehicula. Pellentesque habitantmorbi tristique senectus et netus
et malesuada fames ac turpis egestas. Maecenas justonunc, porta sed,
molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
viverra quis, dignissim blandit, viverra nec, odio.
</div>

or


<div style="float:right">floated right!</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec
orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae
quam posuere vehicula. Pellentesque habitantmorbi tristique senectus et
netus et malesuada fames ac turpis egestas. Maecenas justonunc, porta
sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus
etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse
potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna,
viverra quis, dignissim blandit, viverra nec, odio.</p>


This gets the general case for when the normal text (which btw in HTML
4.01 should not be bare in BODY but wrapped in a block element) is
longer but you want that the float is at the top. The text wrapping and
wrapping around the float; if you don't want the very latter, give a
right margin to the inline wrap (paragraph in the last example), even a
width to suit.
 
N

Neredbojias

I've come across this small annoying problem many times but never
managed to figure out a satisfactory solution.
It's incredibly simple: an element that is floated right which has
inline content in before it looks different in every browser.

In the past, all browsers rendered the floated element down a line
which meant a negative margin-top would fix the problem but the
latest version of firefox and chrome (correctly) display the floated
content on the same line as the rest of the inline stuff.

I've found one workaround: putting the floated element before the
inline content correctly renders it in the right spot but I'd prefer
to keep the HTML clean and fix this with CSS. Any Ideas?

Look at this in FF and then IE and you'll see what I mean:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
Some inline content<div style="float:right">floated right!</div>
</body>
</html>
Click to expand...

Well, for one thing that's invalid markup so it might not be so
surprising that it renders differently in different browsers. Inline
content cannot be contained in the <body> "naked"; it must be nested in
a block element.
 
C

cronoklee

Why would you be using transitional as a doctype? What are you
transitioning from, as a well known regular around here likes to say?
Click to expand...

The doctype makes no difference as fa as I can tell. Strict and
Transitional produce the same problem. See example below


The more logical way to do your above is to
<div style="float:right">floated right!</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>...
Click to expand...


Yes I mentioned placing the float before the inline my post but I'd
prefer a CSS solution. Floated right content should appear beneath
main content when CSS is off.

Well, for one thing that's invalid markup so it might not be so
surprising that it renders differently in different browsers. Inline
content cannot be contained in the <body> "naked"; it must be nested in
a block element.
Click to expand...

OK well imagine I originally posted this then:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd"><html>
<head>
<title>test</title>
</head>
<body>
<span>Some inline content<span><div style="float:right">floated right!
</div>
</body>
</html>


The latest FF and Chrome on PC render the float at the top of the page
while IE8 and almost all older browsers render it down a line.

Any ideas what's going on here?

Ciarán
 
D

dorayme

cronoklee said:
The doctype makes no difference as fa as I can tell. Strict and
Transitional produce the same problem. See example below
Click to expand...
Lets agree that we all should use a good doctype declaration and be
daring and say it is 4.01 Strict for the moment.
Yes I mentioned placing the float before the inline my post but I'd
prefer a CSS solution. Floated right content should appear beneath
main content when CSS is off.
Click to expand...

As mentioned, if you put the floated element to the right of mere inline
content and the latter is lots that wrap to a few lines, you might not
get the float appearing quite where you want it in vertical space. Let's
see below...

OK well imagine I originally posted this then:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd"><html>
<head>
<title>test</title>
</head>
<body>
<span>Some inline content<span><div style="float:right">floated right!
</div>
</body>
</html>
Click to expand...

Let's close your SPAN. But even so, this does not get over the point you
are responding to because SPAN itself is an inline element.

I would be rid of span and use a paragraph element. But, for the point I
make now, it will make no difference, either! If you style the P or the
SPAN with style="float: left;", you should see what you want to see in
the recalcitrant browsers and have the right float text appear under the
left if CSS is off.

Is this a "CSS solution" that you wanted?

Why is there such a difference in browsers in your original case? Ask
Microsoft, they produced buggy browsers because they were careless and
too much on their minds at the time. Getting them to reasonable
standards has been a bit like getting North Korea to give up nuclear
weapon capability.
 
C

cronoklee

Lets agree that we all should use a good doctype declaration and be
daring and say it is 4.01 Strict for the moment.





As mentioned, if you put the floated element to the right of mere inline
content and the latter is lots that wrap to a few lines, you might not
get the float appearing quite where you want it in vertical space. Let's
see below...







Let's close your SPAN. But even so, this does not get over the point you
are responding to because SPAN itself is an inline element.

I would be rid of span and use a paragraph element. But, for the point I
make now, it will make no difference, either! If you style the P or the
SPAN with style="float: left;", you should see what you want to see in
the recalcitrant browsers and have the right float text appear under the
left if CSS is off.

Is this a "CSS solution" that you wanted?

Why is there such a difference in browsers in your original case? Ask
Microsoft, they produced buggy browsers because they were careless and
too much on their minds at the time. Getting them to reasonable
standards has been a bit like getting North Korea to give up nuclear
weapon capability.
Click to expand...



Yes looks good dorayme - The float-left will do the job it seems. The
only problem with this method is that with all the content of parent
element floated, it's height will be 0. In the past I've used a <hr
style="clear:both; visibility:hidden" /> as a workaround for fluid
height elements with floated children. It's not ideal to add extra
markup but it seems to be the best solution. Hopefully IE9 will fall
in line with the latest standards for rendering floats. Fingers
crossed but I'm not holding my breath!

Thanks for the help,
Ciarán
 
B

BootNic

On Tue, 22 Sep 2009 18:27:55 -0700 (PDT)

[snip]
In the past, all browsers rendered the floated element down a
line which meant a negative margin-top would fix the problem but
the latest version of firefox and chrome (correctly) display the
floated content on the same line as the rest of the inline stuff.
Click to expand...

[snip]
Look at this in FF and then IE and you'll see what I mean:
Click to expand...

[snip]

IE 8 has the ability to display the content in a similar manner as
other current browsers. Compatibility view setting in IE 8 may affect
how IE 8 displays a site.

• The user may choose to display all intranet sites/websites
in compatibility view and or use a list of websites to
display in compatibility view.

• The sever may send a X-UA-Compatible header which will also
change the view in IE 8.

• The author may include and X-UA-Compatible meta tag



--
BootNic Thu Sep 24, 2009 10:23 pm
It's not that some people have willpower and some don't. It's that
some people are ready to change and others are not.
*James Gordon*

â• 291 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAkq8KaQACgkQmo2774GZ7qlmeACgtt2p6fJHS9G+yBV+4oTv6ZGc
0PgAnAvLmIVQX+0DIZbZ3rGtjzFIFANr
=JMgT
-----END PGP SIGNATURE-----
 
D

dorayme

Ben C said:
This was actually a bug-in-common between Firefox and IE. I think the
correct CSS rules are unnecessarily silly in this case and the spec
should have been changed to what FF and IE were doing.

But rules are rules. Opera and Konqueror and the most recent FF get it
right.
Click to expand...

I was looking in browsershots at some things on floats about order of
floats and different browsers recently and it seems most modern browsers
are 'following the rules'. I went into this a bit at:

<http://netweaver.com.au/floatHouse/page5.php>

and notice even IE7 getting it wrong. But FF is now caught up as you
say... Also IE8. Looks like I need to spring clean all that stuff and
the appendices with the screenshots to bring it up to date...

It was such a worry a while back the different float treatments across
browsers, enough to drive an author into absolute rag... positioning
which seems a bit more consistent across browsers.
 
D

dorayme

Ben C said:
I think the
correct CSS rules are unnecessarily silly in this case and the spec
should have been changed to what FF and IE were doing.
Click to expand...

Come to think of it some more, I am interested in why you say this. In
respect to what sort of case?

My older Camino (Gecko) is the only browser I have now on my Mac that
does what (I think) you think is more sensible for the fourth instance:

<http://dorayme.netweaver.com.au/justPics/floatorderinolderbrowser.png>

for

<http://dorayme.netweaver.com.au/float_order.html>
 
D

dorayme

Ben C said:
When the line breaks before the float.

Suppose you've got this:

<div>
Here is some text <span>float</span>
</div>

We should see the float on the left and the word "Here" to the right of
it, aligned with the top of the float. (The span is floated left).

So far so good, but if the line breaks before the word "text" because
the container is narrow, then everything changes, and we get the line of
text first and the float below it.

This just seems a bit unintuitive to me. Or maybe I'm just being grouchy
because I'm going to have to fix this in the browser my day job is
working on.
Click to expand...

I'm still puzzled because this is so unrealistic a case and I am trying
to get a handle on what a realistic case would be and why you find it
unintuitive?

<div>
Here is some text and let's make the sentence longer so we can narrow
.... <img style="float: left; padding: .2em;" src="pics/crimson.png"
alt="">
</div>

First point to note is that in my older Camino, the only quickly
available browser I have that does it different to modern Safari, FF
etc, is that when the browser is not narrowed, a rather unintuitive
result happens, the float is on the next line to the text? Or am I too
used to the modern effect?

Second, when the browser is narrowed, you lose the effect of wrapping
text around the float, carefully placing the float among the text. I
have been thinking this as some sort of common raison d'être for floats.

Anyway, what is important is consistency and from the author's point of
view, a carefully placed floated image in text seems to me to be a more
daunting task with the older browser way.

Perhaps we are thinking different cases?
 
D

dorayme

Ben C said:
No, that is a bit unintuitive I guess.

What I suggest may be unintuitive is when you are expecting the modern
effect, but then the line breaks, and then suddenly you get the float on
the next line after all, with the word that is before it in the source
above it.

At least the ancient effect was more predictable.
Click to expand...
If you look at all the differences between the way:

<http://dorayme.netweaver.com.au/alt/floatWays.html>

behaves in older browsers like Camino 1.5 and FF 3.5, we agree that the
image *never* being on the first line no matter how much room there is,
is simply 'not good'. They are supposed to go to the left if there is
room. In Camino and perhaps older FF they don't.

As for what is intuitive and what is not otherwise, it is a bit hard to
say. In one sense, nothing is all that intuitive about floats! One
wrestles with predictability too. When one narrows the browser to get a
goodly bit of wrap going, the old and new browsers are more equivalent.
The big difference, at least the one that stands out to me and is
probably of more practical importance is the difference in the context
of plenty of browser width.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

About as basic "Newbie-Question" that you can get. 3
How do I output this recursive function correctly to a web browser? 2
Image shifts to the right when export the page to pdf 4
cross-browser right sidebar 9
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
Image upload not working in browser 4
Dropdown menu in a fixed navbar 2

Members online

Total: 27 (members: 1, guests: 26)
Robots: 471

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top