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>
<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

Subscribe Reply

2592

Sam Hughes

sa****@iki.fi (Saku) wrote in news:4060b38b.0 408130734.4e240 cc9
@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_tex t.html>

Jul 20 '05 #2

Neal

On 13 Aug 2004 08:34:47 -0700, Saku <sa****@iki.f i> 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="Appropriat e ALT text">
<p>A Paragraph.</p>
<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

Similar topics

3410

Centering Thumbnail Galleries with CSS: Floats, Inline, Lists, ???

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 images consistently reconstitute themselves as centered rows with the maximum number of images on each row. I've made a test page at...

HTML / CSS

3313

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 the next two images in a <DIV> tag with float: right in order to force the containing content to be aligned on the right. I also set...

HTML / CSS

2263

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 3 colums, 1 and 3 with titles and the 2 with a big image. Well, 1 and 3 are not perfectly at the top of their column while 2 is even worst...with...

HTML / CSS

1763

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 rendering is the weirdest one -- the background and border of the items (placed within span tags) are

HTML / CSS

1386

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. (use a fixed-width font to view this!) Some short text. +-------+ | | +-------+

HTML / CSS

2011

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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

HTML / CSS

6982

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 on the extreme left of the box, the text centered in the reamaining space in that section. The center third contains two lines prompting for a...

HTML / CSS

4985

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 problem. Even that complex solution works well only in FireFox (haven't tested Safari...). Can anyone come up with a better solution, where 'better'...

HTML / CSS

3116

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 image elements that belong in the list but I've only posted 2 since it replicates the problem and minimizes the code to read. In FF, you should see a...

HTML / CSS

7918

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7843

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...

Windows Server

8206

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...

C / C++

8340

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...

Online Marketing

7967

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

8220

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...

General

5392

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3875

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1452

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP