117400 - Paragraph text overlaps image in table.

Status: RESOLVED DUPLICATE of bug 25888

(Core :: Layout: Floats, defect)

Description

[Robert Ezman]

I originally thought this was text wrapping around an image and overlapping it
as that's what it looks like. 

It looks like paragraph text goes one line into an image.  You can select that
text that is superimposed on the image.

On closer inspection of the html it appears that the image is in a table and the
text is not so in effect it's paragraph text outside a table overlapping an
image that is in a table. 

The snippet below:

--------------

 <h2>Plugging in the rest of the cards</h2>
<table border="0" width="260" align="right">
<tr>
<td><font color="#FF8000"><img border="0" src="pics/scsicardtn.jpg" WIDTH="260"
HEIGHT="173"></font></td>
</tr>
<tr>
<td><p align="center" class="caption">SCSI and
        network cards installed</td>
</tr>
<tr>
<td>
<p align="center" class="caption"><img border="0" src="pics/ccinstall.jpg"
WIDTH="260" HEIGHT="173"></p>
</td>
</tr>
<tr>
<td><p align="center" class="caption">If you want to
        overclock your video card, make sure you have some extra cooling</td>
</tr>
</table>
<p>Your shiny new system booted up (we
    hope), so you're ready to finish the hardware pa
...
</p>

--------

There are several bugs that are similar to this but this is not exactly the
same.    I figured I'd enter it and let you decide.

Note: other pages on the same site have similar errors.

Comment 1

[Boris Zbarsky [:bzbarsky]]

looks like text overlapping a floating table...

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 3

[Mats Palmgren (inactive)]

Confirming bug. A negative top margin for the paragraph disables line-breaking on
the first line.

Comment 4

[Eric A. Meyer (dead account)]

Attachment: Related (?) testcase

I discovered a very similar (or perhaps identical) behavior while debugging
some client pages, and boiled it down to this reduced testcase.  In this case,
a right-aligned image followed by a right-aligned DIV causes the text to flow
around it.  Changing the DIV to a TABLE with HTML-based right alignment causes
the text to overwrite the float.  Both behaviors are shown in the testcase.

Comment 5

[Marit Halse]

I discovered a similar bug here:
http://people.opera.com/marit/olug/web/skisse01/

An IMAGE inside a P. The IMAGE is floated to the right side of the paragraph.
(the cat pic.) And text flows over the image.

If you go somewhere else and then return to the page, it looks alright. But the
bug is there again if you reload the page.

Comment 6

[Susie Wyshak]

Please see http://sports.espn.go.com/ncb/index 

The captian text for the main photo overlaps the photo.

Per bclary, issue is the image is aligned right and the br clear="all is
supposed to make the text appear below the image but does not. Removing the
align="right" on the image 'fixes' the problem. 

Is this the same bug as this? If so who can this be assigned to?
ESPN is a very top site.

Comment 7

[Christine Hoffman]

I haven't really analyzed this but I don't think it's the same problem as the
ESPN issue, because where a current trunk build reveals the fix for ESPN, the
attached testcases here remain the same, except the url listed in comment #5
where I am unable to reproduce the problem in current or previous builds.

Comment 8

[Christopher Hoess (gone)]

->Floats

Comment 9

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

*** This bug has been marked as a duplicate of 25888 ***