CODEWITHSUNDEEP
htmlcsshtml-listsborder
M.Svrcek
M.Svrcek

Reputation: 5645

Anonymous space between two floated li elements

I'm creating header of one aplication nad I found strange problem, which never happentd to me before. The problem is, that i have two list inside header, one floated to left, one to right and between all li elements there are two types of border. That's ok, but there's creating space between them out of nowhere? Or at least, I can't find what is creating the space

Can someone tell me where's space created?

Here is jsFiddle: jsFiddle link

Or direct-input:

HTML:

<header id="header">

<ul class="left">
    <li class="title">jedna</li>
    <li class="new-task">dva</li>
    <li class="new-comment">NC</li>
</ul>

<ul class="right">
    <li class="logged">jedna  </li>
    <li class="logout"><a href="#">dva</a></li>
</ul>

CSS:

header
{
    position: relative;
    top: 0px;
    min-height: 35px;
    padding: 0px;
    margin: 0px;
    background-color: #efefef;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
    background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
    background: -moz-linear-gradient(top, #efefef, #bbbbbb);
    background: -ms-linear-gradient(top, #efefef, #bbbbbb);
    background: -o-linear-gradient(top, #efefef, #bbbbbb);


}

header ul
{
    margin: 0px;
    padding: 0px;
    line-height: 35px;
    list-style-type: none;
}

header ul li
{
    margin: 0px;
    display: inline;
    padding: 5px 10px;
    border-left: 1px solid #efefef;
    border-right: 1px solid #bbbbbb;
}

header ul li:first-of-type
{
    border-left: none;
    padding-left: 20px;
}

header ul li:last-of-type
{
    border-right: none;
    padding-right: 20px;
}

header ul.left
{
    float: left;
}

header ul.right
{
    float:right;
}

EDIT:

This space:

space

Upvotes: 1

Views: 1499

Answers (5)

Milan and Friends
Milan and Friends

Reputation: 5610

Just add float: left; and reduce padding, here's a FIDDLE

header ul li {
  display: inline;
  float: left;
  padding: 0 10px;
  border-left: 1px solid #efefef;
  border-right: 1px solid #bbbbbb;
}

*Note: Horizontal space with width of about 4px is always added on inline & inline-block elements and to fix that you must float them or write HTML code in line for that elements.

Upvotes: 0

Josh Powell
Josh Powell

Reputation: 6297

This is being caused by the display: inline;.

What is happening is the white space between the lis is being considered as a character.

To prevent this add font-size: 0; to the parent ul and then add the font-size: 16px; to the lis.

header ul {
  margin: 0px;
  padding: 0px;
  line-height: 35px;
  list-style-type: none;
  font-size: 0;
}

header ul li {
  margin: 0px;
  display: inline;
  padding: 5px 10px;
  border-left: 1px solid #efefef;
  border-right: 1px solid #bbbbbb;
  font-size: 16px;
}

JSFIDDLE

Here is a good article on what options you can use.

Upvotes: 0

RononDex
RononDex

Reputation: 4183

Adding the following CSS code fixed it for me:

header ul.left li {
    display:block;
    margin: 0;
    float: left;
    line-height: 25px;
}

Upvotes: 0

Graham Langdon
Graham Langdon

Reputation: 277

Your li's are set to display: inline, so your browser is putting a space between each li just like it would between words. You can counter this default behavior in a few ways. You can float instead of using display: inline, you can put all your li's on one line without spaces, or you can add a negative margin to pull the li's together. This article explains your options better than I could:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 4

Xarus
Xarus

Reputation: 7029

Set ul li to float:left; and set the line-height to 25 instead of 35 in header ul

Upvotes: 0

Related Questions