CODEWITHSUNDEEP
csscross-browserpadding
user1060324
user1060324

Reputation: 15

Padding differences between Chrome and Firefox

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?

Upvotes: 1

Views: 15104

Answers (4)

Dennis
Dennis

Reputation: 593

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;}

Upvotes: 0

Lucas Welper
Lucas Welper

Reputation: 2696

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;
}

Upvotes: 1

Dennis
Dennis

Reputation: 593

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;}

Upvotes: 3

Jacob Thomason
Jacob Thomason

Reputation: 3411

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.

Upvotes: 1

Related Questions