468,505 Members | 1,768 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,505 developers. It's quick & easy.

A rendering problem with left aligned image and lists

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 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
Jul 20 '05 #1
3 2410
sa****@iki.fi (Saku) wrote in news:4060b38b.0408130734.4e240cc9
@posting.google.com:
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 [...]


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_text.html>
Jul 20 '05 #2
On 13 Aug 2004 08:34:47 -0700, Saku <sa****@iki.fi> wrote:
Greetings,

I'm having problems with correct rendering of an aligned image and
list items. The following test page demonstrates the issue:
Even though this is short, it would be better as a URL to a live location.
----------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----------
You should use a doctype and the required alt attribute on img. Anyway...
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


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="Appropriate ALT text">
<p>A Paragraph.</p>
<ul>
<li>A point</li>
<li>Another point</li>
</ul>
</body>
</html>

Jul 20 '05 #3
Thank you for your suggestions,
Even though this is short, it would be better as a URL to a live location.


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/e...ggestion1.html

The suggestion that Neal gave (adding a right margin to the image) can
be found at
http://www.saunalahti.fi/~sairosma/e...ggestion2.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/e...hMoreText.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
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Beetlegeuse | last post: by
reply views Thread by Paul E Collins | last post: by
11 posts views Thread by Chris Beall | last post: by
reply views Thread by NPC403 | last post: by
3 posts views Thread by gieforce | last post: by
reply views Thread by fmendoza | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.