June 15, 2005

Help with Banner overlay

I hope this is the right place! If not, please direct me to the place to go put out questions on fixing my blog. I'll put the details of my problem in the extended entry.

It seems that when I open my http://onehappydogspeaks.mu.nu in firefox I get the following:

Free Image Hosting at www.ImageShack.us

Notice that the entry is overlaying the banner. I have tried setting the width/height of the banner to a %, and a few other easy items. None of them work. If I resize the window manually AFTER seeing this, it goes away. It does not seem to happen in Internet Explorer.

Does anyone know how to stop this? Thank you!

Posted by vw bug at June 15, 2005 11:38 PM

I checked it in IE and it worked fine. I tried in Firefox and it did what you have in your image. I clicked "Show Comments" and it straightened out. Now I can't get it to overlap your banner anymore. So it's either been fixed since you posted this or I'm special :)

Posted by Sissy at June 16, 2005 01:18 AM

If you reload the page at all it fixes itself.

Turn off FF, Sissy and restart it, then load VW's page. It will be back. I tried fixing it by making VW's code look exactly like mine except for the rotating banners, but that didn't do it either.... I've never had that problem, so I don't know what is making it do that.....

Posted by caltechgirl at June 16, 2005 05:05 AM

I've seen similiar things to this...most notably on my horizontal blog. I haven't ever really figured out what the problem is, but I'm pretty sure I know what's doing it...and I don't think there's anything that can be done (not really sure).

You main section (in the content div) is positioned absolutely without coordinates. I think as Firefox loads the page, it grabs that content before it finishes downloading the image for the header, so it draws it right when it finds it. Once the entire page has been loaded (when comments, resize, or anything else happens), it knows how big the image is, so it places the content in the right place.

I'm not sure if this will fix your problem, but you could try adding an exact location for the content section in the style sheet -- top: 370px; seems to be about right.

Posted by Ogre at June 16, 2005 10:35 AM

Oh wait, nevermind. I see you're resizing the banner based on the size of the window. Setting top won't help at all...

Posted by Ogre at June 16, 2005 10:37 AM

Ogre: I can easily change that. I was doing that to see if it helped. I'll try the top 370px and see if it works. Thanks!

Posted by VW Bug at June 16, 2005 12:45 PM

Got an idea - specify the pixel height/width of the banner. Firefox will know how much space to leave for it then.

Posted by Jim at June 16, 2005 02:46 PM

I'm not sure if there's a way to adjust the banner size on the fly and have Firefox NOT try and load as quickly. If that is indeed the problem (as it certainly appears to be), I can see 3 possible solutions:

1. Fix the banner size. If it's fixed at one size like Jim suggests, everything else will fall in line.
2. Pause the page and force it to load the banner in it's entirely. Not a great idea, as it slows down everyone loading the page.
3. Do some weird things like use php to determine the size of the banner combined with javascript to come up with a variable banner size before the page loads. Really complex, but possible.
4. I'm not sure it's possible, but perhaps after the entire page loads you can execute some javascript function that will force the sections to resize, like adjust the browser width by 1 pixel.

I think #1 is your best option, but you do lose the resizing banner...

Posted by Ogre at June 16, 2005 05:16 PM

If you grab the rotating banner code from Madfish Willie or one of the others, you can tweak it to not only randomly select a banner, but the banner size by adding a couple of arrays to the loop.

I did this just to play around, I'll see if I can find the code and post it if you need it.

Posted by Ted at June 17, 2005 12:59 AM

Ted: I would appreciate if you would post the code. I'm still new at this on Munuviana and appreciate your help.

Posted by VW Bug at June 17, 2005 02:23 AM

Check here:


Posted by Ogre at June 17, 2005 02:40 AM

Ogre's got the spot right there. All I did was initialize a couple of extra arrays called Height and Width and loaded them with the appropriate values in pixels for each banner. Then you access them by using the same random number as you use to select the banner. So, for example, banner(3) gets loaded using height(3) and width(3)...

I'll look for the code. :D

Posted by Ted at June 17, 2005 02:28 PM

I haven't forgotten, but the code sample is at work and I won't be in the office until tomorrow. Patience.

Posted by Ted at June 20, 2005 12:16 PM

I'm not in a hurry. I am still playing with fonts and gifs.

Posted by VW Bug at June 20, 2005 12:34 PM

A suggestion to try; on your page you have the following up for the banner (squared brackets instead of angles):

[center][a href=""][img src="http://onehappydogspeaks.mu.nu/archives/header_final.gif" width="70% height="70% alt="One Happy Dog Speaks"][/a][/center]

Get rid of the "a href" since you aren't using it, and the associated "/a" too. Next, wrap the entire bit from [center] to [/center] in its own [div] tag... like so:

[div width="100%"][center][img src="http://onehappydogspeaks.mu.nu/archives/header_final.gif" width="70% height="70% alt="One Happy Dog Speaks"][/center][/div]

That should force the remaining divs below the banner div.

Also, get rid of those width="70% and height="70% (notice you forgot to close quotes too). Put the actual pixel values in if you know them or leave it out altogether.

See how that works and we can go from there.

Posted by Ted at June 20, 2005 08:57 PM

Hi Ted: Actually the close quotes are there. Not sure why you aren't seeing them. I did what you suggested with the [div](as well as taking out the width and height) and it still didn't work. Then I removed the [a href] and it worked. So I went back and removed the [div]. It still works. I'm thinking it was the a href. Odd. But will continue testing it and see if it continues to work. Thanks for the help!!!!

Besides, I ended up with two banners and will probably play around with your code above.

Posted by VW Bug at June 20, 2005 11:09 PM

I lied. I just had to reboot my pc and when it came back up and I went into onehappydogspeaks.mu.nu the problem was still there. ARGHHHHHHHHHHHHHHHHHhhh.

Will play with the above suggestions and see if I can get it to work.

Posted by VW Bug at June 21, 2005 12:23 AM

Hmmm... Ok, then howsabout this (it's what I do), put the banner into a table, like so:

[div id="banner"]
[table cellpadding="6" cellspacing="2" border="0" width="100%"]
[td rowspan="1"] [img alt="text description" src="http://rocketjones.mu.nu/images/rjlogo2.jpg" width="277" height="266" border="0"]

Of course, you'll adjust path and height and width. When I took an XHTML class, the biggest problem everyone had was positioning things.

Posted by Ted at June 21, 2005 12:56 AM
Live Comment Preview
Post a comment

Remember personal info?