By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,077 Members | 1,175 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,077 IT Pros & Developers. It's quick & easy.

Floated images and implied paragraphs

P: n/a
I submitted a variation on this on the Opera forum but I thought I'd bring
it up here too as a more general HTML query.

Consider this code (I've shown it the old fashioned presentational way but
the same problem would happen with CSS):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Changed behaviour in Opera 7.21</title>
</head>
<body>

<h3>Floated left image but no paragraph tags on text.</h3>

<img src="animage.jpg" alt="" height="100" width="100" align="left">
The text of the paragraph.<br clear="all">
<h3>Floated left image inside paragraph tags</h3>

<p><img src="animage.jpg" alt="" height="100" width="100" align="left">
The text of the paragraph.<br clear="all">
</p>

</body>
</html>

This is the sort of code that can easily appear with editors such as GoLive
and it validates. In IE6, Firebird, Safari and Opera up until 7.11 at
least, the end result will be similar for both sections. There is a neat
space under the h3 header and then the top of the left floated images will
be neatly aligned with the top of the text.

In Opera 7.21 things have changed. The first image slams up right under the
<h3>...</h3> and there is no longer any alignment between the image and the
text. They have either simply ********** up the positioning of the floated
image somehow, in which case it is just a whopper of a bug, or perhaps they
have decided that the implied <p>...</p> around the paragraph text (if that
indeed is how UAs interpret the code) only kicks in after the <img> instead
of before.

So the question is really, even if it wasn't what they intended, could the
Opera 7.21 interpretation be considered as equally 'correct'.
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Graham J wrote:

[snip]
<h3>Floated left image but no paragraph tags on text.</h3>

<img src="animage.jpg" alt="" height="100" width="100" align="left">
The text of the paragraph.<br clear="all">
<h3>Floated left image inside paragraph tags</h3>

<p><img src="animage.jpg" alt="" height="100" width="100" align="left">
The text of the paragraph.<br clear="all">
</p> [snip] In IE6, Firebird, Safari and Opera up until 7.11 at least, the end result
will be similar for both sections. There is a neat space under the h3
header and then the top of the left floated images will be neatly aligned
with the top of the text.

In Opera 7.21 things have changed. The first image slams up right under
the <h3>...</h3> and there is no longer any alignment between the image
and the text. They have either simply ********** up the positioning of
the floated image somehow, in which case it is just a whopper of a bug, or
perhaps they have decided that the implied <p>...</p> around the paragraph
text (if that indeed is how UAs interpret the code) only kicks in after
the <img> instead of before.
There's no implied paragraph, although there is an anonymous block box. To
me, it looks like a bug in Opera, as setting an explicit bottom-margin on
the <h3> elements cures it.
[snip] So the question is really, even if it wasn't what they intended, could the
Opera 7.21 interpretation be considered as equally 'correct'.


I don't see how. You'll probably find that using a transitional doctype
will mean that Opera will intentional break from spec. anyway, so it's not
really useful to track these bugs down - if you want accurate results with
CSS, use "Strict Mode" (although in this case, it makes no difference).

(Note followups).

--
Jim Dabell

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.