CSS works inline but not in stylesheet

Question

I have this CSS:

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

This works fine in a style="" 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?

UPDATE

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

Disconcerted

Sounds like a specificity issue, can you provide more detail? – Bullroarer

Can you share your codes via jsfiddle.net – Helbonia

Is there another stylesheet loaded? Maybe an external one? – Dumpish

@Bullroarer - thanks for the link, but everything I do that isn't inline styling with no ID makes the element disappear! @Helbonia Alakese - Yeah the rest of the stylesheet works great. Thanks. – Disconcerted

Do you have more than one element on the page with the id of advert? Give the element a totally new id and see what happens. – Wagstaff

Use Firebug to see which CSS rules are been applied to this element – Bombastic

Answer 1

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!

Wagstaff

Yes, firebug or dragonfly will show you which declarations are overridden. It definitely makes it easy to figure out a specificity issue. – Nubbly

Thanks mark123 - I'll check it out with FireBug. Why didn't I think of that before! mode_enable('idiot') – Disconcerted

Answer 2

It's been a long time since I asked this question, however I seem to remember this was caused by me using Adblock plus - it was blocking the <div> because it had an ID of advert - a very simple oversight.

I've always developed with ABP off ever since, and your should check that any plugins you may be using aren't blocking/modifying your HTML in ways you don't want.

Disconcerted

Considering how many people use ABP, might be worth developing with it on to catch these issues? – Matlick

Answer 3

I had same problem.

My inline css was style="padding-left:20px;" Which I wanted to replace with: class="padleft" My solution stylesheet was .padleft {padding-left:20px !important;}

This solved my problem.

Diskin

While this will likely solve the issue, it's bad practice to fill your stylesheets with !important rules. The issue (as mentioned in a comment above) is caused by the specificity of other CSS rules. MDN documentation on CSS specificity. – Zwolle