Bojangles Bojangles - 9 months ago 51
CSS Question

CSS works inline but not in stylesheet

I have this CSS:

width: 98px; height: 298px; border: 1px solid; margin: 30px 25px 0px 25px;

This works fine in a
inline style, but when I use it in the stylesheet the element disappears completely! This is some crazy behaviour right here...

Does anyone know of a fix/workaround for this problem?


If I remove the
code from the stylesheet completely and put the CSS inline, but leave the
where it is on the div, it still doesn't show up. HOWEVER, if I remove the
bit, then the div displays fine... strange.

Answer Source

Its likely you have a cascade in your stylesheet that is 'hiding' the element in question somehow, and your inline styles are overriding that, so the element is visible. However, when you move the rules into the stylesheet they no longer are overriding because the selector you are using is of lower precedence than the one that is 'hiding' the element.

You can use a tool like FireBug or the Web Developer toolbar for firefox to inspect and element and see all the CSS that is affecting something. I bet you'll see something extra there you don't expect!