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.
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>
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With