How to get rid of an automatically generated span via CSS (un-display)?

I am using the Drupal ShareThis module. Unfortunately, a recent security release of this module has added a span in the generated code and it disrupts the layout of my page major. Everything was working fine before.

There is no option to control the generation of this code:

<span class="chicklets twitter">&nbsp;</span>

Is it possible to remove/not display this span code via CSS? If yes how?

I tried:

.chicklets twitter {
    display:none;
}

but no success. I am not a CSS expert. Thanks.

UPDATE

Here is a screen shot from FireBug:

enter image description here

I have been trying the suggested solutions:

span.chicklets {
    display:none;
}

The above completely removes all ShareThis buttons (which can be explained by the following issue):

span.chicklets.twitter {
    display:none;
}

The above removes the button, but the corresponding span still appears in FireBug as shadowed (see next).

enter image description here

Of course, I need to keep my button. What could cause this?

P.S.: Nevermind, I'll discuss this extra issue in another question if necessary.

Upvotes: 1

Views: 8450

Answers (3)

Jeff B
Jeff B

Reputation: 30099

If you want to set the style of an element with two classes specifically, combine them with no spaces. The dot notation means "class", so you would put a dot before each of them and concatenate them:

span.chicklets.twitter {
    display: none;
}

As @AndrewBrock suggested, you can also just use one of the classes, as long as you know that the single class won't affect other span elements in an undesirable manner.

If you need the span to maintain the button, but don't want the span to take up space, then change it to this:

span.chicklets.twitter {
    width: 0px;
}

Upvotes: 4

Geremy
Geremy

Reputation: 2445

If you have jQuery running this will do it (remove it versus hide it):

$(".chicklets.twitter").remove();

Upvotes: 0

Andrew Brock
Andrew Brock

Reputation: 1364

chicklets and twitter are 2 separate classes. You only need to set the display:none in one of these.

span.chicklets {
    display:none;
}

I have restricted this to only span elements with the class chicklets. Note that this could affect other span elements which also have the chicklets class

Upvotes: 3

Related Questions