Website coding problem
 

Hi Folks;

I never cease to be amazed at the skills possessed by FTers, to I'll put this out here in the hopes that someone with some knowledge of web development and CSS can help me in my volunteer efforts.

I am a volunteer webmaster for a group of Rotary Clubs, and have spent most of my spare time since as long as I can remember preparing a re-launch of our website backed with a new database.

I have a problem which is driving me around the bend. Validating hasn't fixed it, as it does 60% of my intractable problems. I haven't been able to find anything on the net - perhaps haven't hit on the right keywords to describe the problem.

Essentially, on a small number of pages, including my index page, some users in IE find that the main body content drops vertically to just below the bottom of the menu in the left hand navigation div.

After many hundreds of hours developing and tweaking the database and website, I can't launch because some users will not be able to see it properly.

Can anyone tell me what I've done wrong?

My development site is http://d7040.rotarynepean.ca. You can recreate the problem in IE by narrowing the window until the content drops. Doesn't seem to be a problem in Firefox.

Many many thanks in advance for any help you can provide.

there is a control on the page that when the page becomes narrow forces the image and text to drop down below it. I hope this is the problem you are describing. Perhaps take a screen shot of good and bad and put that on Flickr or something.

E

I believe it it this element
<div style="float:right;padding-left:0em;margin:0px 0px 10px 10px;"><object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/_Un133Qt3kA&rel=0&color1=0x2b405b&color2=0x6b8ab6& border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/_Un133Qt3kA&rel=0&color1=0x2b405b&color2=0x6b8ab6& border=1" type="application/x-shockwave-flash" wmode="transparent" width="260" height="225"></embed></object></div>

Unfortunately that isn't it. I've tried eliminating that code and the problem persists.

If anyone has any further ideas, I'd be grateful.

Your current layout requires a certain minimum window width: ~1100 px in MSIE, ~800 px in Mozilla-based browsers (incl. Firefox).

When the browser window width is smaller than the above width, your DIVs start getting wrapped-around, with each type of browser doing it in a slightly-different manner...

Do you have any idea how I can reduce that minimum width in IE, or make it behave like it does in IE?

Try to avoid the use of "float:right" for your DIVs. For example: