Home/ Questions/Q 872117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:44:14+00:00

Weirdly, I’ve never come across this issue before, but I’ve just started making a

  • 0

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 http://img708.imageshack.us/img708/6628/screenshot20100618at000.png

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">
<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">Track List</a>
                </li>

                <li>
                    <a href="http://localhost/stats">Stats</a>
                </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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0