tags:

views:

151

answers:

3
+3  Q: 

New line (in the code) after <li> element breaking layout

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>

Produces: correct

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>

Produces: wrong

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

Edit - Full CSS and HTML:

body {
   /* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   /* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

#container{
    margin: 0 auto;
    width: 800px;
}

#content {
    margin-top: 50px;
}

#header {
    background-image: url("../images/absolute_radio_logo.png");
    border-bottom: solid 1px #777777;
    background-repeat: no-repeat;
    width: 800px;
    height: 86px;
    padding-bottom: 15px;
}

#menu {
    float: right;
}

#menu li {
    display: inline;
    padding: 5px;
    background-color: #932996;
    border-bottom: solid 1px #932996;
}

#menu li:hover {
    border-bottom: solid 3px #FF0000;
}

#menu li.active {
    background-color: #58065e;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <title>Radio - Statistics</title>
        <link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
    </head>
    <body>
        <div id="container">

            <div id="header">
                <ul id="menu">
                <li>
                    <a href="#">About</a>
                </li>
                <li class="active">
                    <a href="http://localhost/tracklist"&gt;Track List</a>
                </li>

                <li>
                    <a href="http://localhost/stats"&gt;Stats&lt;/a&gt;
                </li>
                <li>
                    <a href="#">Stats</a>
                </li>
    </ul>
        </div>

        <div id="content">
            <!-- content -->
                   Elapsed Time: 0.0033 - Memory Used: 0.4MB
        </div>
    </div>
    </body>
</html>
A: 

Just as a guess try setting the line-height for the li & a tags to 1em or even 0

#menu li, #menu a {
  line-height: 1em;
}
Ben Rowe  2010-06-17 23:00:38
That didn't seem to do anything unfortunately :(
BT643  2010-06-17 23:04:18
+2  A: 

It seems to be totally fine with the CSS you supplied, so I'm guessing there must be some other rule affecting your links. Could you please supply us with a live preview or the full stylesheet?

Edit:

Seems to be an issue with how "display: inline" collapses the elements contents, though I couldn't find any proof of that. Change

#menu li {
  display: inline;
}

to

#menu li {
  display: inline-block;
}

or add a margin to it:

#menu li {
  display: inline;
  margin-right: 5px;
}

To fix the alignment of the text, I'll go ahead and recommend you float the lis. Someone please correct me if this is a horrible idea. Add

#menu {
  overflow: hidden;
}

#menu li {
  float: left;
}

to your existing rules.

dhabersack  2010-06-17 23:38:32
I've added the full css and html. Could it really be a css issue if just removing lines from the html code fixes it?
BT643  2010-06-17 23:56:00
this should do it... see at http://jsfiddle.net/wvESc/
Bob Fincheimer  2010-06-18 00:02:41
Changing it to `display: inline-block;` worked, I'm still baffled that a new line in the html requires a css change though...
BT643  2010-06-18 00:27:21
Hmm, maybe this isn't the correct solution. IE7 doesn't support inline-block. There must be some way of doing this with `display: inline`. I'm sure I've seen it loads of times.
BT643  2010-06-18 00:45:27
As stated above: keep it at `display: inline` and add a margin.
dhabersack  2010-06-18 00:55:03
Adding a right margin almost does it... but you can see the link isn't in the centre: http://img121.imageshack.us/img121/66/screenshot20100618at015.png`text-align: center;` doesn't seem to work?I'm sure I've never had this much trouble creating a menu in my life before :p bizarre!
BT643  2010-06-18 01:03:05
Another shot of floats should solve that, see answer.
dhabersack  2010-06-18 01:10:12
3 hours later and I've got a working menu, yay! hahaThanks for your help =)
BT643  2010-06-18 02:32:38
A: 

Firstly, those two screenshots appear to be swapped around, the first has gaps between the links, caused by the white-space in the second code snippet.

This new white-space-collapse property may be able to help.

#menu li{white-space-collapse:discard}

via: http://safalra.com/web-design/html-and-css/white-space-property/

If that doesn't work, the next option is to set the <a> tags to block level elements and the <li> tags to inline.

#menu li{display:inline}
#menu li a{
  display:inline-block
  padding: 5px;
  background-color: #932996;
  border-bottom: solid 1px #932996;
}
#menu li a:hover{
  border-bottom: solid 3px #FF0000;
}
#menu li.active a {
  background-color: #58065e;
}
Phil  2010-06-18 00:02:00
The OP wants a gap between the links. The OP is saying that the gap doesn't appear in the second code snippet.
Waleed Al-Balooshi  2010-06-18 00:09:23
Yeah, I want the gap between. Putting the code on new lines is *removing* the white space (which I don't want).
BT643  2010-06-18 00:22:54
My apologies.#menu li{margin-right:5px}#menu li:last-child{margin-right:0}
Phil  2010-06-18 00:42:21
Adding a right margin almost does it... but you can see the link isn't in the centre: http://img121.imageshack.us/img121/66/screenshot20100618at015.png`text-align: center;` doesn't seem to work?I'm sure I've never had this much trouble creating a menu in my life before :p bizarre!
BT643  2010-06-18 01:00:25

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?