How to use display:none to remove element?

Question

I would like to remove the element that is high lighted in blue on the below screenshot.

If I add the following to the CSS

#p-tb body, { display:none }

it is still not removed.

Can someone explain what I am doing wrong?

enter image description here

You can't remove elements from the DOM using CSS; it's a common misconception that display: none removes elements from the DOM. You need to tell us what exactly you mean by "removing" the element. — BoltClock, Commented Apr 19, 2012 at 21:28
This isn't an answer to your question but I notice an unrelated problem in your code that I thought I'd point out... you have a style tag between your closing /head and opening body tags. There shouldn't be anything between the head and the body so that style tag should be moved elsewhere (preferably into the head). — HMartch, Commented Apr 19, 2012 at 21:28
@redlena Very interesting. It is MediaWiki 1.18.2 that we are looking at in the screenshot =) — Sandra Schlichting, Commented Apr 19, 2012 at 21:32

Niet the Dark Absol · Accepted Answer · 2012-04-19 21:21:48Z

4

#p-tb .body is the selector you need - you missed the . and have an extra , freeloading on the end.

EDIT: Although, even if you correct that, the inline style will override that rule, except maybe if you add !important after the display:none.

answered Apr 19, 2012 at 21:21

323k83 gold badges469 silver badges596 bronze badges

3

+1 And it's very clearly seen that the style is not applied .... (display: block; is the only display applied, inherited or shadowed or whatnot)
– user166390
Commented Apr 19, 2012 at 21:22
#p-tb .body { display:none !important} did the trick. What does !important do?
– Sandra Schlichting
Commented Apr 19, 2012 at 21:27
1

!important gives the property unusually high precedence. Normally inline style="..." attributes have higher precedence than any stylesheet will allow, but the !important overrides even that. That said, !important is usually seen a sign of poor design.
– Niet the Dark Absol
Commented Apr 19, 2012 at 21:28

Add a comment |

gabitzish · Accepted Answer · 2012-04-19 21:22:06Z

0

Display:none only hides the element. You can't remove an element via CSS.

Use javascript instead!

answered Apr 19, 2012 at 21:22

gabitzish

9,6137 gold badges45 silver badges66 bronze badges

1

"hide" == "remove... from view"
– Niet the Dark Absol
Commented Apr 19, 2012 at 21:26

Add a comment |

MrShmee · Accepted Answer · 2012-04-19 22:23:53Z

0

Be careful using display: none; on elements that can contain text. You could find yourself getting into SEO problems.

answered Apr 19, 2012 at 22:23

MrShmee

1752 silver badges12 bronze badges

Add a comment |

3 Answers 3