0

I am attempting to make a vertical sidebar for a website. There are several main items in the ul, and if those items have subcategories, then a new ul gets nested within the main ul underneath its parent li (this is more obvious from the code below). In the latest version of Chrome this displays as it should, yet in the latest Firefox there is a space between the parent li and its corresponding subitems in the nested ul. Any thoughts on the cause?

Here is the basic html:

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
        </script>
        <style>
        </style>
        <link rel="stylesheet" href="style.css" type="text/css">
        </head>
<body>
 <ul class="navigation">
   <li>ITEM1</li>
   <li>ITEM2</li>
     <ul class="navigation subitem">
       <li>subitem1</li>
       <li>subitem2</li>
       <li>subitem3</li>
     </ul>
   <li>ITEM3</li>
  </ul>
</body>
</html>

Here is the corresponding CSS:

.navigation {
    display: inline;
    width: 150px;
    margin-top: 5px;
    padding-left: 15px;
    text-align: right;
    vertical-align: middle;
}

.subitem {
    margin: 0px;
    vertical-align: top;
    top: 0px;

}

.navigation li {
    display: block;
    font-family: 'Oxygen';
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-top: 15px;
}

.subitem li {
    font-size: 0.6em;
    margin-top: 3px;
    color: rgba(0, 0, 0, 0.9);

}

If you load these in both Chrome and Firefox you should be able to see the difference.

Scroot
  • 27
  • 2
  • 6

1 Answers1

6

The space is happening because of the "display: inline;" on the .navigation class. You could try floating it right maybe.

chinabuffet
  • 5,278
  • 9
  • 40
  • 64
  • I can't upvote you yet, but that did it. Thanks. I suppose FF and Webkit have different ways of rendering inline elements? – Scroot Sep 19 '12 at 16:49
  • WebKit's handling of all sorts of interesting aspects of inline layout is pretty buggy.... – Boris Zbarsky Sep 21 '12 at 05:25
  • 1
    This is invalid HTML5. UL element cannot have UL as a child, it can only have LI. For nested lists, the UL needs to be within the LI tag – Pierluc SS Oct 25 '12 at 14:53