I have created two navigation divs with specific CSS styles: for the first button:
.OptionsButton .DropDownButtonOverlay
{
margin: 0px -95px 0px 0px;
width: 92px;
height: 38.5px;
float: right;
z-index: 2;
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
.optionsButton
{
border-radius: 3px;
-webkit-appearance: none;
}
and the second button is styled as follows:
.defaultButton
{
font-family: 'Open Sans', Segoe UI, Verdana, Helvetica, Sans-Serif;
border-radius: 3px;
font-size: 14px;
color: #FFFFFF;
padding: 10px 15px;
-webkit-appearance: none;
margin: 0; /* fixes chrome bug */
}
.tenPxLeft
{
margin-left: 10px;
}
.floatRight
{
float: right;
}
.regularButton
{
background-color: #008BE1;
border: none;
}
The issue I am facing is that they appear aligned correctly in Chrome and IE. However, in Firefox, when placed within another div as part of a top menu, they do not align properly.
It seems like the font may be causing this alignment problem. I attempted to set the font size by percentage (100.01%), which improved the appearance in Firefox but disrupted it in IE and Chrome. How can I resolve this?