text not wrapping around div in IE

[Graham Wellington]

I want it to look like this in IE:

#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!#*$!#*$!x
#*$!#*$!#*$!#*$!#*$!x
#*$!#*$!#*$!#*$!#*$!x

Firefox displays correctly.

IE7 displays like this: (possibly IE6 and IE5 as well)

#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx oooo
#*$!#*$!#*$!xx
#*$!#*$!#*$!xx
#*$!#*$!#*$!xx
#*$!#*$!#*$!xx

code:

<?php if ($node->node_images) {?>
<!-- Node images -->
<div class="node-images" rowspan="2">
<?php print $node->node_images?><?php?>
</div>
<?php }?>
<div class="content"><?php print $content?></div>

relevant css:

.node-images a img {
margin-bottom: -3px;
}

.node-images {
float: right;
border: 1px solid #000;
padding: 5px;
margin-left: 10px;
margin-top: 10px;
}

.node .content {
text-align: left;
font-size: 0.85em;
line-height: 1.3;
min-height: 137px;
}

[Robin_reala]

I believe that the min-height you set on .content is triggering hasLayout [webmasterworld.com] in IE7 and causing it to drop into it’s broken float model. Try removing it and seeing if this helps? For what it’s worth I can’t see any reason why you’d need a min-height here.

[edited by: Robin_reala at 7:29 pm (utc) on Mar. 2, 2007]

[Graham Wellington]

It worked!

But I really would like to keep a minimum height in my layout.

It consists of a title, description, right thumbnail, bottom links:

title

#*$!#*$!#*$!#*$!#*$!x ooo
#*$!#*$!#*$!#*$!#*$!x ooo
#*$!#*$!#*$!#*$!#*$!x ooo

link1 link2 etc

When the page is maxed out, I want the links to be flush with the thumbnail, which are generated fixed at 150px.

When the page is maxed out, the links will be higher than the bottom of the thumbnail, which doesn't look too pretty imo.

title

#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$! ooo
link1 link2 ooo
ooo

min-height insures everything is flush when maxed:

#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$!#*$! ooo
ooo
link1 link2 ooo

Is there a way to keep min-height with my text wrapping as it should?

[Graham Wellington]

sorry, those renditions came out horribly... i hope you understood what I meant nonetheless.

[Robin_reala]

I think so :) Can you contain your picture and text inside a parent element and set a min-height on that instead?

[Graham Wellington]

Ok.. I wrapped it around a parent like you suggested and IE7 and Firefox both look fine. Both drop down to the desired height and wrap around my floated image.

IE6 however refuses to recognize min-height whatsoever. Whether with the parent, or without the parent...

Do you know of a solution for IE6?

Thanks again!

[Graham Wellington]

oops i wrote too soon. caching made it appear as though the change went into affect but it didn't.

Even when putting those elements into a parent div , the text still refuses to wrap around my floated image.

min-height is definitely the culprit, but i can't find anyone else with this issue on google... very frustrating...

[Robin_reala]

The text should wrap if you set a min-height on the parent but not on the text itself. Are you sure that’s not working? Can you post your revised code?

Regarding min-height and IE6 there’s a small problem - it doesn’t support it. Luckily IE6 with treat height like min-height in this situation, so if you give the container a height and only show that value to IE5+6 then that should work. You could use conditional comments but for this I’d probably go for the tried and tested * html hack:

.my_wrapper { min-height: 137px; }
* html .my_wrapper { height: 137px; } /* :hack: IE5+6 don’t support min-height */