Solved

CSS, Internet Explorer interpreting padding differently

Posted on 2014-02-02
17
751 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 83

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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 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