support home

Back to website
Welcome
Login  Sign up

The #iubenda-iframe * CSS rules get in the way of some simple things like using <b> in custom text

Applying a bunch of CSS rules to all descendants of #iubenda-iframe doesn't seem like a very good or safe idea.

Why does it try to reset so many CSS properties? Are all of these rules/resets really necessary?

image

One of the unwanted side-effects that applying these rules to all descendants (*) has (and there are probably others) is that it prevents common HTML tags from behaving in the normal expected way (because it overrides even the browser's default styles).

Case in point: I was trying to  make a word bold in the custom text I was using. Which should be as simple and easy as just this:

        widget_intro: `Please check your cookie settings below and <b>turn on</b> any cookies you’re happy with. …`

But, because of this rule:

image

which overrode the default style that one expects a b tag to have:

image

, I ended up having to re-apply the font-weight: bold styles back onto the  <b> (bold) tags via an inline style attribute, like this:

        widget_intro: `Please check your cookie settings below and <b style="font-weight: bold !important;">turn on</b> any cookies you’re happy with.

Yuck.

Could you please change your stylesheet so it's not so heavy-handed, so that it uses more specific selector (not *), and so that it only resets the minimum number of styles needed to achieve its goals?

Oh well, at least I found a workaround. But others who come after me might not know how...

Login or Signup to post a comment