Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS, Internet Explorer interpreting padding differently

Posted on 2014-02-02
17
Medium Priority
?
797 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 84

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 35

Expert Comment

by:Dan Craciun
ID: 39828099
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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
 

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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Several part series to implement Internet Explorer 11 Enterprise Mode
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

636 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