Please Help! wrapping lists around floating image

I'm trying to figure out how to fix this issue. It displays satisfactory in FF, however, in IE, the space between the list item and the bullet image is too great, and i cannot figure out how to shrink it. nothing works, no adjustment of margins or padding, nothing. I have seen a similar problem given a solution by placing an image in the list item to replace the bullet, but this is not acceptable for me. i have lists of varying lengths, and i need the layout to stay the same no matter how much text is in each list item. Also, it must wrap around the image on the left (the one that has a float), and cannot simply float next to it.

here is the sample markup: (keep in mind this is one row of about 5 or 6, all with different content.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
font-family:Arial;
font-size:11px;
color:#444444;
margin: 0px;
padding: 0px;
}
#wrapper
{
 position:relative;
 margin-top:7px;
 margin-left:auto;
 margin-right:auto;
 width:980px;
}
#body
{
 width:848px;
 background:#ffffff;
 background-repeat:repeat-y;
 
}
#content
{
width:601px;
float:right;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 24px;
 
}
.contentRowHeader {
width: 601px;
margin-bottom: 11px;
}
.contentRowBody {
width: 549px;
margin-left: 26px;
}
.contentImage {
height: 150px;
width: 200px;
margin-right: 26px;
}
.contentRowBody ul{
margin-top: 0px;
margin-bottom: 0px;
list-style-position: outside;
list-style-image: url(bulletap4.gif);
padding-left: 17px;
margin-right: 0px;
margin-left: 0px;
}
.contentRowBody li {
margin-bottom: 15px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.contentHeader {
width: 601px;
margin-top: 22px;
margin-bottom: 22px;
}
.contentRow {
margin-bottom: 15px;
}
.floatLeft {
float:left;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="content">
 <div class="contentRow">
 <div class="contentRowHeader"><img src="spacerblue.gif" alt="#" width="577" height="37" /></div>
<div class="contentRowBody">
 <div class="floatLeft"><img src="spacerblue.gif" alt="fishing" width="200" height="150" class="contentImage" /></div>
 <ul>
  <li>No two items have to be the same! Tweak and upgrade store-bought items and add blah blah blah blah balayour own twist to weapons and armor. Modify or Enchant your item until it&rsquo;s perfect for you!</li>
  <li>Items used faithfully for long periods of time increase in dexterity. Appropriate NPCs can modify items for you. Each NPC has a general modification skill and a special modification unique to each NPC. It&rsquo;s important to find out each NPC&rsquo;s specialty and style before asking for modifications.</li>
  <li>Further personalize your Fantasy Life with custom weapons and items!</li>
</ul>
  <div class="clear"><!-- --></div>
 </div>
 </div>
</div>
</div>
</div>
</body>
</html>

blue spacers are used in the example; actual gifs are normally used.

any help or suggestions are very welcome, as i have hit a wall, and have no idea how to proceed, other than to shake my fist in the air at mircosoft for making such horrible software.

mod added: note: bullet image = 3px x 7px

[1][edited by: SuzyUK at 7:42 am (utc) on Feb. 26, 2008]
[edit reason] examplified specifics [/edit]

Please Help! wrapping lists around floating image

CSS IE bug with lists and floating images

dingo8baby

4css

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week