CODEWITHSUNDEEP
firefoxgoogle-chromenestedhtml-listsspacing
Scroot
Scroot

Reputation: 27

Extra Space in Nested ul in Firefox, but not Chrome

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.

Upvotes: 0

Views: 1715

Answers (1)

chinabuffet
chinabuffet

Reputation: 5578

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

Upvotes: 6

Related Questions