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.
The space is happening because of the “display: inline;” on the .navigation class. You could try floating it right maybe.