Solved

CSS, Internet Explorer interpreting padding differently

Posted on 2014-02-02
17
731 Views
Last Modified: 2014-02-02
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
0
Comment
Question by:isaacr25
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39828027
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39828039
It would look more different on my computer because I don't have the font "Antonio-Light".  Never heard of it before.
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39828099
0
 

Author Comment

by:isaacr25
ID: 39828179
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
 
LVL 58

Expert Comment

by:Gary
ID: 39828186
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
 

Author Comment

by:isaacr25
ID: 39828208
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
 
LVL 58

Expert Comment

by:Gary
ID: 39828287
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
 
LVL 58

Expert Comment

by:Gary
ID: 39828300
One possible option is to add an IE specific media query to add the extra 5px to the top.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:isaacr25
ID: 39828321
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
 
LVL 58

Expert Comment

by:Gary
ID: 39828340
I set the padding for IE to
padding:15px 42px 10px 42px

...and it seemed to work fine.
0
 

Author Comment

by:isaacr25
ID: 39828423
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39828440
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
 

Author Comment

by:isaacr25
ID: 39828469
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
 
LVL 58

Expert Comment

by:Gary
ID: 39828483
It's an IE hack that only IE will use, all other browsers will ignore it (including IE10+)
0
 

Author Comment

by:isaacr25
ID: 39828507
I understand that, but what does the "9" mean in 15px\9?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39828512
That's the hack part \9
0
 

Author Comment

by:isaacr25
ID: 39828605
I've applied the hack to the other areas. Thank you so much for your help!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now