On Thu, 17 May 2007, Bob Meetin wrote:
> I commonly do something like:
>
> .clear {margin: 0; padding: 0; border: 0; }
>
> <fieldset class="clear">
> <legend class="clear"></legend>
> <img src="whatever" align="right">
> <p>content content</p>
> </fieldset>
>
> <fieldset class="clear">
> <legend class="clear"></legend>
> <img src="whatever" align="left">
> <p>content content</p>
> </fieldset>
A URL would be most useful, since the markup looks odd and it's difficult
to see what the approach aims at. When I test a simple case, I see
strangly aligned images.
> All this to keep images horizontally aligned with corresponding data,
> be it left or right.
Aligned in which sense? The images appear as flushed right or left but
_vertically_ aligned higher than the top of the text paragraph.
Is that really what you want?
> Is there a cleaner way to do this with CSS than
> fieldset/legend? Works great but seems like overkill.
It sounds rather illogical and risky, since you are not grouping form
fields, and the rendering of <fieldset> and <legend> is idiosyncratic.
Even if current browsers gave you consistent appearance, the rendering
might change in the next version. Form-related elements have changed their
appearance - compare e.g. the simple rectangular gray buttons in some
environements with rounded-corner light buttons in others.
> If I do this in an
> ordinary div, if the image is large and there is not enough content it
> just pushes its way out of the box. Missing something?
I'm missing a URL or two...
Wild guess: Your problem is caused by lack of clearing the flow before
starting a new block with a floated image, and in some environments,
<fieldset> happens to cause clearing.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
