font face - CSS Padding variations between Chrome, Firefox + Safari -
i'm using font-face + css. text padding appears fine in browsers except safari , chrome on mac, it's rendering top padding 20px or so... piece of css in question:
p.style10 {font-family: 'titilliumtext22lthin', arial, sans-serif; font-size: 17px; line-height: 19px; color: #ffffff; padding: 20px 40px 10px 10px}
here's how appears incorrectly in chrome/safari (mac): http://siddharthkhajuria.com/srv/chrome.png
and correctly in firefox (mac): http://siddharthkhajuria.com/srv/firefox.png
any help/suggestions on why it's appearing padding in chrome/safari on mac?
thanks! sidd.
-- here's relevant bit of html too:
<!-- start of promos 1 --> <div class="g320" style="background-image:url(img/p1.png); width:310px; height:354px; overflow:hidden;"> <p class="style9"><strong>'bootylicious' tom rosenthal</strong><br /><br />a video tom's reworking of destiny's child classic. directed (with tom), filmed , edited it.<br /><br /><br /></p> <p class="style10"><strong>bbc @ edinburgh fringe</strong><br /><br />i produced website bbc @ 2011 fringe festival. made range of films , took photos on-site throughout fortnight.</p> </div> <div class="g640"> <iframe src="http://player.vimeo.com/video/37423313?title=0&byline=0&portrait=0" width="630" height="354" frameborder="0"></iframe> </div> <div class="g320"></div> <div class="clear"> </div> <!-- end of promos 1 -->
use css reset avoid kind of problem. css reset important in removing inconsistent margins, paddings, line-heights, , other attributes can cause web pages differently across various browsers. create different css file , name 'reset.css' , add @ top of other css file's links using
<link rel="stylesheet" href="your_domain/css/reset.css">
go link ready made reset css file , more @ here css reseting.
Comments
Post a Comment