A ccs html problem when using <ul> as menu navigation
This is my html code
Code:
<html>
<head>
<title>XXX company</title>
<link rel='stylesheet' media="screen" type='text/css' href='style.css' />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1>XXX company</h1>
</div>
<div id="menu_bar">
<ul>
<li><a href="#"><img src="img/but_home.jpg"></a></li>
<li><a href="#"><img src="img/but_company.jpg"></a></li>
<li><a href="#"><img src="img/but_service.jpg"></a></li>
<li><a href="#"><img src="img/but_calculation.jpg"></a></li>
<li><a href="#"><img src="img/but_news.jpg"></a></li>
<li><a href="#"><img src="img/but_message.jpg"></a></li>
<li><a href="#"><img src="img/but_partner.jpg"></a></li>
<li><a href="#"><img src="img/but_contact.jpg"></a></li>
</ul></div>
/div>
</body>
</html>
This is the style.css
Code:
body {
text-align:center;
}
div {
margin:0;
padding:0;
outline:1px solid red;
}
#header {
height:174px;
padding:0px;
}
#logo {
height:140px;
background:url(img/top.jpg) no-repeat;
}
.spacer {
clear:left;
}
#menu_bar {
float:left;
height:34px;
padding:0px;
margin:0px;
text-align:left;
}
li img {
border:0px;
margin:0px;
padding:0px;
}
#lang_bar {
float:left;
text-align:left;
}
#menu_bar ul {
list-style:none;
margin:0px;
padding:0px;
}
#menu_bar li {
display:inline;
margin:0px;
padding:0px;
}
#menu_bar li a:link, #menu_bar li a:visited {
text-decoration:none;
font-weight:bold;
}
#lang_bar ul {
list-style:none;
margin:0px;
padding:0px;
}
#lang_bar li {
display:inline;
margin:0px;
padding:0px;
}
#content {
float:right;
width:711px;
text-align:left;
}
#left_col {
float:right;
width:291px;
height:400px;
background:url(img/left_col.jpg) no-repeat;
text-align:left;
}
#address {
text-align:left;
}
#container {
width:1024px;
margin:20px auto;
}
#footer {
clear:both;
height:56px;
background:url(img/footer.jpg) no-repeat;
text-align:left;
}
The result is there is a gap between each button image as show below
http://i108.photobucket.com/albums/n...k/Snap1-19.jpg
I have set all stuffs related to element spacing and positioning like margin , padding to zero px.
