Text wrap and image position questions
in [CSS]
|
From: Ben C on 25 Feb 2010 11:59 On 2010-02-25, jeff <jeff_thies(a)att.net> wrote: > Neil Cherry wrote: >> I'm afraid I can't quite wrap my head around this topic (pun >> intended). I've been able to put an image to the top left or top >> right and have the text of a long paragraph wrap around the image. >> >> Example: >> >> A start of the text text text text text text text text +-------+ >> text text text text text text text text text text text | | >> text text text text text text text text text text text | Image | >> text text text text text text text text text text text | | >> text text text text text text text text text text text +-------+ >> text text text text text text text text text text text text text >> ... >> >> but I am unable to put an image towards the bottom left or bottom >> right and have the text wrap and finish with the bottom of the text >> and the bottom of the image matching. Is this possible using legal >> css? >> >> Example: >> >> ... >> text text text text text text text text text text text text text >> text text text text text text text text text text text +-------+ >> text text text text text text text text text text text | | >> text text text text text text text text text text text | Image | >> text text text text text text text text text text text | | >> text text text text text text text text text text end. +-------+ >> >> Any pointers would be appreciated, thanks. > > inline-block. vertical-align: bottom The text won't flow around it. ><p style="display: inline-block;vertical-align: bottom; width: 200px;"> > text here ....</p> ><img style="display: inline-block;vertical-align: bottom; ... > > Google IE6 and inline-block to get around IE6. I think IE7 is OK. > > Inline block is the most powerful tool that is neglected. > > Jeff >>
From: Thomas 'PointedEars' Lahn on 25 Feb 2010 12:01 jeff wrote: > Google IE6 and inline-block to get around IE6. I think IE7 is OK. > > Inline block is the most powerful tool that is neglected. Perhaps because its degree of compatibility is questionable. Last I checked, not even IE/MSHTML 8 supported it. PointedEars
From: jeff on 25 Feb 2010 12:03 Ben C wrote: > On 2010-02-25, jeff <jeff_thies(a)att.net> wrote: >> Neil Cherry wrote: >>> I'm afraid I can't quite wrap my head around this topic (pun >>> intended). I've been able to put an image to the top left or top >>> right and have the text of a long paragraph wrap around the image. >>> >>> Example: >>> >>> A start of the text text text text text text text text +-------+ >>> text text text text text text text text text text text | | >>> text text text text text text text text text text text | Image | >>> text text text text text text text text text text text | | >>> text text text text text text text text text text text +-------+ >>> text text text text text text text text text text text text text >>> ... >>> >>> but I am unable to put an image towards the bottom left or bottom >>> right and have the text wrap and finish with the bottom of the text >>> and the bottom of the image matching. Is this possible using legal >>> css? >>> >>> Example: >>> >>> ... >>> text text text text text text text text text text text text text >>> text text text text text text text text text text text +-------+ >>> text text text text text text text text text text text | | >>> text text text text text text text text text text text | Image | >>> text text text text text text text text text text text | | >>> text text text text text text text text text text end. +-------+ >>> >>> Any pointers would be appreciated, thanks. >> inline-block. vertical-align: bottom > > The text won't flow around it. I misread what the op wanted. I only got it should end at the bottom. Jeff > >> <p style="display: inline-block;vertical-align: bottom; width: 200px;"> >> text here ....</p> >> <img style="display: inline-block;vertical-align: bottom; ... >> >> Google IE6 and inline-block to get around IE6. I think IE7 is OK. >> >> Inline block is the most powerful tool that is neglected. >> >> Jeff
From: jeff on 25 Feb 2010 18:32 Thomas 'PointedEars' Lahn wrote: > jeff wrote: > >> Google IE6 and inline-block to get around IE6. I think IE7 is OK. >> >> Inline block is the most powerful tool that is neglected. > > Perhaps because its degree of compatibility is questionable. > Last I checked, not even IE/MSHTML 8 supported it. > I haven't checked in IE8. It's supported in all other (non MS) mainstream UAs. I find it so useful that it's worth the workaround. I assume you know of these, but for those who don't, the issue is that IE only wants to set inline-block for inline elements. So you either use spans instead of divs, or you use conditional comments to set inline-block rules as inline. I think Dean's IE (javascript) fix also works. You'd think IE would get it right after all these years, but that would go against it's nature. It's much like an old MGB (or any English car), where the manufacturer expected the owners to adapt to the quirks, rather than ever fix them! With that said I have high hopes for IE29. Jeff > > PointedEars
From: Thomas 'PointedEars' Lahn on 27 Feb 2010 00:59
First of all, how did you get the idea that stylesheets would be off-topic in comp.infosystems.www.authoring.*stylesheets*? Your change of Subject is inappropriate. As is your multi-part posting; the e-sig, if any, belongs elsewhere, preferably in the header where users with non-PGP/GPG-able UAs would not be bothered. BootNic wrote: > jeff <jeff_thies(a)att.net> wrote: >> Thomas 'PointedEars' Lahn wrote: >>> jeff wrote: >>>> Google IE6 and inline-block to get around IE6. I think IE7 is >>>> OK. >>>> >>>> Inline block is the most powerful tool that is neglected. >>> >>> Perhaps because its degree of compatibility is questionable. >>> Last I checked, not even IE/MSHTML 8 supported it. >> >> I haven't checked in IE8. It's supported in all other (non MS) >> mainstream UAs. > > IE8 supports inline-block Perhaps when not in Compatibility Mode. And IE 8 is so borken that you often need Compatibility Mode to get things done in a standards-compliant way that no other UAs have a problem with (for example, child elements overlapping ancestors' sibling elements with z-index). (I may have been testing inline-block with a beta version, or in Compatibility Mode.) Microsoft's description of the behavior of inline-block and the different standards-compliant outcome in Firefox does not bode well for inline-block being properly implemented in IE 8 either: <http://www.w3.org/Style/CSS/Test/CSS2.1/20100127/html4/display-005.htm> (notice the "author" metadata) PointedEars |