Menu problem (space between images)

HTML & CSS
1

Dear All,
I have a problem in a menu it is not display correctly in IE7 it is doing a space between the images
Please find the HTML & CSS below and a link to see it online
PS. In IE8 & Mozilla work perfectly

Links
Web page: http://www.amazehost.com/forum/Menu/menu.html
Zip files: http://www.amazehost.com/forum/Menu.rar

Regards,
Ziffa27


<html>
<head>
<title>Menu</title>
<link href="style_ie7.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#"><img src="menu_01.jpg" width="200" height="52" border="0" /></a></li>
    <li></li>
    <li><a href="#"><img src="menu_03.jpg" width="200" height="52" border="0" /></a></li>
    <li><a href="#"><img src="menu_04.jpg" width="200" height="52" border="0" /></a></li>
    <li></li>
    <li><a href="#"><img src="menu_06.jpg" width="200" height="52" border="0" /></a></li>
  </ul>
</div>
</body>
</html>



html, body, menu {
	margin: 0;
	padding: 0;
}

body {
	background: #FF0000;
	color: #CCCCCC;
	font-family: Calibri, Myriad Pro, Franklin Gothic Medium, Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: justify;
	line-height: 19px;
}

#menu {
	margin-left: 30px;
	width: 200px;
	float: left;
}

#menu ul {
	padding: 0;
	margin: 0;
}

#menu li {
	display: inline;
}
2

I don’t have IE7 at the moment, but try this (I made a few CSS changes, not all necessary for the issue, but vertical-align:bottom on the image is the main thing needed):

html, body, [COLOR="Red"]#[/COLOR]menu {
	margin: 0;
	padding: 0;
}

body {
	background: #FF0000;
	color: #CCCCCC;
	font-family: Calibri, Myriad Pro, Franklin Gothic Medium, Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: justify;
	line-height: 19px;
}

#menu {
	margin-left: 30px;
	width: 200px;
	float: left;
}

#menu ul {
	padding: 0;
	margin: 0;
	[COLOR="Red"]list-style: none;[/COLOR]
}

#menu li [COLOR="Red"]img {
	vertical-align:bottom;[/COLOR]
}

Also, unless there’s a good reason for them, remove the empty <li>s:

<ul>
    <li><a href="#"><img src="menu_01.jpg" width="200" height="52" border="0" /></a></li>
    <li><a href="#"><img src="menu_03.jpg" width="200" height="52" border="0" /></a></li>
    <li><a href="#"><img src="menu_04.jpg" width="200" height="52" border="0" /></a></li>
    <li><a href="#"><img src="menu_06.jpg" width="200" height="52" border="0" /></a></li>
  </ul>
3

Dear ralph.m,
Thanks a lot and it worked :slight_smile:
Regards,

Ziffa27