asked on

CSS, Internet Explorer interpreting padding differently

Please see the attached screenshots as well as the css code I've pasted. In Firefox and Chrome, the padding is interpreted evenly, top and bottom, and left and right. In IE however, the top and bottom padding is uneven. The top padding is much less than the bottom padding. This problem exists for quite a few other elements in my website as well. This is just one example.

Can someone tell me how to fix this problem? Thanks in advance.

#header-learn-more a {text-transform:uppercase; text-decoration:none; font-size:26px; color:#fffdeb; background:url(images/btn-header.jpg) center center no-repeat; padding:10px 42px; font-family:"Antonio-Light";}

Open in new window

ie.jpg
chrome.jpg

Gary

Have you got a doctype set on the page?
Else look at a box-sizing reset
http://quirksmode.org/css/user-interface/boxsizing.html
http://css-tricks.com/box-sizing/

Dave Baldwin

It would look more different on my computer because I don't have the font "Antonio-Light". Never heard of it before.

Dan Craciun

Here it is: http://www.fontsquirrel.com/fonts/antonio

isaacr25

ASKER

Cathal,
The doctype is attached in the code snippet. If it was a box-sizing issue, wouldn't the difference show up in both top and bottom padding? Maybe I'm not understanding the box-sizing concept properly...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Open in new window

Gary

There is two methods of adding padding/margin
You add it to the dimensions of the element - if the element is 100px wide and you add right padding 10px then the element becomes 110px wide
The other is if you add 10px padding then it is on the inside of the element, so the element is still 100px.
Your chrome image has extra {padding} on all sides
What IE are you testing in?
Maybe you can make a fiddle up at jsfiddle with your actual html/css

isaacr25

ASKER

Understood. I'm using IE9. I've previously tried adding a ridiculous amount of padding to the top and bottom (like 100px). The top padding doesn't increase any more than what you see in the screenshot I attached earlier.

Here is a link to the live site: prowodev.com/links/pw.html. It's the large "learn more" button in the header.

Gary

Looks to me like a bad font. Tested a basic version of it and IE seems to not be recognizing the top of the font.
It's like there is no default top padding on the font or rather that IE is not able to recognise it

Gary

One possible option is to add an IE specific media query to add the extra 5px to the top.

isaacr25

ASKER

Regarding the IE specific media query, I've tried adding extra padding in testing, even all the way to 100px! It doesn't make a difference in IE.

Gary

I set the padding for IE to
padding:15px 42px 10px 42px

...and it seemed to work fine.

isaacr25

ASKER

Hmmm... You're right. I tried it earlier with just the first two values (since it's supposed to repeat for the last 2 values).

So that did work in IE. But now it is skewed in Firefox and Chrome.

What syntax do I need to apply so that extra 5px only applies to IE?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

isaacr25

ASKER

Ok. So I've altered the CSS code as attached. I have to apply this concept to a couple of other spots, so can you explain what the "padding-top:15px\9" means? I'm not familiar with that syntax. Thanks.

#header-learn-more a {text-transform:uppercase; text-decoration:none; font-size:26px; color:#fffdeb; background:url(images/btn-header.jpg) center center no-repeat; padding:10px 42px; padding-top:15px\9; font-family:"Antonio-Light";}
/* IE10/11 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	#header-learn-more a {
		padding-top:15px;
	}
}

Open in new window

Gary

It's an IE hack that only IE will use, all other browsers will ignore it (including IE10+)

isaacr25

ASKER

I understand that, but what does the "9" mean in 15px\9?

Gary

That's the hack part \9

isaacr25

ASKER

I've applied the hack to the other areas. Thank you so much for your help!