13 replies [Last post]
pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

hi, why does the text not appear next to the first image in ie 6 please? http://www.reapfuels.co.uk/test/default.html

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

also doesnt work in ie7, any

also doesnt work in ie7, any idea please?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

it looks to be related to

it looks to be related to the float drop bug. Could you wrap the two images in a div and float that div?

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Ill try that now, thanks for

Ill try that now, thanks for the suggestion, and for giving it a name. Feel i shouldn't have to add unnecessary markup though - its anoying!

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Its not working i dont

Its not working Sad i dont think its the float drop bug, because the text or the images dont have width. I have put together the most simple example of this bug i can here: http://www.reapfuels.co.uk/test/index.html

Not how ie displays the text only after the first image has cleared.

Any help would be greatly appreciated.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I don't think it's the float

I don't think it's the float drop bug either - I think it's related to the float drop bug. I placed the two images in a div and float the div left and it works fine (whether the images were floated or not).

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Thanks for the reply wolfcry911, but...

I think i must be missing something, if i try what you suggested the text appears below the images http://www.reapfuels.co.uk/test2/ i would have to give the text width so it would appear adjacent to the first image, and then i have a two column layout which is not what i want, i just want the text to wrap the images in all ie browsers. Thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It works for me here in IE6

It works for me here in IE6 and IE7. You don't need to give the p a width and it's not really a two column layout because with enough text, the p would wrap around and under the floating div.

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

your right, but safari displays it below

Apologies, your right, ie displays it correctly now, but safari displays the text underneath, grrr. You hack it for one browser, only to break it in another. Perhaps floating the div in a conditional comment is the answer? its all getting a bit messy.

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

still struggling

Wolfcry911, do you have any ideas how this can be solved for all browsers including safari please?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Not that I doubt you, but I

Not that I doubt you, but I can't believe this wouldn't work in Safari. I'm at work right now, so I'll investigate later.

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Thanks

Thank you wolfcry911

AttachmentSize
eg.png 637.57 KB
wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

pingu, I did some research

pingu, I did some research and found that Safari's rendering may actually be correct. The reason is that because the floating divs width has not been set and it's containing more than one child float it's trying to place the children side by side and hence making the div's width as wide as possible (wrapper width). The solution is to clear the child floats - the images.

This is not tested:

#floatLeft img {
float: left;
clear: left;
}

pingu
pingu's picture
Offline
Enthusiast
UK
Last seen: 6 years 7 weeks ago
UK
Timezone: GMT+1
Joined: 2006-07-24
Posts: 63
Points: 5

Thank you

Thank you very much wolfcry911, that solution works, and your explanation makes sense to me. Surprised by how little information there is about this bug on the net, i would have thought it would have come up quite often. Thank you once again.