Someone Someone - 1 month ago 18
Less Question

<nav> size increases in Firefox

I'm building a navigation bar, but there's one problem: its size appears to increase in Mozilla's Firefox browser:

FF

This is the expected size, controlled by a padding inside each column:

Chrome|Opera
(Opera)

What I've tried to avoid this was setting the navigation bar's magin and padding to 0, but nothing changed! What's wrong? I'm using the

<nav>
element for that (tried using
<div>
, too).

Before I post the snippet, I'll show a part of the LESS code (very similiar to CSS), where I stylize the navigation bar (menu):

#menu {
background: @dark-next-menu-bg;
margin: 0;
padding: 0;
}

#menu .col {
display: inline-block;
padding: 6px 15px;
&:hover {
background: #1c1c1c;
color: #fff;
}
}

#menu .col span {
color: @dark-next-menu-text-color;
}


Here's the snippet with compiled CSS for testing:



body,
html {
overflow: hidden;
width: 100%;
height: 100%
}
body {
margin: 0
}
.let-select {
-webkit-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
-o-user-select: initial;
user-select: initial
}
.Dark-Next,
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none
}
.Dark-Next {
background: #444
}
.Dark-Next h1,
.Dark-Next h2,
.Dark-Next span {
color: #fee;
font-family: 'Segoe Ui', sans-serif
}
.Dark-Next h1 {
font-size: 24px
}
.Dark-Next h1,
.Dark-Next h2 {
font-weight: 200
}
.Dark-Next span {
font-size: 12px
}
.Dark-Next button,
.Dark-Next input,
.Dark-Next select {
color: #fff;
font-family: 'Segoe Ui', sans-serif;
outline: 0
}
.Dark-Next button:focus,
.Dark-Next input:focus,
.Dark-Next select:focus {
border-color: #48f
}
.Dark-Next select {
background: #222;
border: 1px solid #333
}
.Dark-Next select option {
padding: 8px;
background: #444!important
}
.Dark-Next #menu {
background: #111;
margin: 0;
padding: 0
}
.Dark-Next #menu .col {
display: inline-block;
padding: 6px 15px
}
.Dark-Next #menu .col:hover {
background: #1c1c1c;
color: #fff
}
.Dark-Next #menu .col span {
color: #ccc
}
#menu {
cursor: default;
left: 0;
top: 0;
right: 100%;
position: relative
}
#menu .col {
display: table-cell;
padding: 8px 14px
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Map Editor Next</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body class="Dark-Next">
<nav id="menu">
<div class="col">
<span><i>NEXT</i></span>
</div>
<div class="col">
<span>Map</span>
</div>
<div class="col">
<span>Edit</span>
</div>
<div class="col">
<span>View</span>
</div>
<div class="col">
<span>Tools</span>
</div>
<select class="col">
<option value="brush">Brush</option>
<option value="eraser">Eraser</option>
</select>
</nav>
</body>
</html>




Answer

See snippet (I added an id to select tag and style)

body,
html {
    overflow: hidden;
    width: 100%;
    height: 100%
}
body {
    margin: 0
}
.let-select {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    -o-user-select: initial;
    user-select: initial
}
.Dark-Next,
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
.Dark-Next {
    background: #444
}
.Dark-Next h1,
.Dark-Next h2,
.Dark-Next span {
    color: #fee;
    font-family: 'Segoe Ui', sans-serif
}
.Dark-Next h1 {
    font-size: 24px
}
.Dark-Next h1,
.Dark-Next h2 {
    font-weight: 200
}
.Dark-Next span {
    font-size: 12px
}
.Dark-Next button,
.Dark-Next input,
.Dark-Next select {
    color: #fff;
    font-family: 'Segoe Ui', sans-serif;
    outline: 0
}
.Dark-Next button:focus,
.Dark-Next input:focus,
.Dark-Next select:focus {
    border-color: #48f
}
.Dark-Next select {
    background: #222;
    border: 1px solid #333
}
.Dark-Next select option {
    padding: 8px;
    background: #444!important
}
.Dark-Next #menu {
    background: #111;
    margin: 0;
    padding: 0
}
.Dark-Next #menu .col {
    display: inline-block;
    padding: 6px 15px
}
.Dark-Next #menu .col:hover {
    background: #1c1c1c;
    color: #fff
}
.Dark-Next #menu .col span {
    color: #ccc
}
#menu {
    cursor: default;
    left: 0;
    top: 0;
    right: 100%;
    position: relative
}
#menu .col {
    display: table-cell;
    padding: 8px 14px
}
#sel,#sel >*{
padding:0px !important  ;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Map Editor Next</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body class="Dark-Next">
    <nav id="menu">
        <div class="col">
            <span><i>NEXT</i></span>
        </div>
        <div class="col">
            <span>Map</span>
        </div>
        <div class="col">
            <span>Edit</span>
        </div>
        <div class="col">
            <span>View</span>
        </div>
        <div class="col">
            <span>Tools</span>
        </div>
        <select class="col" id="sel">
            <option value="brush">Brush</option>
            <option value="eraser">Eraser</option>
        </select>
    </nav>
</body>
</html>