External H1 style being overriden by my own

Get Started
1

Hi all,

I have the following problem.

I have a javascript loading an external banner on my website. The banner shows fine but they’ve made it as dynamic content and as such it makes use of the H1 tag for displaying its title.

Since my website is overriding H1’s to a specific style, it’s interfering with the banner. The banner’s H1 should be white and of a larger font size.

I’ve tried putting that section in its own div forcing a proper H1 styling but it isn’t working.

What ideas would you guys and gals have? There’s got to be a way to force it to ignore my own styling for that section.

Thanks,

2

did you try assigning classes to your h1 something like <h1 class=“headTitle”>title</h1>

3

Can you give your h1 a class or id and target that?

<h1 class="name">Title</h1>
4

Yes. I’m trying this now.

The problem is the javascript is like this (I’ve left out the uri bit above out):

document.write(‘<sc’+‘ript language=“JavaScript” type=“text/javascript” src="’+uri+‘"></sc’+‘ript>’);

I can’t put a <h1></h1> in there since if I do the banner won’t show at all.

document.write(‘<h1><sc’+‘ript language=“JavaScript” type=“text/javascript” src="’+uri+‘"></sc’+‘ript></h1>’); <— This will not work

I’m guessing they’re using the H1 because what else would they use for a title on a banner? I’m now trying H2 and P.

I’m experimenting but it’s touchy what code you stuff in there.

Thanks,

5

I got a semi-fix working for it via this:

#fixh1 h1 {
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-transform: uppercase;
margin-bottom: 20px;
}

<div id=“fixh1”>
…JS here
</div>

The text is now white instead of gray but the size is nowhere near 32px so my styling is still taking authority over the font-size but no longer the color which is strange (as this isn’t happening to any other H1/H2’s on my pages).

So 50% fixed. Looks a lot better but not stock. I don’t think I can make it into a class since I say above, it doesn’t like me stuffing more code into that JS line (the h1 class=“xyz” etc.).

6

I meant to apply the class to the h1 you are creating yourself as opposed to the one in the banner.

7

No. It doesn’t like the below before and after the JS line. It will make an impact on the font styling but causes it to go all corrupt (margins/padding and font-sizes come out of nowhere and reorder the layout). This won’t happen if encapsulating the JS inside a DIV (same code as below but modded to enable the DIV)).

<h1 class=“h1fix”>Title
…JS here
</h1>

.h1fix h1 {
color: #FFFFFF;
}

8

It should be:

h1.h1fix {
  color: #FFFFFF;
}

if it is a class applied to the h1. :slight_smile:

9

Whichever means I define the class in the CSS (h1.xxx or xxx h1) it has adverse effects on the page once rendered. Margins/padding come into play from nowhere and the H1 font and the p below it get resized as they please. Only the DIV method wants to play ball.

The only effect I can force on the banner’s H1 tag so far (via the DIV approach that is) is its color from gray to white, which is a big help but still doesn’t get it looking how the banner designers intended it to.