I am making a list for a menu, I had the list looking fine with text, but when I inserted the image to replace the list text I now get a little icon instead of the picture when I look in IE. It works fine in firefox though, any ideas?

(edit-it happens to all my pictures in IE7)

Also how do I get the second menu that drops down to come out on the right instead of left, I had a play with the code but was unsuccessful.

Thanks...

HTML:

<div>

<ul class="nav">

<h3>
<li><img src="home.jpg" /> </li>
<li><img src="about me.jpg" /> </li>

<li><img src="portraits.jpg" />
<ul>
<li>Special Occasion</li>
<li>Family</li>
<li>Senior</li>
<li>Couple</li>
</ul>
</li>
<li><img src="pets.jpg" />
<ul>
<li>another navigation list item</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>

</ul>
</div>

and the following CSS

/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
}

ul.nav{
width: 20ex;
/*Optional, to make the navigation bar positions on the left of the content*/
float: center;
margin-right: 1em;
}

ul.nav>li{
margin: 0;
padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
width: 20ex;
left: 20ex;
margin-top: -1.4em;
margin-left: 9px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}

/*** Menu styles (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
background-image: url(1.jpg);
color: #000;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #484848;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

.nav ul{
border: 1px solid #000;
}

.nav a{
text-decoration: none;
}

h3 {color: #000;}

If that is your code, then you need to get rid of the <h3> inside the list - the code you're showing put the list INSIDE the <h3>, which is unclosed, but that's invalid. You can put an <hx> tag inside a list, but it has to be inside the <li>, like this:

<li><h3>xxxx</h3></li>

There is no such thing as float:center

Is the link in your sig the site you're working on ?