It is common knowledge that browsers may display fonts differently, especially when using bold text. This can result in inconsistencies across different browsers unless the font-weight property is set to normal, but this limits our ability to use bold fonts.
However, I've noticed that when I apply font-weight: bold; to the #default_menu element, the menu appears wider in some browsers compared to others. The difference is more significant than just 1 or 2 pixels.
Is there a solution to this issue, or perhaps a way to improve the consistency?
Thank you.
HTML
<ul>
<li><a href="#nogo" title="HOME">HOME</a></li>
<li class="main_menu_seperator">|</li>
<li><a href="#nogo" title="HOW IT WORKS">HOW IT WORKS</a></li>
<li class="main_menu_seperator">|</li>
<li><a href="#nogo" title="PARTNERS">PARTNERS</a></li>
<li class="main_menu_seperator">|</li>
<li><a href="#nogo" title="BLOG">BLOG</a></li>
<li class="main_menu_seperator">|</li>
<li><a href="#nogo" title="CONTACT US">CONTACT US</a></li>
</ul>
CSS
#default_menu
{
font-weight: normal;
}
#default_menu
{
font-size: 16px;
}
#default_menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#default_menu li
{
display: inline;
}
.main_menu_seperator
{
padding: 0px 10px 0px 10px;
}