Extra line-break in Chrome and Firefox on Windows if italics are used

[Head United]

I'm having an issue where if I italicize something in a paragraph, it will create an extra-line break before the next paragraph.
It doesn't happen in any browsers on Mac, nor in IE9—just Firefox and Chrome on Windows. They're the latest versions of those browsers.

You can see an example here: http://blog.studiofuse.biz/its-christmas-in-paris-on-memorial-day-in-la/

I tried both the <i> tag, and adding a class and styling it with css  in place of <em>, but I get the same result. If I take out the italics altogether, the extra line-break disappears.

Any ideas why this is happening and if there's any way to fix it?

Thanks
Scott

[Head United]

Not sure why it didn't occur to me before, but I decided to look at the page with Firebug / Web Inspector.

It's not a line-break. It seems that Treesaver adds "padding-bottom: 24px" in Windows Firefox, and "padding-bottom: 23px" in Windows Chrome to any paragraph with italics in it, AND any OL or UL element.

I suppose I'll file a bug report.

Scott

[Head United]

Correction: Padding is NOT added to the bottom of UL or OL elements in Windows Chrome—just paragraphs containing italics.

[Head United]

So I fixed my extra-padding issue. I had this CSS:

 body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px
}

After trying different fonts for <em>, I found that most stack changes that fixed the problem in Windows Chrome and Firefox caused the extra padding to then occur in Mac Safari. The only sans-serif that didn't was Trebuchet MS. That worked in all browsers, but it didn't really mix well with Arial/Helvetica. So I tried just changing the font-weight to Bold—that also fixed the problem, but called too much attention to the words. Anyway, that eventually led me to try adding a pixel to the font-size of <em> tags, and that fixed the problem. So, to make a long story short, I just did this:

em {
  font-size:17px
}

It's not ideal, but it's not really noticeable. Hopefully that helps someone else.

Scott

On Thursday, May 24, 2012 11:16:58 AM UTC-7, Head United wrote:

[Head United]

Correction: This "solution" breaks it in Mac Firefox. Fuck.

[Andrea Campi]

On Thu, Jun 7, 2012 at 10:38 PM, Head United <sc...@studiofuse.biz> wrote:
> Correction: This "solution" breaks it in Mac Firefox. Fuck.

You probably need to also play with the line-height.

Just an idea: try with Seasons, specifying the font you want to use.
It usually does exactly the right thing, so you may be able to figure
out how it handles this case.

[Head United]

HI, Andrea. I downloaded the Seasons walkthrough and changed the font to "Arial, Helvetica, sans-serif" and it caused the same padding-bottom problem. So I played with the line-height as per your suggestion, and it did resolve it.

It seems that my 16px font-size with 25px line-height doesn't work (with Arial at least), nor does the default Seasons 1em font-size with a 1.333em line-height (again, with Arial).

Changing the relationship to either 15px/25px, 16px/24px or 16px/26px fixes the problem in Windows Chrome. However, of those three, only 15px/25px works in Windows Firefox.

Sigh. Perhaps it's time to move to the country and raise chickens...except then I'd just find myself asking "Why aren't my roosters laying eggs?"

Thanks, as always.

Scott

P.S. Looking forward to Savory!