Bullets disappearing behind image

Forum Moderators: not2easy

Message Too Old, No Replies

Bullets disappearing behind image

sammyvig

2:24 pm on Aug 28, 2007 (gmt 0)

Hi!

I have a problem with bullets disappearing behind left aligned images in Internet Explorer 6. See the following code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>List problem</title>
<style>
.leftImage {
float: left; 
clear: left;
}
</style>
</head><body>
<p><img src="image.gif" style="width:100px; height:100px" class="leftImage">Lorem ipsum dolor sit amet.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>

What I want to achieve is left aligned images in text, the text wrapping around the image (the CSS equivalent of img align=left). But the bullets in lists disappear behind the image.

I have tried to set different margins and paddings on ul and li, but it doesn't have any effect.

Any ideas?

fireguy

2:43 pm on Aug 28, 2007 (gmt 0)

apply margin-right:2em; (2em for example) to .leftImage..

sammyvig

2:52 pm on Aug 28, 2007 (gmt 0)

Adding space to the right of the image to make the bullets visible will add too much space, according to the design. I want the bullets to appear like normal when the code is...

<p>Lorem ipsum dolor sit amet.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

... just with a picture to the left.

fireguy

2:59 pm on Aug 28, 2007 (gmt 0)

best thing I can think of is just to add padding-right or margin-right to the image...you can adjucst it by pixel until you get the desired look

Marshall

5:13 pm on Aug 28, 2007 (gmt 0)

Try making the image a background and set margins and padding accordingly.

Marshall

bazooka

12:50 pm on Aug 29, 2007 (gmt 0)

I got acceptable results by using the following two things:


ul { 
list-style-position: inside; 
} 
li { 
padding-left: 1em; 
}