How to style a Javascript snippet

Question

I want to embed this Javascript snippet (webform from AWeber) into my website: <script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"></script>

My site uses the style p { line-height: 1.5em; }. Unfortunately this is also applied to the Javascript snippet and makes it look stupid.

How can I tell the Javascript snippet to use a line-height of 1em instead of 1.5em?

I tried this but it doesn't work:

<p style="line-height: 1em;">
<script type="text/javascript" src="http://forms.aweber.com/form/49/522310949.js"   
</script>
</p>

I also considered using Javascript (document.getElementById('p').style.lineHeight = '1 em';) to change the CSS, but as I understand Javascript modifies the whole website and not only one element...

Can you please help? Thanks in advance!

How does the HTML that the JS adds to your website look like? (Consider making an example on something like jsFiddle so we could actually see the problem.) — millimoose
– millimoose, Commented Nov 23, 2011 at 14:42
Your SCRIPT element is at this point a black box - it's not possible to answer your question until you explain what that script does. — Šime Vidas
– Šime Vidas, Commented Nov 23, 2011 at 14:47
Thanks. It's solved now (see comments below). The reason why you don't see the webform now is that I just switched it from an inline form to a lightbox (which pops up only after 10 minutes). — stefahn
– stefahn, Commented Nov 23, 2011 at 15:11

bezmax · Accepted Answer · 2011-11-23 14:44:01Z

1

div.af-form {
    line-height: 1em;
}

In case you need more styling, I see that your generated block also uses these styles: af-header, af-body, af-footer, af-element and af-textWrap.

However, if you need a more universal solution, refer to @Pointy's answer.

answered Nov 23, 2011 at 14:44

bezmax

26.3k11 gold badges55 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stefahn Over a year ago

Thank you so much! div.af-form p { line-height: 1em; } works fine!! :)

Pointy · Accepted Answer · 2011-11-23 14:58:46Z

1

Putting the form inside a <p> does not make sense, as <p> cannot contain block-level elements. Use a <div> instead:

<div style='line-height: 1em;'>
  <script src = " ... "></script>
</div>

As @Max implicitly noted, it'd be "nicer" to add CSS to style the content.

You can use Firebug or the Chrome/Safari developer tools to examine the styles of "live" page elements. That can help you figure out the reasons that particular elements look a particular way, and it also lets you play around with alterations to the styles.

edit maybe something like:

div.af-form p { line-height: 1em; }

edited Nov 23, 2011 at 14:58

answered Nov 23, 2011 at 14:43

Pointy

415k62 gold badges600 silver badges631 bronze badges

3 Comments

stefahn Over a year ago

I tried this before but it didn't solve the issue. The part in the webform which uses <p> has still 1.5em instead of 1em. Any other ideas?

Pointy Over a year ago

Override that style with a more-specific CSS rule of your own.

stefahn Over a year ago

Thank you so much! div.af-form p { line-height: 1em; } works fine!! :)

Collectives™ on Stack Overflow

How to style a Javascript snippet

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related