I have coded CSS to get our template to work in Firefox, which it does. However, when I test the page in IE, the positioning is way off. The template is very simple, a banner with a left navigation and content area. In order to get the content at the top of the HTML, we use div's and position the elements accordingly. Only the banner is positioned with absolute, the menu and content are not because there is a pull out menu that does not work correctly with absolute positioning. However, in Firefox, I am able to get the sections to line up correctly using the top element.
To see the page working in Firefox (and not working in IE), navigate to:
You can see a working template (in tables, not divs and css) here: http://www.goshoppingaroundtheweb.com/
This gives you the idea of what I was trying to mimic in CSS.
If you look at the CSS, you will see that there is a div for the banner, some header text (which is empty), a wrapper for the content that contains a div for the menu and a div for the content. The banner is absolute position, but for some reason in IE, it is way off center. The menu is also positioned strangely in IE, though it appears the content is fine.
There is also a global wrapper that centers the page, and this may be the problem. I center using auto margins.
Does anyone have any ideas on how I can alter the CSS to work properly in Firefox & IE or what changes I could make to an IE-only stylesheet that I can include? Thanks in advance for any assistance.