Browser Compatibility Issues

[steviedifranco]

I've got an issue between IE & FF (shocker). Take a look at this page in both browsers:

http://www.oterohomes.com/index.php

The <div> floats just fine in IE, but it doesn't in FF. Does anyone know how to make it float in FF? Is it possible? Do you see any other solutions?

The picture is supposed to scroll and is controlled by the user, so I needed to use the javascript that is there. So simply floating the picture doesn't work. Any ideas? Does anyone perhaps have a different rotating picture script?

Thanks!

[Marble]

Well first off if you look at your source code you've essentially got 3 web pages in one. You first declare a html 4.01 transitional header with some output, then another html header with an unkown header type written by microsoft word or something, then you end the html and add some more html with another ending.

So know wonder you are having lots of issues! =D But 1st thing you need to do is write up a proper html page, stay far far far away from Microsoft proprietary markup because, well it won't look correct in anything that isn't IE.

My big piece of advice with using styles is start with proper page formatting and use a linked or @import stylesheet to work on your sites. The methods you are using goes against why CSS was invented.

If you need some help with anything post some questions and some people here will help out...

[steviedifranco]

The reason for the additional page within it is because I'm allowing my customer to update the webpage using Microsoft Word, something they are comfortable with. Its a long story, but nonetheless, this problem should still not be happening. I seem to recall that <div>'s can't be floated in FireFox. Is there a way to do it?

[Marble]

Try putting clear: both or clear: left for the image style as well.

If that doesn't work then wrap the text, header, and image around a div and text-align left the text.

[Marble]

Looking at it more, you shouldn't need that div wrapping the image anyways... See if the image floats properly without a div around it.