Chrome Padding Issue On Paragraph Text

Question

I'm a little new to the web development scene and I was having a very persistent problem with Chrome that I can't quite seem to figure out.

I'm using the Compact News Previewer to show new entries to the database. You'll notice that if you view the demo in Firefox everything fits nice and snug, but in Chrome the paragraphs within the left-hand column get truncated. I'm having this same issue in my own implementation as seen below (Note: My implementation is a little different from the demo):

You can see this issue for yourself if you go to this website.

What I've tried:

1. CSS Reset - yields no different results.

Edit

I'm using Chrome V18.0.1025.151, going to try a system update on Ubuntu so I'll check in tomorrow and see if this fixes the issue.

Edit 2 Evidently I'm using the latest version of Google Chrome, might be a problem with this version. But if nobody else can see the issue then perhaps it's a non-issue...

Edit 3 Found out that I was using Chromium instead of Chrome, I didn't realize there was a difference. I installed Chrome 7 instead but I'm getting the same problem as with Chromium. Also suddenly neither of these browsers are able to display some of my jpg images? C̶h̶r̶o̶m̶e̶ ̶m̶u̶s̶t̶ ̶b̶e̶ ̶i̶n̶c̶r̶e̶d̶i̶b̶l̶y̶ ̶b̶u̶g̶g̶y̶ ̶o̶n̶ ̶U̶b̶u̶n̶t̶u̶!̶ <-- Human-error!

Answer 1

It seems like the issue is due to Chrome's default line-height and the fonts that you are using on the page. Myriad Pro and Trebuchet MS seem to have very wide leading when used with Chrome's default; sans-serif is fine. Since .cn_list p has a fixed height and overflow:hidden set, the huge line-height Chrome gives these fonts pushes the text out of the box, cutting it off.

You have a couple of options:

• Specify a line-height value in your .cn_list p rule or in a rule for a parent element, like body to cascade it down. (Something like 1 or 1em will tighten it up, but YMMV.)
• Remove the fixed height and hidden overflow, which would probably break your design since it would ruin the grid.

Adding a line-height should do the trick for you there, though.

Projects like HTML5Boilerplate always set a default line-height for just this reason.