Problem with unneeded spaces at list

[Genert]

Hello,I'm having an unusual problem with CSS. Here is a picture of a problem. I pointed the "arrows" to these unneeded spaces,there should be just an border together,not having a space. Here is a code:

.h-wrapper ul {	 width: 97%;  height: 60px;  position: relative;  float: left;  left:18px;  background-color: rgba(50,50,50,0.98);  -webkit-border-radius: 0 0 3px 3px;  -moz-border-radius: 0 0 3px 3px;  -khtml-border-radius: 0 0 3px 3px;  border-radius: 0 0 3px 3px;  box-shadow: 0 0 10px rgba(201,150,48,0.75);  -moz-box-shadow: 0 0 10px rgba(201,150,48,0.75);  -webkit-box-shadow: 0 0 10px rgba(201,150,48,0.75);} .h-wrapper ul li {	 list-style-type: none;  height: 50px;  width: 100px;  line-height:60px;  float: left;  text-align: center;  border-right: 1px rgb(201, 150, 48 ) solid;  border-left: 1px rgb(201,150,48) solid;  padding: 5px 0; /* Fixes border cut */} .h-wrapper ul li:hover {	 background-color:rgba(201,150,48,0.75);}

I tried margin,padding,everything,didn't work And the problem isn't at HTML,everything is OK there ^^

[dsonesuk]

usually this happens if you have ul li like this without float, but using display: inline-block;

<div class="h-wrapper"><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></div>

because the li element are stacked by using a' \n'(newline), each newline is treated as a space, but using a float as you have fixes this. So saying the problem is not the html, is not necessarily true, both are required to determine if it is indeed the case.

[Genert]

Yes,I got what you said,used it and didn't get any result. But then I looked at reset.css what I wrote and were using. And I totally forgot what I had written there:

ul {list-style-type:none;padding:0;margin:0 0 1.5em 0;}ul li {  vertical-align:top;  padding:0 0 .5em 0;  margin:0 0 0 10px;  list-style-type:square;  }  ul ul {   margin:.5em 0 -.5em 1em;   padding:0;   }

That caused these spaces,after removing it and tweaking the padding,I got it right! Thanks dsonesuk for pointing at HTML,otherwise I could't find my way to reset.css This can be closed.

[dsonesuk]

Just to point out! you will need to reset text-indent to zero (text-indent:0); for the menus ul,li or you will find some browsers position the menu about 30 -40px pixel away from left edge.