PDA

Click to See Complete Forum and Search --> : A ccs html problem when using <ul> as menu navigation



adrianmak
03-08-2007, 10:19 PM
This is my html 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


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/n16/adrianmak/Snap1-19.jpg

I have set all stuffs related to element spacing and positioning like margin , padding to zero px.

ihoss.com
03-09-2007, 05:18 AM
Its because you have a newline character at the end of each line inside the <ul>. HTML interprets this as a space. Put everything on a single line, and there should be no spaces. Alternatively you can make the <li>'s float to the left.