Question

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:

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).

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.

Answer 1

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;
}