Forum Moderators: open
I have a rendering problem with Firefox (2 + 3) to do with text flow.
I have a web page with a a large image in the top left hand corner 500x500px. I then want some text to flow round the right hand side of this image so that it wraps. This works fine, the image is set to align=left and the text flows beautifully.
I then needed to put a title on the right hand side only, above the text. The title is made up of 3 images, left, mid, right to give a rounded corner and gradient effect - and is contained in a table set to width=100%. This is where FF goes a bit wrong. FF seems to correctly position the left hand side of the table next to (right of) the big 500x500 image. Unfortunatley is does not calculate the remaining width, and gives the table the width of a whole page, overflowing the side of the browser. The text below it wraps correctly at the edge of the browser but the table overflows :-/
Here is a snippet of simplified code to repeat the problem:
<img src="images/pixel.gif" alt="space" width="500" height="500" align="left"/>
<table cellspacing="0" cellpadding="0" border="1" width="100%"><tr><td>Title</td></tr></table>
some text next to an image some text next to an image some text some text next to an image some text next to an image some text some text next to an image some text next to an image some text
The "title" bar has expanded over the right hand edge of the page. The text below it is rendered correctly and wraps at the edge of the browser.
The problem also occurs with IE also but if I wrap the table in a div tag, the problem goes away in IE but not FF.
(On the real site, the text + headings come from a database - so there can be any number of them and any length - hence why I need the text to flow and not use a table/div for formatting)
Any help would be greatly apprieciated.
Ben
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
Trying to fix cross-browser display differences with errors in the code can be frustrating - and even impossible to do. That's because each browser has different error-recovery routines and what you see in one browser may be created by that error-recovery, rather than the source code you wrote.
