06-17-2010, 04:47 PM
I dont know how to get rid of these spaces between each image.
Here's my html menu setup:
and here's the menu css:
Btw, menu_l and menu_r are just the left and right side images of the menu's background.
I dont know where those spaces came from. Thank you.
Here's my html menu setup:
Code:
<div id="menu_l"></div>
<div id="menu" align="center">
<ul>
<li><a href="#" ><img src="images/menu_home.png" border="0" /></a></li>
<li><a href="#" ><img src="images/menu_download.png" border="0"/></a></li>
<li><a href="#" ><img src="images/menu_register.png" border="0"/></a></li>
<li><a href="#" ><img src="images/menu_donate.png" border="0"/></a></li>
<li><a href="#" ><img src="images/menu_ranking.png" border="0"/></a></li>
<li><a href="#" ><img src="images/menu_forum.png" border="0"/></a></li>
<li><a href="#" ><img src="images/menu_chat.png" border="0"/></a></li>
</ul>
</div>
<div id="menu_r"></div>
and here's the menu css:
Code:
#menu_l {
float: left;
margin:10px 0 0 0;
padding: 0 0 0 0;
width: 17px;
height: 47px;
background-image: url(../images/menu_left.png);
background-repeat: no-repeat;
}
#menu_r {
float: right;
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 12px;
height: 47px;
background-image: url(../images/menu_right.png);
background-repeat: no-repeat;
}
#menu {
float: left;
margin: 10px 0 0 0;
width: 721px;
height: 47px;
background-image: url(../images/menu_r.png);
background-repeat: repeat-x;
padding: 0 0 0 0;
list-style: none;
display: inline;
}
Btw, menu_l and menu_r are just the left and right side images of the menu's background.
I dont know where those spaces came from. Thank you.