Applied the FontAwesome icon "caret-right" to three li-/a-tags in my menu, to indicate the presence of submenus. The icons shall be right-aligned. My code works in Chrome and Edge, but doesn't in Firefox. Read about a possible problem with loading the FA files via CDN, so I switched to loading them from my webspace, with no success. I can see the icons at the end of the menu items, but they are cut off and pushed down. Here's my HTML and CSS:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/960.css" />
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
<title>Titel</title>
<style type="text/css">
body, select, input, textarea, button {
font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 1.5em;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav > ul > li {
float: left;
}
nav > ul > li > ul {
display: none;
}
nav > ul a {
display: block;
white-space: nowrap;
padding: 10px;
background: #444;
color: #fff;
text-decoration: none;
}
nav > ul > li > a:after {
content: "\f0d7";
font-family: 'FontAwesome';
padding-left: 0.35em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
nav > ul > li > ul > li {
position: relative;
}
nav > ul > li > ul > li > a:after {
float: right;
content: "\f0da";
font-family: 'FontAwesome';
padding-left: 1em
}
nav > ul li > a:only-child:after {
content: "";
}
nav > ul > li > ul > li > ul {
display: none;
}
nav > ul > li > ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
</style>
</head>
<body>
<nav>
<ul class="grid_12">
<li><a href="#">Home</a></li>
<li><a href="./mitglieder/mitglieder.php">Mitglieder</a></li>
<li><a href="#">Clubturniere</a>
<ul>
<li><a href="./cm/cm.php">Clubmeisterschaft</a></li>
<li><a href="./mobl/mobl_gw.php">Monats-Blitzturniere</a></li>
</ul>
</li>
<li><a href="./mannschaft/mannschaften.php">Mannschaften</a>
<ul>
<li><a href="#">Bayerische Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m1.php">1. Mannschaft</a></li>
<li><a href="./mannschaft/m2.php">2. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Münchner Meisterschaft</a>
<ul>
<li><a href="./mannschaft/m3.php">3. Mannschaft</a></li>
<li><a href="./mannschaft/m4.php">4. Mannschaft</a></li>
<li><a href="./mannschaft/m5.php">5. Mannschaft</a></li>
<li><a href="./mannschaft/m6.php">6. Mannschaft</a></li>
<li><a href="./mannschaft/m7.php">7. Mannschaft</a></li>
</ul>
</li>
<li><a href="#">Senioren</a>
<ul>
<li><a href="./mannschaft/sen_m1.php">Senioren 1</a></li>
<li><a href="./mannschaft/sen_m2.php">Senioren 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="./termine/termine.php">Termine</a></li>
<li><a href="#">Schachaufgaben</a>
<ul>
<li><a href="./aufgaben/schachaufgaben_1.php">Nummer 1 – 18</a></li>
<li><a href="./aufgaben/schachaufgaben_2.php">Nummer 19 – 36</a></li>
</ul>
</li>
<li><a href="./archiv/archiv.php">Archiv</a></li>
<li><a href="./kontakt/kontakt.php">Kontakt</a></li>
</ul>
</nav>
</body>
</html>The link to the file is http://msc1836.bplaced.net/menutest.html OS is Win-10, Firefox version is 50.1.0.
Can anybody help? Thx, Mike
Remove
white-spaceformnav > ul aand it's working properly