Hi,
Can someone please assist with a fix for IE9 in particular margins and padding?
I have two divs sitting on top of each other, with a padding applied to the top div and margin-bottom.
I just updated to IE9 and suddenly the two divs are nearly touching each other. Not sure what to do. If I increase the padding or margins, the gap will look humungous in Firefox!
Can someone please help?!
create two stylesheet files, one for IE and another one for other browser.
and in the <head> block, check the version of browser
<!--[if IE 9]>
<link to ie9.css >
<![endif]-->
<!--[if !IE 9]>
<link to normal.css >
<![endif]-->
this would be the easiest and faster way to do it 
Hi greenteazen. Welcome to SitePoint.
Creating a separate style sheet is overkill for IE9, which is quite reliable with CSS and should give the same results as Firefox et al. Please post your HTML and CSS (or preferably a live link) so that we can suggest what’s going wrong here.
Thanks for your response guys.
ralph.m, I will post the CSS tomorrow as the files are at work.
Chances are I stuffed up the CSS as I am pretty new to it. Just when I thought it wasn’t that scary, this kind of thing happens.
Thanks!
Ok, so here is the CSS.
Top DIV:
Content {
clear: left;
float: left;
height: auto;
width: 890px;
margin-top: 15px;
margin-bottom: 15px;
padding: 0px;
}
For the bottom DIV, in this case the footer:
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999;
float: left;
height: auto;
width: 890px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
clear: left;
padding-left: 0px;
}
Please note that there are 3 DIVs inserted in the Content and one in #footer.
If I make up a simple test case using your CSS, I get the same result in Firefox and IE9. So there must be something else on your page causing problems. We need to see this issue in context.
Here is the test code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
#content {
clear: left;
float: left;
height: 100px;
width: 890px;
margin-top: 15px;
margin-bottom: 15px;
padding: 0px;
background: blue;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999;
float: left;
height: 100px;
width: 890px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
clear: left;
padding-left: 0px;
background: red;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Not sure, what could be causing it.
There is probably a number of this and I have limited knowledge to be able to pick it up.
I have introduced a margin-top on the #footer div, which has helped, as I needed more of a gap anyway, but IE and Firefox still render the space slightly differently.
Do you have this live somewhere? It would be interesting to check it out.
Hello,
No, it is not live yet.
It is a website that I am currently working on.
This sounds like a case of collapsing margins. Though without full code it’s impossible to tell.
Try adding a 1px top padding to the footer.
Do you have any children with a top margin, designed to push away the footer from the content? Ralph wanted a link due to us being unable to correctly solve the problem without more to look at.
Because the footer already has a top border, I’m not sure that would help.
You’re right, I didn’t see that. Somehow
thanks guys.
What is the best way give you the codes? Just copy and paste into the body of the thread?
Yes, just paste the code here. Either type [noparse]
...
[/noparse] tags around the code or go into advanced view and click the code button to do it automatically.
The ideal would be to make up a test page that demonstrates the problems and has all the code in it, and then paste that here, rather than us piecing the various bits together, if that’s possible.
Thanks ralph.m!
I will do a test site tomorrow.
I just tested another subpage, portfolio page, and IE has added large gaps in my unordered list and completely ignored the bottom margin and padding.
I haven’t had this issue with the previous version of IE, I just upgraded this week.
This is sooo frustrating! I have spent a lot of time on what I thought would be a great site and now all of these issues on every single page.
It’s hard to help yu without being able to see what you are doing. Is this online yet? You could put up some hidden test pages on your domain.
Do you have a valid doctype on your page because IE8/9 has no problem with lists but older versions of IE do which makes it sound as though you are working in quirks mode. You need a current valid doctype to avoid quirks mode (and nothing esle above the doctype).