5 replies [Last post]
ruauu2
Offline
newbie
Ohio
Last seen: 11 years 50 weeks ago
Ohio
Timezone: GMT-5
Joined: 2008-11-13
Posts: 8
Points: 0

I'm using what I'm calling a "quote box." I don't know the proper term, but it's like the code box used in this forum.

The quote box is floating to the left of the image correctly in IE, but not in FF.

http://www.travelouterbanks.com/wildlifetest.html

The CSS validates and the HTML has two errors, but I'm pretty certain those errors have nothing to do with the problem. (I can't fix those errors because they are generated by code inserted by my host)

I stripped out what I knew was unnecessary - I hope I didn't leave too much in.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 39 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I don't get it why does it

I don't get it why does it need to float to the left it's in a paragraph tag like the rest of your text therefore it should do it anyway. More to the point its maybe 3 or 4 lines below the images anyway so it wouldn't float beside it anyway.

ruauu2
Offline
newbie
Ohio
Last seen: 11 years 50 weeks ago
Ohio
Timezone: GMT-5
Joined: 2008-11-13
Posts: 8
Points: 0

Quote:I don't get it why

Quote:

I don't get it why does it need to float to the left it's in a paragraph tag like the rest of your text therefore it should do it anyway.

That may be true, but without the float property, it does not even display correctly in IE.

Quote:

More to the point its maybe 3 or 4 lines below the images anyway so it wouldn't float beside it anyway.

It should be immediately after the paragraph that ends "...migratory waterfowl." Did you look at it in IE? It displays properly in IE.

Quote:

Before posting please validate your documents including your CSS.

As stated in my post, I did validate both the CSS and the HTML.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Remove the float and instead

Remove the float and instead give it a right margin wider than the image.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ruauu2
Offline
newbie
Ohio
Last seen: 11 years 50 weeks ago
Ohio
Timezone: GMT-5
Joined: 2008-11-13
Posts: 8
Points: 0

Why didn't I think of that?

Why didn't I think of that? I don't mind doing that, but is this considered okay practice? The reason I ask is this situation is likely to come up in the future and it seems it would be better to have a rule rather than have to determine and assign it a margin value that is going to be different often.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The problem with creating a

The problem with creating a rule is that it's possible that your boxed content won't always be next to an image in which case you won't need the extra margin. You could certainly create a rule for the border, background, padding etc, but maybe apply the margin as inline style as it's needed (not a great solution I know particularly if you're dealing with dynamically generated content).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference