/    Sign up×
Community /Pin to ProfileBookmark

Image caption placing and wrapping in Firefox vs. IE

Copy linkTweet thisAlerts:
Aug 24.2007

Hello,

I’m fairly new at this, and I’m guessing this might be a silly question, but I’ve been trying to convince both Firefox and IE 6 to show an image aligned to the right (float:right) with a caption underneath it and Firefox just doesn’t cooperate. I thought I had it covered by using the following:

<p style=”float:right;margin-left:10px;margin-bottom:10px;width=200px;”>
<i>
<img border=”0″ src=”image.jpg” width=”200″ height=”200″><br>
Boardwalk built to join two neighboring facilities in XXXXXXX snakes around
the native trees of the surrounding wetlands.</i></p>

You can see what’s happening in the attached images (pixelated, but it’s still viewable). IE wraps the text neatly under the image, but Firefox lets it run in a single line, no wrapping.

What can I do to make the caption text wrap in Firefox?

Thanks in advance!

Me ?

[upl-file uuid=ab022fcb-0751-427e-a3cd-799da03c1cef size=98kB]Sample CSS problem in Mozilla Firefox.gif[/upl-file]

[upl-file uuid=07f56b45-c522-4505-a262-1cebb216d46a size=95kB]Sample CSS problem in IE6.gif[/upl-file]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 24.2007 — You have some incorrect syntax here:

<p style="float:right;margin-left:10px;margin-bottom:10px;[B]width=200px;[/B]">[/QUOTE]

This should be "[B]width:200px;[/B]". Replace the " [B]=[/B] " with " [B]:[/B] "
Copy linkTweet thisAlerts:
@NatuScapeauthorAug 24.2007 — D'oh!! I knew it was something silly. Thanks so much!!!
Copy linkTweet thisAlerts:
@CentauriAug 24.2007 — [CODE]<p style="float:right;margin-left:10px;margin-bottom:10px;width[COLOR="Red"]:[/COLOR]200px;[COLOR="Red"]font-style:italic[/COLOR]">
<img border="0" src="image.jpg" width="200" height="200"><br>
Boardwalk built to join two neighboring facilities in XXXXXXX snakes around
the native trees of the surrounding wetlands.</p>[/CODE]

The separator between a property and its value is [COLOR="Blue"]:[/COLOR] not [COLOR="Blue"]=[/COLOR]

Also, the <i> tag can be replaced by the font type declaration in the <p> style.

Edit: oops, took too long to post reply - WebJoel wins again! ?
Copy linkTweet thisAlerts:
@NatuScapeauthorAug 24.2007 — But you gave me an extra tip... so that earns you extra points too! Thanks!!
×

Success!

Help @NatuScape spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...