Bullets missing when next to image 1

[JillC]

I have a series of images which are floated left at the beginning of the paragraph. Then when I want to put in an unordered list, the bullets do not show and the text does not wrap properly.

<p><img src="images/luckybag.jpg" width="320" height="180" />Hidden inside a blue Lucky Packet are five great gifts for boys.</p>
<ul>
<li>Chattering teeth – wind them up and watch them run and chatter</li>
<li>Pirate Eye Patch – for the young Pirate in every boy</li>
</ul>

All the images are 320 px wide.

The CSS includes .....

#main {
float:none;
width:98%;
padding: 2px;
}

#main p {
color:#555;
line-height:2.0;
padding:10px;
}
#main img {
width: 320px;
float: left;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
#main ul {
list-style-type: square;
color:#555;
line-height:1.3;
}


I have fiddled about with margin and padding but am getting nowhere. If I include list-style-position: inside;
I get the bullets showing up but the wrap goes back under the bullet instead of the indent position.

What have I done wrong?

 

[Vragabond]

That's a common error with IE. It happens because IE creates the indented list by giving it a margin on the left. However, with floated item on the left, the margin will simply stay hidden. FF gets away with it, because it makes the list by applying padding-left to the bullets. You could introduce an arbitrary div tag that would surround the list and have a margin on the left set to the size of the image. Or experiment with the margin set to the list, but that will probably give you varying results in different browsers.

 

[JillC]

Thanks Vragabond,

I surrounded it with a div with a margin of 360px to allow for image, padding and margins. Then I added in text-indent: -4px to the li and that seems to have worked more or less. Not quite lined up and is a bit squashed in Firefox and Netscape but it will do.

Thanks for your help.