CODEWITHSUNDEEP
htmlcss
Alberto
Alberto

Reputation: 399

Undesired space between list elements

The problem is over, I'm now going on with my website development, thanks.

The problem is on my website (I'm viewing it in Chrome): http://albertorestifo.com/

Between the elements of the navigation menu, there is a undesired space between the border and the next list element. It is visible when you hover on "gallery".

Here the HTML:

<nav>
            <ul>
                <li class='active'><a href="/">Home</a></li>
                <li><a href="/gallery/">Gallery</a></li>
                <li><a href="/about/">About Me</a></li>
                <li><a href="/contact/">Contact Me</a></li>
            </ul>
        </nav>

And here the CSS:

header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; }

header nav ul li {
  display: inline-block;
  line-height: 150px;

  padding: 0 20px;
  border-left: 1px solid #2d2d2d;
}
  header nav ul li:last-child { border-right: 1px solid #2d2d2d; }

  header nav ul li:hover, header nav ul li.active {
    background-color: #0072bc;
  }

  header nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
  }

Plus a small reset:

ul, ul li { margin: 0; padding: 0; }

I point out that I'm using Normalize.css, so every browser should display it.

I have no idea how to fix this, it never happened to me in the past!

demo:http://jsfiddle.net/EaAvx/

Upvotes: 1

Views: 125

Answers (5)

user2836265
user2836265

Reputation: 91

You can remove all whitespaces, compress codes and that works pretty well. Even cross browser.

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

It is because your list-items are inline-block elements.

Use any of the following solutions:

Change HTML to this: removing the white space in your markup.. 

<li class='active'><a href="/">Home</a></li><li><a href="/gallery/">Gallery</a></li><li><a href="/about/">About Me</a></li><li><a href="/contact/">Contact Me</a></li>

or.. 

<li class='active'><a href="/">Home</a></li><!--
--><li><a href="/gallery/">Gallery</a></li><!--
--><li><a href="/about/">About Me</a></li><!--
--><li><a href="/contact/">Contact Me</a></li>

As an alternative to removing the white space, you can always add a negative margin:

header nav ul li {
    margin:0px -2px;
}

or set the font-size to 0px on the parent..

Note, there is still a 1px gap because of this in your CSS:

border-left: 1px solid #2d2d2d;

... if you wanted to, you could avoid all of these 'hacks' and just change the element from inline-block to a floating element.

Upvotes: 3

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

use all selector to set padding and margin then use box-sizing

*, *:after, *:before  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0;
    margin:0;
}

Demo: http://jsfiddle.net/EaAvx/2/

Upvotes: 0

Milan and Friends
Milan and Friends

Reputation: 5610

You could fix that like this, here's a FIDDLE

header nav ul li {
  float: left;
  list-style: none;
  line-height: 150px;
  padding: 0 20px;
  border-left: 1px solid #2d2d2d;
}

Upvotes: 0

absqueued
absqueued

Reputation: 3063

That's because you have li as inline-block.

Set this:

nav > ul {
   font-size:0;
}

nav li {
   font-size:16px;
}

And done.

Upvotes: 2

Related Questions