Web Design - Firefox/IE Display Problem?

Question

Hi,
I'm designing a site, and i've discovered that it displays slightly differently in Firefox than Internet explorer or Safari. The link below is the site. You can see when viewed in IE, everything is as it should be. When viewed in Firefox, the banner size flash app is lowered down a bit, which moves the layout and makes it look not so good. Does anyone know how I can resolve this?


http://www.softsystems.co.uk/adopt/


Thanks!

Answer 1

It just happens I saw no difference in my versions of those browsers...(I also tried IceMonkey and Netscape)...but that's me and my computer and my maintenance and...well...all those other variable thingies.

But I will say this: personally, I'm in favor of NOT using tables for layout. I'd go for switching to CSS and divs, like say, a wrapper for the banner, then a left div for the image with a certain percentage floated left, and a right div floated either left or right.

Alternatively a banner with a div floated left and using the photo as a background-image... and a div floated right and the movie as a background-image.

...and on, and on...

Answer 2

First, you should design and develop in Firefox, that browser is far more standard than IE will ever be. Second, you can make a conditional comment and a separate stylesheet for IE using these methods:

http://brucelawson.co.uk/2005/future-proof-your-css-with-conditional-comments/

Conditional commenting only works with Internet Explorer.

You should use a valid DOCTYPE so you can validate your code in the w3 validator. You're working in tables and have divs in your tables which is not real good to do. You dont have the flexibility as you would with just a pure div /css layout.

Your layout is very similar to this:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

You should implement that if you can, it will be much easier for you to maintain and edit.

But the browser problem can be fixed with conditional commenting, as for Safari... it looks OK to me in Safari.

Answer 3

I also encountered that problem b4, and here's my hypothesis to that:

1. the older version of firefox which is 1.5 does not totally support CSS, which is usually use in designing a web compared to IE5 or IE6.
2. The design you created maybe applies only to smaller resolutions or higher resolutions displays that can change the appearance of the design.
3. be sure to design a site or page that using percent as screen size width or height of the pics layers and whatsoever

Answer 4

first if your using what-you-is-what-you-get softwares try using layers, and actually the site depends on the size of the display