0

The following is happening (font-family:'Arial',sans-serif;):

IE: enter image description here

Firefox: enter image description here

Chrome: enter image description here

The CSS is the same for all Browsers - it is like this:

#main_menu ul {
    height:41px;
    width:960px;
    font-size:13px;
    font-weight:bold;
    list-style-type:none;
    display:flex;
    flex-direction: row;
}

#main_menu ul li a {
    display:block;
    height:26px;
    padding:15px 24px 0 24px;
    line-height:13px;
    color:#fefefd;  
    border-left:1px solid #7f9f67;
    border-right:1px solid #466232;
    text-transform:uppercase;
    background:url(images/header_menu_bg_inactive.jpg) top center repeat-x;
    text-shadow:1px 1px 1px #333;
}

#main_menu ul li:first-child a {
    border-left:1px solid #445d32;
    padding-left:22px;
}

#main_menu ul li:last-child a {
    padding-right:22px;
}

As you can see this was originally built in Chrome. How can I solve this annoying issue

  • without conditional hacks for every Browser
  • without setting a fixed size for every menu item

Is there an easy solution?

Blackbam
  • 17,496
  • 26
  • 97
  • 150
  • 1
    You could look into CSS font-kerning: https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning. Otherwise, "setting a fixed size for every menu item" may be your only option. – Rick Hitchcock Aug 24 '17 at 20:52
  • Thanks. If this is the only option this is really sad :-( – Blackbam Aug 24 '17 at 21:04
  • Are you reseting the css to adjust against different browser default setting. Please read this article https://meyerweb.com/eric/tools/css/reset/. Use/Add the reset css on page before any other css file or style and then check. It resets all the margin and padding the default browser types adjust to. – Nasir T Aug 24 '17 at 21:48
  • @NasirT Tried it. This is not the problem. – Blackbam Aug 24 '17 at 22:34

1 Answers1

0

You could style the menu as a flexible box.

Use the flex property on the menu items to award each an equal share of the left-over width.

#main_menu {
  width: 960px;
}

#main_menu ul {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  padding: 0;
}

#main_menu ul li {
  -webkit-flex: 1;
  flex: 1;
}

#main_menu ul li a {
  display: block;
  background-color: green;
  padding: 4px 8px;
  box-sizing: border-box;
  text-align: center;
  border-right: 1px solid black;
}

#main_menu ul li:first-child a {
  border-left: 1px solid black;
  background-color: lightgreen;
}
<div id="main_menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Item One</a></li>
    <li><a>Item Two</a></li>
    <li><a>Item Three</a></li>
    <li><a>Item Four</a></li>
    <li><a>Item Five</a></li>
    <li><a>Item Six</a></li>
  </ul>
</div>
stackingjasoncooper
  • 623
  • 5
  • 13