CODEWITHSUNDEEP
htmlcsshtml-lists
user499054
user499054

Reputation:

Weird margin in a list

I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.

This is the only affecting css:

#header ul
{
  display: inline;
}
#header ul li
{
  list-style-type: none;
  background: #000;
  display: inline;
  margin: 0;
  padding: 0; 
}
#header ul li a
{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  text-align: center;
}

And this is the HTML:

  <div id="header">
    <ul id="toplinks">
      <li><a href="#">Hello</a></li>
      <li><a href="#">Herp</a></li>
      <li><a href="#">Derp</a></li>
    </ul>
  </div>

screenshot As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...

Upvotes: 0

Views: 914

Answers (3)

zzzzBov
zzzzBov

Reputation: 179284

That's no moon...i mean...margin.

What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.

inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.

Edit to add suggestion:

If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"

Instead of:

<div id="header">
 <ul id="toplinks">
  <li><a href="#">Hello</a></li>
  <li><a href="#">Herp</a></li>
 <li><a href="#">Derp</a></li>
</ul>

Use:

<div id="header"
  ><ul id="toplinks"
    ><li><a href="#">Hello</a></li
    ><li><a href="#">Herp</a></li
    ><li><a href="#">Derp</a></li
  ></ul
></div>

White space contained by elements is preserved, but white space within elements is not.

Upvotes: 4

user562113
user562113

Reputation:

change your CSS to 

#header ul
{
  display: inline;
}
#header ul li
{
  float:left;
  background: #000;
  margin-left: 1px;;
  padding: 0; 
}
#header ul li a
{
  color: #fff;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  text-align: center;
}

Upvotes: 1

Blender
Blender

Reputation: 298582

Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.

But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:

border-style: none;

If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.

Upvotes: 1

Related Questions