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

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.....

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.

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

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!

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

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...

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.

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

Check here:

http://munuviana.mu.nu/archives/033561.php

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.

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

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

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

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

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.

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.

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.

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

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

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