Display incorrect in Firefox, okay in IE

[myrrh]

The problem is, in Firefox, the caption for an image. Instead of the caption appearing below the image, it appears to the right of the image and pushes the position of the image to the left of where it should be.

Here is what I think is relevant code:

<div class="right">
<img class="left" style="margin:16px 10px 4px 10px;" src="image-files/image.jpg">
<p style="float:left; font-size:8pt; display:inline;">caption</p>
</div>

.left
{
float:left;
clear:none;
margin:0px;
vertical-align:top;
display: inline;
}

.right
{
float:right;
clear:none;
margin:0px;
vertical-align:top;
display: inline;
}

Is that enough information?

About validating - my host does something to the code that causes some errors. Here are two of the HTML validator errors I'm getting:
"general entity "referrer" not defined and no default entity"
"reference to entity "referrer" for which no system identifier could be generated"

Those errors would not cause a display problem, would they?

The CSS validates okay.

[D_Blackwell]

If I understand correctly, the HTML & CSS seem overly convoluted for what you are attempting to achieve. Presuming that you actually need class="right", do you really need class="left" plus the inline <p> declaration just to put a caption below the image? It might be easier now, and sounder long-term, to recode the approach than to hack a fix.

<div class="right">
<img style="margin:16px 10px 4px 10px;" src="image-files/image.jpg">
<br />
Caption
</div>

Just add font-size: and/or line-height: to class="right".?

[myrrh]

I'll try what you've suggested, but I would like to know what the tag <br /> is. Thanks.

I hired someone to do this coding some time ago (he has since disappeared) and I know not enough about it to know why it was done this way.

[D_Blackwell]

<br /> is XHTML for a line break, where the / is needed for the self-closing tag. For HTML <br> will do the trick

<edit>Clarification</edit>

[edited by: D_Blackwell at 2:42 am (utc) on July 16, 2008]

[swa66]

In the original code I see no reason why it should display underneath one another. Hence I'd conclude that if IE displays it differently, it's IE that's wrong (as nearly always).

Perhaps best to restart it properly (display:inline and float:left or right, seem to be somewhat counterintuitive put together, similarly using a class and overriding setting sin the html can confuse you a lot).

[developnew]

Used <div style="clear:both"></div> after the
"
<div class="right">
<img class="left" style="margin:16px 10px 4px 10px;" src="image-files/image.jpg">
<p style="float:left; font-size:8pt; display:inline;">caption</p>
</div>
"

There is float problem..after that it should show correct in firefox..

Cheers
Bali

[myrrh]

I tried what D_Blackwell suggested and it mostly worked. Here's the problem now: the caption in not aligned under the image - it is touching the text to the left.

In other words, picture an image on the right and text to the left of that image, with a 10px margin between. The caption under the image is aligned all the way to the left, with the first letter of the caption touching the text next to the image.

How do I scoot the caption over so the beginning of the caption is aligned with the left side of the image?

[D_Blackwell]

Presumably each image and its caption is contained within one or two boxes, depending upon how you implemented the solution. You should be able to manipulate margin, padding, and/or text-align to adjust the presentation. That's as far as I can go without having the new code with which to exactly replicate the current issue.

My original suggestion only: 1) Put the text below the image in the simplest fashion possible (not necessarily best) 2) Suggested that the original code was overly convoluted, particularly if reused and expanded in scope of use over time. You may need to contain the caption within its own box in order gain maximum control.

Note: <dl> can be useful for presenting image and caption layouts. This gives you three boxes, the <dl> is the 'wrapper'. The <dt> controls presentation of the image. The <dd> controls presentation of the caption.

Max Design [maxdesign.com.au] - <dl> resource.

No doubt, plenty of solutions to choose from - you may be offered several other options.

[myrrh]

Here's what I did - is this kosher?

<div class="right">
<img style="margin:16px 10px 4px 10px;" src="image-files/widget.jpg">
<br><div id="caption">widget</div>
</div>

and in the style sheet:

#caption
{
margin:0px 0px 0px 10px;
}