CODEWITHSUNDEEP
htmlcss
JaPerk14
JaPerk14

Reputation: 1664

Unwanted margin or padding between list items

I have a small design problem in my css, and I'd like to know if someone could check it out for me. The design problem is in the rollover effect of my horizontal navigation. There seems to be some sort of added margin or padding, but I'm having trouble finding the problem in the css. I will paste the code I'm using below, so you can see for yourself. You won't be able to see the problem until you rollover the navigation list items.

HTML:

    <div class="Horiznav">
  <ul>
    <li id="active"><a href="#">Link #1</a></li>
    <li><a href="#">Link #2</a></li>
    <li><a href="#">Link #3</a></li>
    <li><a href="#">Link #4</a></li>
    <li><a href="#">Link #5</a></li>
  </ul>
</div>

CSS:

.Horiznav {
  background: #1F00CA;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}
.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
}
.Horiznav ul li {
  display: inline;
}
.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
.Horiznav ul li a:hover {
  background: #16008D;
  color: #fff;
}
#active a { border-left: 1px solid #fff; }

Upvotes: 2

Views: 4173

Answers (2)

MrWhite
MrWhite

Reputation: 46012

Since you have the li elements display:inline the problem (extra gap to the left of each menu/list item) is as a result of the white-space in the HTML markup. You can either:

A - Get rid of the white-space in the HTML:

<ul><li id="active"><a href="#">Link #1</a></li><li><a href="#">Link #2</a></li><li><a href="#">Link #3</a></li><li><a href="#">Link #4</a></li><li><a href="#">Link #5</a></li></ul>

B - Or, use the font-size:0 trick:

Set font-size:0 on the ul container and override this with font-size:whatever on the li child elements:

.Horiznav ul {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  text-Align: center;
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
  font-size: 0;       /* #1 */
}
.Horiznav ul li {
  display: inline;
  font-size: 16px;    /* #2 */
}

http://jsfiddle.net/EZSvC/4/

C - Or, use a floated layout:

Float the li elements (they are then implicitly displayed as blocks) and clear the floats on the ul container with overflow:hidden. However, you will need to give the container width and apply margin:0 auto if you want it centred.

http://jsfiddle.net/EZSvC/5/

Upvotes: 5

Roy Sonasish
Roy Sonasish

Reputation: 4609

just add "display:inline-block" in "Horiznav ul li a" in you css

.Horiznav ul li a {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
  display:inline-block;
}

here is the jsFiddle file

hope this will solve your problem.

Upvotes: 0

Related Questions