Member Avatar for 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:

  • 4 Contributors
  • 4 Replies
  • 791 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

IE8 layout oddities usually come from one of a few sources: the page running in IE compatibility/quirks mode, IE7/8 “hasLayout” behavior, differences in inline‑block vertical alignment, or default UA padding on list/inline elements. ’s symptom (newsletter box dropping) fits those patterns. and point toward resets (they work but are broad), while ’s suggestion to reduce extra markup is sensible — the goal is a small, targeted fix rather than a site‑wide reset.

Quick, practical checklist and fixes to try (safe to add only to the footer area):

  • Confirm a standards DOCTYPE and force proper IE rendering with a top‑of‑head meta tag (so IE isn’t emulating IE7).
  • Use F12 developer tools in IE8 to inspect the computed box model on the footer, links, and newsletter element; add temporary outlines/backgrounds to see which element grows.
  • Trigger hasLayout on the problematic element in IE (common, inexpensive fix) or use a float/clearing strategy so elements sit on the same baseline rather than relying on matching paddings.

Example of an IE8/7-only injection (place in the head; conditional comments affect only old IE):

<!--[if lt IE 9]>
<style>
/* footer-only fixes for IE8/7 */
#footer .newsletter { zoom: 1; display: inline-block; vertical-align: top; margin-top: 0; }
#footer .links     { zoom: 1; display: inline-block; vertical-align: top; }
</style>
<![endif]-->

Additional notes: prefer small, selector-scoped rules (footer-specific) over blanket resets. If inline-block spacing is the cause, adjust vertical-align or use floated layouts for those two blocks. If the problem persists despite these checks, the next step is to capture the minimal footer HTML/CSS and examine the computed box model from IE’s dev tools.

Recommended Answers

All 4 Replies

Member Avatar for khokon-bd

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

Member Avatar for 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;
}
Member Avatar for 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?

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

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