HTML/CSS - Remove spaces from line breaks in code for LI

Question

Hey, Is there a way to get browsers to ignore line breaks in the source?

<div id="navbar">
    <div id="navbar-container">
        <ul>
            <li>HOME</li>
            <li>TUTORIALS</li>
            <li>BLOG</li>
            <li>FORUMS</li>
            <li>LINKS</li>
            <li>&nbsp;</li>
        </ul>
    </div>
</div>

#navbar {
    background:#FFF;
    width:940px;
    margin:auto;
    border-radius: 10px 10px;
    -webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
    margin:auto;
}
#navbar-container ul {
    list-style:none;
    text-align:center;
    display:block;
    width:auto;
    padding:0;
    margin:0;
}
#navbar-container li{
    list-style:none;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    padding:0 7px 0 10px;
    margin:0;
    white-space:nowrap;
}
#navbar-container li:hover{
    color:#FFF;
    background:#000;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    margin:0;
    padding:0 7px 0 10px;
}

It's placing a small space between each LI, I've set it up so then line up horizontally, i could just remove the line breaks in the source, but id prefer not to.

Fenestration

Answer 1

You can float them (either left or right), or you can comment-out the spaces:

<ul>
  <li>...</li><!--
  --><li>...</li>
</ul>

Or simply leave the tags open 'til the next line.

<ul>
  <li>...</li
  ><li>...</li
  ><li>...</li>
</ul>

Sternum

Agh, beat me to the open tag solution. I haven't ever seen a problem in any browser besides IE. – Maureenmaureene

the leaving the tags open solution worked, ill give you the answer as you gave the solution first. thanks! – Fenestration

messing with the mark up is WRONG - make sure you use the 'float' method! – Flori

Answer 2

IE seems to do that as a hold-over from the days when list items did not have closing tags. A common way around that is to put the closing > on the next line, i.e.

<ul>
        <li>HOME</li
        ><li>TUTORIALS</li
        ><li>BLOG</li
        >etc...

Maureenmaureene

Answer 3

All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?

Try:

li { margin: 0; padding: 0 }

Romero

it's on all of them, ive already set the margin to 0 and the padding on each side is set to give the text some space, ill update the question with CSS – Fenestration

They don't 'ignore' white-space, they simply collapse it down to a single space. Which is expressed as a break between the lis when displayed in-line. If they're floated, then it's ignored. – Sternum

Then maybe a better approach would be to somehow get them to treat it as a space rather than a br... I know that would have made my life a lot easier a few times if I could have figured out how. – Mccune

Answer 4

I was wondering the same thing and what worked for me was:

li { display: table-cell; }

All breaks are ignored and now my menu buttons are right next to each other.

You can see a live example here on my music site: http://www.yanike.tk

I used a CSS Sprite on my UL LI for my navigation menu (home, media,...).

Latisha