Header ads

**Wet Set** · June 2, 2021, 04:41 PM

I believe it's happening because the top horizontal ad is in an iframe, which has a set width. I tried it with no set width, but that didn't help.

If anyone is proficient enough at web design, and knows a suitable inline alternative to an iframe, please let me know.

**Wet Set** · June 2, 2021, 05:18 PM

I've done a Google search and it seems this is a common problem with iframes. The solution is apparently to "add a single containing wrapper, and some CSS, to ensure that all embedded content contained in an iframe resizes with the browser's window."

Problem is... this is all a bit beyond my abilities. I would be grateful if someone could put there hand up. Free movies?

**Wet Set** · June 2, 2021, 09:58 PM

Beats me! Just spent several hours working on it, and I can get it so the the ads don't extend out on an iPhone, but then the ad itself doesn't fully display. This will need someone way more skilled than me!

PS. The ads display fine on a test html page, even on an iPhone in both orientations, so there must be something in the Forum CSS that messes it up.

**Peevert** · June 3, 2021, 06:27 AM

If the forum CSS is the problem, you should be able to override it by using <style> css goes here </style> tags in the iframe document. Even better, add CSS directly to the line containing the image.

IIRC, in general, CSS processes in this order:
3. External CSS stylesheet
2. <style> tag in document
1. inline CSS as described above

i’m dealing with an illness in the family right now, but if I have some free time later, I’ll take a look at it for you tonight.

**Wet Set** · June 3, 2021, 08:22 AM

I did try inline CSS, but not in the way you suggest. I put the CSS in two <div> tags, one nested inside the other, and the iframe inside both.

i copied the CSS from a site explaining how to display Google maps in an iframe, among other similar things,

I tested it first with ads-testing.html as a stand alone page on WS, and it looked fine. But when I copied the same code inside the Forum, it didn’t work the same. The overflow was fixed but the ad was cropped.

**Peevert** · June 3, 2021, 09:17 AM

I haven’t had a chance to look at it yet, but I would try placing the CSS, using percentages, inside the actual image tag for the ad.

**Wet Set** · June 3, 2021, 09:59 AM

There is no rush. Whenever you have time. Look after your family first. Maybe look at the source code for the testing page I uploaded (see above) and you’ll see the CSS I put in the <div> tags. Not sure how to put it in the image tag instead - I didn’t know you could.

**Peevert** · June 4, 2021, 04:40 PM

Originally posted by Wet Set View Post

Not sure how to put it in the image tag instead - I didn’t know you could.

I'm pretty sure you can put <style> data in just about any tag (well, maybe not a <br>) :P

Here's what works on my page:

From the CSS external style sheet:

Code:

/* External Style Sheet */

html
{
background-color:#000000;
width:100%;
margin-left:auto;
margin-right:auto;
}

header
{
background-color:#000000;
width:100%;
max-width:1024px;
margin-left:auto;
margin-right:auto;
}

body
{
background-color:#000000;
width:100%;
max-width:1024px;
margin-left:auto;
margin-right:auto;
}

etc...

And from the inline CSS on any given page:

Code:

<body>
    <header>
        <a href="index.html"><img src="logo.png" alt="Logo Image" style="max-width:19%;height:auto;" /></a>
        <a href="index.html"><img src="a.png" alt="whatever" style="max-width:79%;height:auto;" /></a>
    </header>

etc...

So yes, you can include style data in the <img> tag, and it can be percentages.

Hope that helps!

**Wet Set** · June 4, 2021, 06:21 PM

Thanks. I’ll try some CSS in the <img> tag over the weekend and see what happens.

**Wet Set** · June 5, 2021, 09:03 AM

I have tried putting the CSS with percentages in the <iframe> tag and also the <img> tag, and the result is identical to putting it in a nested <div> tag. So wherever I put it, the result is the same - works perfectly on a stand alone html page, but when I put it in the Forum, the ad image gets cropped. That’s even with height and width at 100% in the <img> tag. It’s very weird. I cannot fathom how the Forum code, no matter what it might have in its style sheets, can affect the display of this one image inside the iframe. But that has to be the conclusion - the inline CSS is correct - it’s the Forum code that is somehow interfering.

i only have an iPhone. I wonder if it’s the same on android.

**Peevert** · June 5, 2021, 10:22 AM

You might want to try using the "!important" option in the image tag, it overrides everything else

Code:

[SIZE=14px]<p style="background-color: purple !important;">Sample Text</p>[/SIZE]

There's an article on it here:

https://www.w3schools.com/css/css_important.asp

PS: Oops sorry.
PEE S: Your bulletin board added the size tags, just ignore those.

**Wet Set** · June 5, 2021, 12:52 PM

Thanks for the suggestion. I wasn’t sure which attribute to add it to, so I tried the width and height 100% in the <img> tag. Those seemed the most relevant. Unfortunately it didn’t help.

i think I’ll just leave it the way it is for now - ads don’t display properly on iPhones (too bad!) but at least they don’t overflow now and distort the Forum layout.

**Peevert** · June 5, 2021, 01:08 PM

Good point, it's not a disaster.

Pee Pee S: (so to speak)

You could do style="max-width:79%; height:auto;" in the <img> tag and style="max-width:19%; height:auto;" in the <input> tag (the search box).

**Wet Set** · June 5, 2021, 02:02 PM

You mean all that PPS relates to the search box? There are 2 search boxes, one right at the top for the whole forum, and a smaller one for the thread. Which one are you referring to?

Either way, I doubt I have access to the search box code. That is most likely buried deep in places no man (meaning me) would dare to tread. I don’t want to try fiddling with the default template for fear of screwing it up.

Header ads

Announcement

Yo Paul

Yo Paul

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Links of interest