A rendering problem with left aligned image and lists

Saku

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>
A Paragraph.
<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

Subscribe Post Reply

2582

Sam Hughes

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>
A Paragraph.
<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>
A Paragraph.
<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

Neal

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>
A Paragraph.
<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">
A Paragraph.
<ul>
<li>A point</li>
<li>Another point</li>
</ul>
</body>
</html>

Jul 20 '05 #3

Saku

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

by: Filippo Giarratano | last post by:

Hi -- I'm trying to figure out how to make a photo thumbnail gallery page using CSS and no tables that (1) has a caption below each image and (2) is centered -- so that as browser width changes the...

HTML / CSS

Using float:right in Netscape with absolute positioning

by: JKenyon | last post by:

I am attempting to display two images on a web page. The second "image" is actually two images, one overlaid on the other. The first one is aligned on the left using float:left. I have enclosed...

HTML / CSS

Content is not aligned at the top of a div with IE 6?!?!?

by: Ataru Morooka | last post by:

Hello, I am renewing a website using CSS and I have some problems with IE6. Following this link: http://www.ansv.it/templates/Template_Index_IT.dwt.asp you may notice that the container area has...

HTML / CSS

Help with buggy rendering

by: Beetlegeuse | last post by:

Here is a screenshot of three different versions of rendering of the trouble area: http://img371.imageshack.us/img371/2572/layout8xg.gif (ignore the language of the text) The first...

HTML / CSS

Problem aligning with float and clear

by: Paul E Collins | last post by:

Hello. I want to display a number of individual blocks of text. Each block has an associated image, which should be displayed on the right and aligned with the top of its block of text, i.e....

HTML / CSS

2 lists: 1 left aligned and 1 right aligned on same line

by: JB | last post by:

Hi All, Why doesn't this work in Firefox but is perfect in IE6? In IE6, the text is on the same line but in Firefox, the left aligned text is on the line above the right aligned text. ...

HTML / CSS

Please help with (hopefully) simple box login form layout?

by: bobmct | last post by:

Again: struggling to convert old-style HTML to html using css. I am trying to create a rectangular box divided into approx three vertical sections. The top section contains an image I would like...

HTML / CSS

Image with credit and caption - an experiment

by: Chris Beall | last post by:

See http://pages.prodigy.net/chris_beall/Demo/photo%20block%20experiments.html I've ended up with what seems like a rather complex structure for what I thought would be a somewhat simple...

HTML / CSS

IE7 rendering problem for image UL list navigation

by: rirby2 | last post by:

Hi everyone, I'm currently having a rendering problem in IE7 (haven't even tried the lower IEs yet), vs. what I see in FF2. The simplified site can be found at solerasd.com . (There are more...

HTML / CSS

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

A rendering problem with left aligned image and lists

Similar topics