Padding Difference Between Chrome and Firefox

[Alessandra]

Hello, guys!

I have an oddly difference occurring between browsers that i cant figure out how to solve. My secondary menu, the one right below the header shows quite nicely on chrome, but on firefox it shows up with an extra empty space on the right side.

http://denrrou.com.br/

If i increase the padding on the inspector inside firefox i can fix it, but if i change it inside my css i fix it on firefox but break it on chrome, because now the menu will go an extra line and break the design completely...

Could someone please give some thought on how to solve it?

This is the actual css code:

.nav-secondary li a {
    border-right: 1px solid rgb(221, 221, 221);
    border-left: 1px solid rgb(255, 255, 255);
    display: block;
    padding: 9px 16px 8px 15.5px;
    position: relative;
    text-decoration: none;
}

if i change the padding to:

padding: 9px 22.89px 8px 15.5px;

It now works great on firefox, but gets too big for chrome... =/

http://denrrou.com.br/

[Marcy]

This is what I'm seeing on your site now:
.nav-secondary li a {
padding: 9px 16px 8px 15.5px;
}

With this in Firefox, there is an extra space on the right because "Reviews" moves to the next line; it all fits on one line in Chrome. Part of the reason is that padding in FF and Chrome is always just a little different, and also because you are using a half pixel which is interpreted differently by different browsers.

If it were my site, I would use 15px for both the padding-right and padding-left as follows:
.nav-secondary li a {
padding: 9px 15px 8px 15px;
}

This makes the menu fit in both FF and Chrome with just a little extra on the right side.

---

Marcy | Amethyst Website Design | Twitter

[Robodashy]

I'm having the same (ish) issue on http://www.youngsbusservice.com.au.preview.cp-server.com/

In Chrome (and Safari and Opera) it looks fine, exactly how I want it - however in Firefox and IE (IE I can understand, but Firefox???) it's incorrect. The last li drops to the second line, which I don't want. I can't see how to fix this, as I've played with the padding - but to no avail. Inspecting on firebug doesn't really help either.

I'm modifying the heck out of the Sample theme - which includes a normalize.css at the top to avoid issues such as this, so I'm out of ideas.

This one is really bugging me (I'd expect issues in Safari and Opera more than I would in Firefox), any help would be greatly appreciated.

---

The large print giveth, and the small print taketh away.
– Tom Waits, “Step Right Up”

[Marcy]

I see your menu on two lines in both Chrome and Firefox. To get it to fit all on one line, you need to make your font smaller, use a condensed font, or reduce the left and right padding. Change this line
padding: 2.8rem 2.4rem;
to
padding: 2.8rem 0.5rem;
like this:

.genesis-nav-menu a {
    border: medium none;
    color: #999999;
    display: block;
    padding: 2.8rem 0.5rem;
    position: relative;
}

Right now your font size is 1.6rem from the body size. You would need to add a smaller font-size in this section.

.genesis-nav-menu {
    font-family: Muli,Syncopate,sans-serif;
}

---

Marcy | Amethyst Website Design | Twitter

[Robodashy]

Hi Marcy.

Can you please advise what resolution you are running when you see this? I've made an adjustment which should have fixed the issue in all browsers (I hope). Strange that you see it on 2 lines in Chrome also, this has never been the case when I've tested it.

---

The large print giveth, and the small print taketh away.
– Tom Waits, “Step Right Up”

[Marcy]

My resolution is 100% in Chrome and I reset it in Firefox, just in case.

---

Marcy | Amethyst Website Design | Twitter

[Robodashy]

Thanks for looking into this for me Marcy.

I've cross checked everything in all browsers and all alignment issues seem to be fixed. Is this the case on your browser?

---

The large print giveth, and the small print taketh away.
– Tom Waits, “Step Right Up”

[Marcy]

You're welcome! It looks good for me.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts