A rendering problem with left aligned image and lists

**Sam Hughes** · Jul 20 '05, 07:38 PM

Re: A rendering problem with left aligned image and lists

sakeri@iki.fi (Saku) wrote in news:4060b38b.0 408130734.4e240 cc9
@posting.google .com:
[color=blue]
> Greetings,
>
> I'm having problems with correct rendering of an aligned image and
> list items. The following test page demonstrates the issue:
>
> ----------clip---clap---clip---clap----------
> <html>
> <head>
> <title>Test Page</title>
> </head>
> <body>
>
> <img src="aPic.gif" align=left height=200 width=200>
> <P>A Paragraph.</P>
> <UL>
> <LI>A point</LI>
> <LI>Another point</LI>
> </UL>
>
> </body>
> </html>
> ----------clip---clap---clip---clap----------
>
> When my IE 6 (on Win XP) renders this page, the bullets in the
> unordered list sort of "fall into" the image - i.e. they are not
> visible and actually are drawn under the picture [...][/color]

Use a little CSS:

<html>
<head>
<title>Test Page</title>
</head>
<body>

<img src="aPic.gif" align=left height=200 width=200>
<P>A Paragraph.</P>
<UL style="float: left; padding-left: 1em; margin-left: 0;">
<LI>A point</LI>
<LI>Another point</LI>
</UL>

</body>
</html>

--
How to make it so visitors can't resize your fonts:
<http://www.rpi.edu/~hughes/www/wise_guy/unresizable_tex t.html>

**Neal** · Jul 20 '05, 07:38 PM

Re: A rendering problem with left aligned image and lists

On 13 Aug 2004 08:34:47 -0700, Saku <sakeri@iki.f i> wrote:
[color=blue]
> Greetings,
>
> I'm having problems with correct rendering of an aligned image and
> list items. The following test page demonstrates the issue:[/color]

Even though this is short, it would be better as a URL to a live location.
[color=blue]
> ----------clip---clap---clip---clap----------
> <html>
> <head>
> <title>Test Page</title>
> </head>
> <body>
>
> <img src="aPic.gif" align=left height=200 width=200>
> <P>A Paragraph.</P>
> <UL>
> <LI>A point</LI>
> <LI>Another point</LI>
> </UL>
>
> </body>
> </html>
> ----------clip---clap---clip---clap----------[/color]

You should use a doctype and the required alt attribute on img. Anyway...
[color=blue]
> When my IE 6 (on Win XP) renders this page, the bullets in the
> unordered list sort of "fall into" the image - i.e. they are not
> visible and actually are drawn under the picture which is obviously
> not intented. Basically the intendation does not work as I expected
> with the image on the left side.
>
> Does anyone know if there is a way around this? Is there something
> wrong with my approach and is there a better one? This way of aligning
> images is easy and works without problems as long as I don't use
> lists, so I'd like to use it.
>
> Any suggestions? Thank you in advance.
>
> Saku[/color]

Use CSS instead of presentational markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
img {
float: left;
margin-right: 2em;
}
</style>
</head>
<body>
<img src="aPic.gif" height="200" width="200" alt="Appropriat e ALT text">
<p>A Paragraph.</p>
<ul>
<li>A point</li>
<li>Another point</li>
</ul>
</body>
</html>

**Saku** · Jul 20 '05, 07:38 PM

Re: A rendering problem with left aligned image and lists

Thank you for your suggestions,
[color=blue]
> Even though this is short, it would be better as a URL to a live location.[/color]

A good point. The example page I gave can be found at

http://www.saunalahti.fi/~sairosma/example/example.html

The suggestion that Sam gave (adding style to <UL> element) can be
found at

http://www.saunalahti.fi/~sairosma/example/suggestion1.html

The suggestion that Neal gave (adding a right margin to the image) can
be found at

http://www.saunalahti.fi/~sairosma/example/suggestion2.html

These are good ideas, but didn't quite get me there - my problem is
that I cannot specify the style for <UL> case by case, since I'm
working with a content management framework and have to define the
style of <UL> elements globally (specifying style="float: left" causes
problems elsewhere). I should have mentioned this restriction in the
original post...

Anyway, I'm basically trying to achieve what Sam did in his suggestion
without changing the style definition of <UL> elements. I don't know
if this can be done, but if somebody knows the way, I'd be grateful. I
can change the style definition of the image and Neal's suggestion is
relatively ok, but doesn't actually do anything for the intendation of
lists - when using this method the lists look a bit odd with larger
amounts of text, check

http://www.saunalahti.fi/~sairosma/example/suggestion2-withMoreText.html

to see what I mean. As you can see, the list bullets actually are
outside the body of the text.

So, if you have any other ideas, I'd be grateful to hear them.

Cheers,

Saku

A rendering problem with left aligned image and lists

A rendering problem with left aligned image and lists

Comment

Comment

Comment