Genert Posted March 20, 2012 Share Posted March 20, 2012 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 ^^ Link to comment Share on other sites More sharing options...
dsonesuk Posted March 20, 2012 Share Posted March 20, 2012 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. Link to comment Share on other sites More sharing options...
Genert Posted March 21, 2012 Author Share Posted March 21, 2012 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 21, 2012 Share Posted March 21, 2012 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.