New line (in the code) after <li> element breaking layout
- by BT643
Weirdly, I've never come across this issue before, but I've just started making a site and the top navigation isn't playing nicely.
I want a small amount of white space between each menu item, but when I have new lines between my <li> elements and my <a> elements in my IDE (Netbeans), the white space disappears, yet it looks fine if I have <li><a></a></li> all on the same line. I was always under the impression html ignored white space in the code.
I've checked for any weird characters causing problems in other text editors and can't find anything.
Here's the code...
Like this the menu looks correct but code looks ugly (I know it looks fine when it's this simple, but I'm going be adding more complexity in which makes it look awful all on one line):
<ul id="menu">
<li><a href="#">About</a></li>
<li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li>
<li><a href="<?php echo site_url("stats"); ?>">Stats</a></li>
<li><a href="#">Stats</a></li>
</ul>
Like this the menu looks wrong but code looks fine:
<ul id="menu">
<li>
<a href="#">About</a>
</li>
<li class="active">
<a href="<?php echo site_url("tracklist"); ?>">Track List</a>
</li>
<li>
<a href="<?php echo site_url("stats"); ?>">Stats</a>
</li>
<li>
<a href="#">Stats</a>
</li>
</ul>
Here's the css:
#menu {
float: right;
}
#menu li {
display: inline-block;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
I'm sure it's something simple I'm doing wrong... but can someone shed some light on this for me?
Sorry for the lengthy post (my first on stackoverflow).
