Search code examples
csscss-reset

CSS reset overrides specified elements in Firefox

I have a stylesheet where I apply a reset in the beginning. This sets the margin and padding to 0, among other things, for a slew of tags. However, later in the stylesheet I apply margins and padding to specific tags. Yet for some reason Firefox isn't getting past the reset at very specific places points.

Here's an example of what's happening. Below is my reset:

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

Here is a line I added to provide style to a specific div element with class modified:

.modified { padding-top: 5px; align:center; }

In Safari, when I inspect that specific div, I see the line I created in my stylesheet and that appears to be applied.

In Firefox, when I use firebug on that same div, I see only my css reset code.

Is there a way around this? I've tried !important, as well as re-naming it div.modified instead of just modified but that hasn't worked either.

Solution

  • align is not a valid CSS property. I'm assuming you were looking for text-align: center.

    Obviously, something else is affecting it, as it all shows perfectly fine in my Firebug:

    exists