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

Recommended Answers

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; …
Jump to Post

All 4 Replies

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

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

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?

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.