margin in FireFox
Ik probeer een menu te maken, maar ik stuit op een nogal vervelend probleem dat zich alleen in FireFox afspeelt. Ik gebruik de volgende code:
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<nav id="navigation" role="navigation">
<ul class="navigation-top">
<li>
<a href="/" title="Home">
<span class="navigation-top-icon navigation-top-icon--home"></span>
<span class="navigation-top-text">Home</span>
</a>
</li>
</ul>
</nav>
<ul class="navigation-top">
<li>
<a href="/" title="Home">
<span class="navigation-top-icon navigation-top-icon--home"></span>
<span class="navigation-top-text">Home</span>
</a>
</li>
</ul>
</nav>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
nav#navigation
{
height: auto;
margin: 0px;
position: relative;
width: auto;
}
nav#navigation ul.navigation-top
{
height: auto;
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
position: relative;
width: auto;
}
nav#navigation ul.navigation-top::after
{
clear: both;
content: "";
display: block;
}
nav#navigation ul.navigation-top li
{
float: left;
height: auto;
position: relative;
width: auto;
}
{
height: auto;
margin: 0px;
position: relative;
width: auto;
}
nav#navigation ul.navigation-top
{
height: auto;
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
position: relative;
width: auto;
}
nav#navigation ul.navigation-top::after
{
clear: both;
content: "";
display: block;
}
nav#navigation ul.navigation-top li
{
float: left;
height: auto;
position: relative;
width: auto;
}
Het probleem is dat ik onder het menu een margin van 10 pixels wil, dit wordt ook gedaan, maar in FireFox wordt er bóven het menu ook 10 pixels aan margin toegevoegd. Het lijkt aan de combinatie van margin en float te liggen, maar dit weet ik niet zeker en het lukt me ook niet dit op te lossen.
Is dit een bekend probleem en is hier een oplossing voor? Zo ja, welke?
Alvast bedankt!
