Rendering Difference Between Firefox and Chrome/Internet Explorer

05 Nov 2013

I’ve discovered that this blog does not display the same between Firefox and Chrome and Internet Explorer. For some reason with Chrome and IE the <div>’s on the music page stagger their layout. I’m primarily a Mozilla Firefox user and performed all my testing with that browser. I’m looking into how to fix this and will post an update shortly with my solution.

Here is how it looks in Firefox:

Perfectly Normal Firefox Rendering

And the not-so-good-looking Chrome:

Blargh

Staggering I know…..

EDIT

So the issue appears to be a padding value within the CSS for the <span> that contain the images for the plus and minus images. Taking it from a value of padding:10px to padding:9px 10px 10px 10px; resolved the issue. I not sure if my line height is causing the issue or if the iamges are too big for a span with that much padding…. Very odd.