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

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> </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.

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>

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...

Answer 3

All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?
Try:
li { margin: 0; padding: 0 }

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,...).