CODEWITHSUNDEEP
jqueryhtmlcss
Seb
Seb

Reputation: 525

unnecessary space on left side in nav

I have a space beetwin my nav link it about 2px and i cant remove it, is it anny css code that can do it?

When you hover over Downloads you can see the space on left side.

jsFIDDLE:http://jsfiddle.net/asRz3/1/

HTML:

<?php
?>
<!DOCTYPE>
<html>
<head> 
    <!--- START Styles --->
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="index.css" type="text/css" />
    <!--- END Styles --->
    <!--- START Scripts --->
    <script type="text/javascript" src"js/bootstrap.js"></script>
    <!--- END Scripts --->
</head>
<body>
    <!--- NavBar TOP --->
    <nav class="navbar navbar-custom" role="navigation">
            <a href="#" class="navbar-menu">F.A.Q's</a>
            <a href="#" class="navbar-menu2">Latest News</a>
            <a href="#" class="navbar-menu2">Downloads</a>
            <a href="#" class="navbar-menu2">Client Login</a>
            <a href="#" class="navbar-menu2">Contact Us</a>
    </nav>
</body>
</html>

CSS:

.navbar-custom {
    background-image: url('img/navbar-custom.png');
    height: 60px;
    border-radius: 0px;
    margin-bottom: 0px;
}
.left-nav-space {
    height: 70px;
    width: 200px;   
}
.navbar-menu {
    height: 59px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 900;
    font-size: 12px;
    position: relative;
    display:inline-block;
    color: #FFF;
    padding-top: 20px;
    list-style: none;
    padding-bottom: 24px;
    text-align: center; 
    border-right: 2px solid #282828;
    border-left: 2px solid #282828;
    text-decoration: none !important;
}
.navbar-menu:hover {
    background-image: url('img/navbar-menu-hover.png');
}
.navbar-menu2 {
    height: 59px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 900;   
    font-size: 12px;
    position: relative;
    display: inline;
    list-style: none;
    color: #FFF;
    padding-top: 20px;
    padding-bottom: 24px;
    text-align: center; 
    border-right: 2px solid #282828;
    text-decoration: none !important;
}
.navbar-menu2:hover {
    background-image: url('img/navbar-menu-hover.png');

}

Upvotes: 3

Views: 1828

Answers (5)

avrahamcool
avrahamcool

Reputation: 14094

I've updated you fiddle.

http://jsfiddle.net/avrahamcool/asRz3/8/

The thing is, you had whitespaces between your a in your html. (new line is treated as whitespace in inline-block element)

you can fix is in numerous ways.

  1. Remove all white spaces from your html (as I did in your fiddle)

  2. Apply 'font-size: 0;' to the container (and then reaplly font size for each element who tries to write somthing)

  3. Aplly negative margin (not recomended, because the space is deferrent between browsers)

Upvotes: 2

blinkomania
blinkomania

Reputation: 157

The gaps you see are caused by the newlines.

This is caused by inline <a></a> <a></a> spaces.

<nav class="navbar navbar-custom" role="navigation"><a href="#" class="navbar-menu">F.A.Q's</a><a href="#" class="navbar-menu2">Latest News</a><a href="#" class="navbar-menu2">Downloads</a><a href="#" class="navbar-menu2">Client Login</a><a href="#" class="navbar-menu2">Contact Us</a></nav>

Its ugly that way though. Use floats I guess?

http://jsfiddle.net/asRz3/12/

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

You are using display: inline-block; so use margin-left: -4px; for .navbar-menu2

Demo

.navbar-menu2 {
    margin-left: -4px;
    /* Other Styles */
}

Because when you use display: inline-block; it leaves a 4px white space between the elements, to get over this, you need to use margin-left: -4px;

Upvotes: 4

Paramasivan
Paramasivan

Reputation: 791

You can remove

padding-left: 10px;

from the css

Upvotes: -1

Alex
Alex

Reputation: 283

This is known issue when using inline-block. Remove spaces between li in html like so:

<ul>

<li> 
<a href="#">Link here.</a> 
</li><li> 
<a href="#">Link here.</a> 
</li><li> 
<a href="#">Link here.</a> 
</li>

</ul>

here is the jsfiddle and here is css tricks article you can read about this known problem

Upvotes: 0

Related Questions