By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,825 Members | 1,269 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,825 IT Pros & Developers. It's quick & easy.

A rendering problem with left aligned image and lists

P: n/a
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
Share this Question
Share on Google+
3 Replies


P: n/a
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

P: n/a
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

P: n/a
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.