1

As you can see here http://goo.gl/mCY8KW (sorry, haven't been able to reproduce that on JSfiddle) the little arrow below my menu item is 1px to high on Firefox (works fine on Chrome and Safari)

Any idea what the issue is and how I could fix it? Playing with firebug I can fix it by modifying line-height in: 

body {
    color: #1a1a1a;
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
}

... but if I do that I screw up the line-height of the entire page which is not something I want to do. I also tried to modify to apply a line-height of 1.4 in .menu-container but if I do that it looks good on firefox but no longer in Safari and Chrome.

Many thanks for your help,

SAFARI LOOKS OK: enter image description here

FIREFOX ISSUE: enter image description here

.menu-container {
float: right;
    margin-top: 20px;
    margin-right: 30px;
    margin-left: auto;
  width: auto;


}

nav {
    float: right;
    margin: 20px auto;
    width: 100%;
}
nav ul {
    margin-right: -4px;
    margin-left: 5px;
    text-align: right;
    }
nav ul li {
    display: inline-block;
    margin-right: -4px;
    margin-left: 5px;
    vertical-align: top;
}
nav a {
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(255,255,255,1) !important ; 
    background: rgba(0,0,0,0.25);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.5s ease;


}


nav a:hover {
    border-top: 1px solid #234692;
    border-bottom: none;
    background: rgba(0,0,0,0.28) !important ; 

}


nav ul li ul {
    position: absolute;
    display: block;
    margin-top: 5px;

    background: none;
    padding-top: 5px
}
nav ul li ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0
}
nav ul li ul li a {
    display: block;
    text-align: left;
    color: rgba(255,255,255,0.9) !important ; 
    text-shadow: 0 1px rgba(0,0,0,0.33) !important ; 
    padding: 10px
}
nav ul li ul li a:hover {
    background: rgba(20,150,220,0.5) !important ; 
    color: white;
    text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
    display: block;
}
.hover span {
    color: rgba(255,255,255,0.9);
    background: rgba(20,150,220,0.5);
    border-radius: 5px;
    position: absolute;
    display: block;
    margin: 5px 0 0 -57px;
    padding: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
}

/*li.selected a{
    border-bottom: 1px solid rgba(16,65,145,0.9);

}*/

.selected {
    position: relative;

}
.menu-item-border {
        border-top: 1px solid #234692;
}

li.selected a:after {
  top: 25px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: rgba(0,0,0,0.25);
  border-width: 10px;
  margin-left: -10px;
}
Greg
  • 3,025
  • 13
  • 58
  • 106
  • Have you tried the "verbose" way of adding units to the line-height value? For some superstition (or clarity) I always prefer being explicit... maybe Firefox also prefers it, I'm not sure :/ – versvs Jul 14 '14 at 15:40
  • I've never used this but it seems like http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css could let you apply the style for your `.menu-container` for just firefox. – James Jul 14 '14 at 15:41

1 Answers1

1

This is most likely to differences in how the text is rendered. Text will always look slightly different, and have slightly different sizes, in different browsers. Also the operating system, user system settings, and browser settings affect the text rendering.

Try to use a specific height for the element instead of padding around the text size, that way the height of the element does not depend on the height of the text block.

Example:

padding: 0 8px;
height: 30px;
line-height: 30px;
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Thanks. Do you mean in .menu-container? – Greg Jul 14 '14 at 15:50
  • @Greg: The padding and the height of the element would be set on the actual element, the `nav a` rule. The line height can be set there, or on a parent element, as it will be inherited. – Guffa Jul 14 '14 at 16:04