I am having a problem with margins / line-height in one of our websites.
You can take a look here: http://c5.abatec.es/sobre-esferalia
I am using a Jquery script to create a Drop Cap effect in the first letter of each sections, that adds a class to them. There are two types of dropcaps, as you can see. Google Chrome is not rendering the smaller ones correctly. You can compare with other browser and see the difference.
Any idea about why is this happening? Is there a fix / hack for this?
A workaround would be to set margin-top:-1px to the .dropcap CSS rule ..
must be some discrepancy on the size the text gets rendered..
Changing the line-height to 1.8em worked for me. But in general, this problem is very difficult to avoid because fonts are rendered differently across platforms and even across browsers.
I managed to fix it by adjusting your line-height on your p tags.
I adjusted it to 1.8 - anything less and the third line of copy can not flow underneath the drop cap.
See the images:
