Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Max Hallinan
Max Hallinan
7,614 Points

Baseline Rendering Webkit vs. Firefox

I've been playing around typesetting a single column using a baseline grid. Have noticed a slight difference in Chrome/Safari versus Firefox. Webkit browsers render the baseline 1 or 2 pixels higher than the baseline in Firefox. The difference is imperceptible unless drop caps are applied to the paragraph using the p:first-child:first-letter method. All things being equal, Webkit browsers will place the drop cap baseline 1 or 2 pixels above the baseline of the body text. Firefox places the drop cap baseline flush with the baseline of the body text. Applying margins or padding to align the baselines in Webkit means that the baselines are offset in Firefox. Have found reference to this in articles on CSS drop caps but have not come across a solution. I'm keeping this little principle in mind but drop caps that don't line up with the body text can be a huge eyesore. Does anyone have any experience with this?

James Barnett
James Barnett
39,199 Points

Have you tried to see how it looks if you use normalize.css?

Max Hallinan
Max Hallinan
7,614 Points

Yes. I tried normalize and the html5 doctor reset. Neither made a difference. I added 2px to the margin-top property for the drop cap so that now the WebKit rendering is just above the baseline and the Firefox rendering is just below. That's my best solution short of a browser sniffing hack which I'm not sure how to approach.

1 Answer

If I am right, this may help :

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Credits : www.paulirish.com

Max Hallinan
Max Hallinan
7,614 Points

Good idea. Thanks! I will try that out.