Padding differences between Chrome and Firefox

Question

I am having a small issue with my main menu padding that I'm hoping someone can help me with. In Firefox and IE, everything is rendering fine. However, in Chrome and Safari, the padding is slightly different.

Right now, I have the left/right padding set to 1.82em, which ends up with a little bit of unused space after "Contact Us" in Chrome/Safari. I have also tried setting it to 31px, which ends up rendering perfectly in Firefox/IE, but in Chrome/Safari it places the last menu item on a new line.

I've read that Firefox and Chrome render padding exactly the same, so I'm at a loss on this one. I can probably java my way out of this and use different CSS for different browsers, but I'd rather avoid that. Any ideas?

This question isn't quite as useful now that the link to the source is gone.... — jahroy, Jun 18 '13 at 20:35

score 3 · Answer 1 · answered Nov 22 '11 at 18:36

You've actually got two problems:

1.82em will render differently (the "padding" problem)
text will render differently, giving you a different "base width" for each item (that's why when you used pixels for padding, it didn't work either)

As usual, you have many ways of solving.

One way:

Give all of your LIs classnames or ids and set their widths, kill the left/right padding, and just set text-align:center;

HTML:

<ul class="menu-mainmenu">
  <li class="menu-mainmenu-0 current active first">
    <a class="current" href="/eme/"><span>Home</span></a>
  </li>
  <li class="menu-mainmenu-1">
    <a href="/eme/about"><span>About the Emergicenter</span></a>
  </li>
  <li class="menu-mainmenu-2">
    <a href="/eme/staff"><span>Meet the Staff</span></a>
  </li>
  <li class="menu-mainmenu-3">
    <a href="/eme/forms-and-resources"><span>Forms &amp; Resources</span></a>
  </li>
  <li class="menu-mainmenu-4">
    <a href="/eme/ask-the-doctor"><span>Ask the Doctor</span></a>
  </li>
  <li class="menu-mainmenu-5 last">
    <a href="/eme/contact"><span>Contact Us</span></a>
  </li>
</ul>

CSS:

.menu-mainmenu {width:960px;}
.menu-mainmenu li {text-align: center; padding:12px 0 20px;}
.menu-mainmenu-0 {width:100px;}
.menu-mainmenu-1 {width:217px;}
.menu-mainmenu-2 {width:155px;}
.menu-mainmenu-3 {width:191px;}
.menu-mainmenu-4 {width:158px;}
.menu-mainmenu-5 {width:139px;}

I did not even think of that, but that makes perfect sense. I may try that method if I'm feeling ambitious. Thanks! — user1060324, Nov 22 '11 at 18:41
"Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome." It also creates a 1px gap in your layout. This is probably the worst way to solve the problem. I'd vote it down if I could. — Dennis, Nov 22 '11 at 19:49

score 1 · Answer 2 · answered Nov 22 '11 at 18:19

1

You should note that webkit rounds em to one decimal point, so, your 1.82em becomes 1.8em, when you calculate what that actually is on a pixel level, you may even be getting additional pixel differences. em is great if you need it, but difficult to work with if you are looking for pixel perfection.

answered Nov 22 '11 at 18:19

Jacob Thomason

3,062
2
17
21

Thanks for the info, that is definitely good to know. I would like to use 31px for the padding since that renders perfectly in FF/IE, but I'm not sure where the extra space is coming from in Chrome/Safari when I do that. – user1060324 Nov 22 '11 at 18:22

Lucas Welper · Accepted Answer · 2011-11-28T14:13:46.300

1

Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome.

Edit: See Dennis' response below. A fixed width for each item will be the most reliable.

.main-menu > li > a { 
    width:160px;
    text-align:center;
    padding: 12px 0px 20px 0px;
}

edited Nov 28 '11 at 14:13

answered Nov 22 '11 at 18:27

Lucas Welper

2,666
2
18
11

I would bet that it's directly related to this: http://stackoverflow.com/questions/6614204/rendering-of-html-in-firefox-and-chrome – Lucas Welper Nov 22 '11 at 18:30
Yup, I just noticed that also. That may be the only fix. Thanks! – user1060324 Nov 22 '11 at 18:32
Ouch. This method introduces a 1px gap in the main layout. See my answer below if, like me, you find gaps in your layout unacceptable. – Dennis Nov 24 '11 at 18:53

score 0 · Answer 4 · answered Nov 28 '11 at 17:55

This is an alternative answer, as it depends on what browsers you need to support. If you don't need to worry about ie6 or ie7, then you can use display:table-cell.

http://jsfiddle.net/BU9Gb/

Relevant css:

.menu-mainmenu {width:980px;display:table;}
.menu-mainmenu li {display:table-cell;}
.menu-mainmenu a {display:block;padding:15px 30px;text-align:center;}

Padding differences between Chrome and Firefox

4 Answers4