View Full Version : Layouts drawing vastly different in IE/FF

12-06-2005, 05:33 PM

I'm working on a site and can't seem to fix a number of issues. It's my first time jumping into the realm of css - I've always used the rather archaic Photoshop/Slice/Export As Tables method. It's never been for anything professional, so I never saw the need to learn. But I need to get with the times ;p

Anyway - I guess I'll list things in order of importance...

Layout looks completely different in Firefox and IE.

FF: http://img353.imageshack.us/my.php?image=jdlff1ub.jpg Right.
IE: http://img353.imageshack.us/my.php?image=jdlie5fc.jpg WRONG.

The menu and Flash/FF link divs all reside in a parent leftContainer, while the content window/bottom menu divs reside in a parent rightContainer. FF recognizes this and draws it correctly, IE doesn't. It's probably due to positioning, but I can't figure out why.

Header Issues:

- The flash animation is in a flashContainer div - I'd like to dynamically resize due to issues at 800x600 (I know it breaks the background image, but thats an easy fix). I set the div to overflow:hidden, with the thought that it would cut off whatever is left of the swf. No matter what, it displays at full size. Is this a css issue or a swf issue? It's not necessary, but I'd like to keep it.

- The "blender" jpg that transitions the swf background to the header background does not align with the div in FF, producing a small vertical gap. In IE, the gap remains but seems to be transformed to a small horizontal gap below everything. Probably something to do with the swf as well.

URL: http://www.jdl-systems.com/about.htm
CSS: http://www.jdl-systems.com/jdlcss.css

Any help is greatly appreciated :)

andrew w peace
12-06-2005, 07:52 PM
#leftContainer {
width: 15%;
display: inline;
position: absolute;
margin-top: 10px;
margin-left: 15px;
margin-bottom: 10px;
height: 100%;

This is a tough one, but the first thing that jumped out at me was that position: absolute;

Why is it absolute, and yet you give it no coordinates?

Another thing you might want to try is XHTML strict rather than HTML loose. This often fixes all those IE bugs. However if your coding isn't clean it might just cause more...