float:left inside display:block doesnt show

[theEclipse]

Hello all.

I am working on a layout and I want the paragraph that wraps around an image. No problem I think.....

welp,

<div id="content">
<p><img src="..." style="float:left; margin-right:5px;">text text.......</p>
</div>

that should do it, right? It does, in real browsers....but not IE6/WinXp. IE makes the paragraph wrap around the image just fine, but doesnt display the image....its just a big blank square.

aggervating to say the least. I have done some googling and found lots of ie css layout bugs and box model bugs and float bugs ect ect.....but of all the workarounds I have found to get around IEs faults, I cant seem to find something that works.

The only thing that I can do to get the image to display is set the display of the containing div to inline. this allows the image to display properly, but then the text is all funky.....


Any ideas?

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[theEclipse]

I posted an example online.

[URL unfurl="true"]http://durangocornerstone.com/index2.html[/url]

check it out in IE and moz.






Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[ChrisHunt]

Try putting the image outside the paragraph:

<div id="content">
<img src="..." style="float:left; margin-right:5px;">
<p>text text.......</p>
</div>

Or maybe include [tt]display:block[/tt] in the image's styles? IE's a law unto itself - you just have to tinker with it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[CliveC]

Works ok for me!
You must be under some evil enchantment.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[CliveC]

I was referring to your original example. Evidently your link has some problem with the css.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[Vragabond]

First, add a complete and valid doctype at the top of your document. That will help IdioticExplorer try a little harder to display the page properly. Then try with what Chris said, which is actually a more proper way of floating an image next to the text. You can ignore the display: block on image though -- floating and image automagically transforms it to block.

 

[theEclipse]

Clive and Vargabond-

I added the doctype and such (cant believe I missed that....). What I found out is that the reason the image was not being shown is because the paragraph had a background-color element set.

I came about this while being aggervated and decided to get back at the browser by menacingly resizing it really small . But it ended up working out for me as I discovered that IE seems to not allow floated elements to exist above the elements that they are floating in.

I am still having some trouble with margin values between ie and moz, but that just needs some tweaking.

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net