CODEWITHSUNDEEP
cssfont-facepadding
siddkhajuria
siddkhajuria

Reputation: 13

CSS Padding variations between Chrome, Firefox + Safari

I'm using font-face + CSS. Text padding appears fine in most browsers except Safari and Chrome on a Mac, where it's rendering the top padding with an extra 20px or so... This is the 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 it 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 with extra padding in Chrome/Safari on a Mac?

Thanks! Sidd.

-- here's the 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' by Tom Rosenthal</strong><br /><br />A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.<br /><br /><br /></p>

<p class="style10"><strong>BBC at the Edinburgh Fringe</strong><br /><br />I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.</p>

</div>

<div class="g640">
<iframe src="http://player.vimeo.com/video/37423313?title=0&amp;byline=0&amp;portrait=0" width="630" height="354" frameborder="0"></iframe>
</div>

<div class="g320"></div>
<div class="clear">&nbsp;</div>

<!-- END OF PROMOS 1 -->

Upvotes: 1

Views: 3369

Answers (2)

Pixelomo
Pixelomo

Reputation: 6737

For anyone who found the reset.css didn't work, I found that it helps setting heights on elements which are showing inconsistent padding between browsers. I could see a big difference in padding between Chrome and Safari and this fixed it.

Upvotes: 0

The Alpha
The Alpha

Reputation: 146219

Use CSS reset to avoid this kind of problem. CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers. Create a different CSS file and name it 'reset.css' and add it at the top of your all other css file's links using 

<link rel="stylesheet" href="your_domain/css/reset.css">

Go to this link to get a ready made reset CSS file and more at here all about CSS reseting.

Upvotes: 1

Related Questions