Jump to content
Genert

Problem with unneeded spaces at list

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...