Internet Explorer 8 padding issues

[mgn2683]

Hello, I am having an issue with my footer in IE 8. IE is increasing the padding, and bumping the newsletter sign up box down, when it is supposed to be on the same level as the links. Any thoughts as how to fix the padding problems?

Site can be seen here: Click Here

[khokon-bd]

Did you try to set default padding 0 of all selector?

[mountainhiker]

Try the following css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

[mgn2683]

I can't do a

padding: 0;
margin: 0;

because I have other elements that are depending padding & margins. The current padding I have set works well on IE9, Chrome, Safari & Firefox, just has issues in IE 7 & 8. Is there any known ways to add IE only padding code? Or specific to a version of the browser?

[JorgeM]

Have you tried taking a different approach with regard to the yellow bar across the footer. For example, instead of using a dedicated div element and filling the background color as you are in your CSS...

#footer-top-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #f4bd20;
    margin: 0 auto;

just add a top border to the "footer" div:

border-top:2px solid #f4bd20;

For example...

#footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    height: 225px;
    background-color: #0c5992;
    margin: 0 auto;
    border-top:2px solid #f4bd20;
}