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
isaacr25Asked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Try these, seem to work fine

#header-learn-more a {
	padding:10px 42px;
	padding-top:15px\9;
}

/* IE10/11 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	#header-learn-more a {
		padding-top:15px;
	}
}

Open in new window

0
 
GaryCommented:
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/
0
 
Dave BaldwinFixer of ProblemsCommented:
It would look more different on my computer because I don't have the font "Antonio-Light".  Never heard of it before.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Dan CraciunIT ConsultantCommented:
0
 
isaacr25Author Commented:
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

0
 
GaryCommented:
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
0
 
isaacr25Author Commented:
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.
0
 
GaryCommented:
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
0
 
GaryCommented:
One possible option is to add an IE specific media query to add the extra 5px to the top.
0
 
isaacr25Author Commented:
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.
0
 
GaryCommented:
I set the padding for IE to
padding:15px 42px 10px 42px

...and it seemed to work fine.
0
 
isaacr25Author Commented:
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?
0
 
isaacr25Author Commented:
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

0
 
GaryCommented:
It's an IE hack that only IE will use, all other browsers will ignore it (including IE10+)
0
 
isaacr25Author Commented:
I understand that, but what does the "9" mean in 15px\9?
0
 
GaryCommented:
That's the hack part \9
0
 
isaacr25Author Commented:
I've applied the hack to the other areas. Thank you so much for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.