Question

October Landing Page

I’m having a couple issues on a page I’m developing. In the page above you’ll see three boxes toward the bottom of the page – two are the same format and the third has it’s own problems.

Box 1 & 2 (the ones without borders)

PROBLEM: somehow the list items have some extra left padding (apparently) that is not specified in the style sheet – at least not intentionally. Are they inheriting padding from elsewhere? Both boxes seem to be exhibiting this problem.

Box 3 (the one with the donation buttons)

PROBLEM: the top row of buttons seem to be inheriting some extra padding or margins from somewhere, but I cannot figure out where.

Any explanations or suggestions??

*UPDATE: OK, so I fixed the issue with boxes 1 & 2 by adding a new rule for their ul with a padding set to 0px. Not sure where it was inheriting the padding from, but that worked.

Answer 1

different browsers use different default settings that why some choose to use CSS reset so that the defaults are set to specific values (like 0px etc.) check if this will remove your problem:

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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}