By shane on

Hello - I've got a general question - not sure if it's theme related or if it's site admin/content related. I often put a picture in the beginning of a node as part of the node content, here's an example of what I'm doing:

<img src="/foo/bar/image.jpg" hspace=4 border=0 align=right>
<h3>Some Title</h3>
Some text about some nifty story, with a niftier image that
should display to the right ...

However,I've found that the Teaser display causes serious formatting issues if the image is bigger than the block of text that gets slurped into the teaser block.

Specifically, the image will float down past the end of the teaser output, and float into the next nodes information. This is particularly unsightly and a serious issue if you have several teasers displayed, and several images all floating past the boundaries of the teaser output.

I'm using 4.4.0 release with XTemplate. Is there some HTML, CSS, etc... magic I can use around the image to insure that the teaser node output/block is expanded to encompass the same size as the image so the unsightly formatting issues go away?

Thanks in advance!

Comments

pennywit’s picture

pennywit commented

Here's something I did in 4.3. Don't know if it'll work in 4.4. I toss my image where I want it -- say in the second paragraph. Then, I run the preview. I guesstimate where the image ends and allow for a little more text below it. Then I throw in the break tag.

shane’s picture

shane commented

That's pretty much what I do too ... but there is always the issue of browsers rendering things differently, higher resolution settings for some folks - creating a wider web browser which will shortend the length (top to bottom) of the rendered text, etc...

I'm still hoping that there might be some CSS or HTML trick that will force the teaser to be long enough not to cause issues with rendered images.

adrian’s picture

adrian commented

I usually add 'style' to my img tag and set it to "float:left" or "float:right"

and then I modified the css to add (something along the lines of)

.node .links { clear: both }

then i have my image as the first line of the post, and it automatically floats to the side i want, and the links will always try to display after any floats (due to the css)

  Sanity is a sandbox in the playground of my mind.
     I'm going to go play on the swings now.
toddgator’s picture

toddgator commented

Thanks for this simple, yet elegant solution!

- Todd

Get a free Mac Mini! | Unlimited templates and graphics | Web Hosting | Instant PHP websites