Jump to content

Problem with unneeded spaces at list


Genert
 Share

Recommended Posts

Hello,I'm having an unusual problem with CSS. Here is a picture of a problem.problem.PNG 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 ^^

Edited by Genert
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :happy0046: This can be closed.

Edited by Genert
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...