Space between list, space on left side of the ul. How to remove this?


Tags: html,css,list,margin,space

Problem :

I don't want spaces between my list and there is also a space on left side. And please tell me how to have simple scrolling effect with pure css. And please tell me a source from where i can learn about the compatibility issues between css properties (if there is any)

body {
  margin: 0;
}
#nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bolder;
}
#nav ul {
  margin: 0;
}
#nav li {
  display: inline-block;
  line-height: 3em;
  width: auto;
  padding: 0 1em;
}
a {
  color: inherit;
  text-decoration: none;
}
#menu_advanced_search:hover {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_advanced_search {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_explore:hover {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_explore {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_forum:hover {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_forum {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_report_a_bug:hover {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_report_a_bug {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_feedback:hover {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_feedback {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_login_signup:hover {
  color: #FFFFFF;
  background-color: #000000;
}
#menu_login_signup {
  color: #FFFFFF;
  background-color: #000000;
}
#main {
  background-color: #FFFFFF;
  height: 100%;
  left: 0;
  right: 0;
}
#advanced_search {
  background-color: #0066FF;
  height: 100%;
  left: 0;
  right: 0;
}
#explore {
  background-color: #FFFF00;
  height: 100%;
  left: 0;
  right: 0;
}
#forum {
  background-color: #009900;
  height: 100%;
  left: 0;
  right: 0;
}
#report_a_bug {
  background-color: #FF0000;
  height: 100%;
  left: 0;
  right: 0;
}
#feedback {
  background-color: #CC0099;
  height: 100%;
  left: 0;
  right: 0;
}
#login_signup {
  background-color: #000000;
  height: 100%;
  left: 0;
  right: 0;
}
<html>

<head>
  <title>CARZPEDIA</title>
</head>

<body>
  <div id="nav">
    <ul>
      <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a>
      </li>
      <li id="menu_explore"><a href="#explore">EXPLORE</a>
      </li>
      <li id="menu_forum"><a href="#forum">FORUM</a>
      </li>
      <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a>
      </li>
      <li id="menu_feedback"><a href="#feedback">FEEDBACK</a>
      </li>
      <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a>
      </li>
    </ul>
  </div>
  <div id="main" class="scrolleffect">
  </div>
  <div id="advanced_search" class="scrolleffect">
  </div>
  <div id="explore" class="scrolleffect">
  </div>
  <div id="forum" class="scrolleffect">
  </div>
  <div id="report_a_bug" class="scrolleffect">
  </div>
  <div id="feedback" class="scrolleffect">
  </div>
  <div id="login_signup">
  </div>
</body>

</html>



Solution :

You could achieve this by doing the following:

#nav ul {
    margin: 0;
    padding-left: 0; /* add padding-left: 0; to remove the space on left side of the ul */
    font-size: 0; /* add font-size: 0; to remove the white space between inline-block elements */
}
#nav li {
    display: inline-block;
    line-height: 3em;
    width: auto;
    padding: 0 1em;
    font-size: 16px; /* add font-size: 16px; to reset the font-size to li (i.e 1em = 16px) */
}

body {
  margin: 0;
}
#nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bolder;
}
#nav ul {
  margin: 0;
  padding-left: 0;
  font-size: 0;
}
#nav li {
  display: inline-block;
  line-height: 3em;
  width: auto;
  padding: 0 1em;
  font-size: 16px;
}
a {
  color: inherit;
  text-decoration: none;
}
#menu_advanced_search:hover {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_advanced_search {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_explore:hover {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_explore {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_forum:hover {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_forum {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_report_a_bug:hover {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_report_a_bug {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_feedback:hover {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_feedback {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_login_signup:hover {
  color: #FFFFFF;
  background-color: #000000;
}
#menu_login_signup {
  color: #FFFFFF;
  background-color: #000000;
}
#main {
  background-color: #FFFFFF;
  height: 100%;
  left: 0;
  right: 0;
}
#advanced_search {
  background-color: #0066FF;
  height: 100%;
  left: 0;
  right: 0;
}
#explore {
  background-color: #FFFF00;
  height: 100%;
  left: 0;
  right: 0;
}
#forum {
  background-color: #009900;
  height: 100%;
  left: 0;
  right: 0;
}
#report_a_bug {
  background-color: #FF0000;
  height: 100%;
  left: 0;
  right: 0;
}
#feedback {
  background-color: #CC0099;
  height: 100%;
  left: 0;
  right: 0;
}
#login_signup {
  background-color: #000000;
  height: 100%;
  left: 0;
  right: 0;
}
<html>

<head>
  <title>CARZPEDIA</title>
</head>

<body>
  <div id="nav">
    <ul>
      <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a>
      </li>
      <li id="menu_explore"><a href="#explore">EXPLORE</a>
      </li>
      <li id="menu_forum"><a href="#forum">FORUM</a>
      </li>
      <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a>
      </li>
      <li id="menu_feedback"><a href="#feedback">FEEDBACK</a>
      </li>
      <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a>
      </li>
    </ul>
  </div>
  <div id="main" class="scrolleffect">
  </div>
  <div id="advanced_search" class="scrolleffect">
  </div>
  <div id="explore" class="scrolleffect">
  </div>
  <div id="forum" class="scrolleffect">
  </div>
  <div id="report_a_bug" class="scrolleffect">
  </div>
  <div id="feedback" class="scrolleffect">
  </div>
  <div id="login_signup">
  </div>
</body>

</html>


    CSS Howto..

    CSS: How to override a class style with an enclosing div

    How can I add some css to center certain divs if they are using the same css style? [duplicate]

    How to attach an element on the dynamically created div

    How to remove the “Facebook social plugin” text?

    Sitefinity 5.3: How do I order my CSS?

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How do you position CSS elements directly under each other?

    Handle text as elements, how to hide with CSS?

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    How to float a
    echoed in the footer over a
    located elsewhere (PHP/jQuery/HTML/CSS)

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How to create CSS3 bounce effect

    How to add hover effect to menu using jQuery

    How to reduce space between two words vertically in css/html

    HTML+CSS: How to add shadow (as image) to image?

    How to make arc-in animation on a website - CSS or JavaScript?

    Hovering over item in WordPress list of pages shows Featured Image

    How to make CSS scroll panel for custom purposes?

    How find all elements with a specific css property in a div and add a class to div

    How to Flip Div's in Randomly

    CSS: How to create colsgroup like semantic-ui way

    how to size the silverlight object to available space

    how to set a path to the static files which is surver independnet

    How to animate through stacked images Javascript

    How to center arrow on post carousel

    How to write bootstrap media queries

    Add background to first letter of a row of text. How?

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to stack smaller text in CSS?