Making my page cross browser

[centenial]

Hi,

I need a CSS Expert! I have a template that works perfectly in Internet Explorer, but doesn't work well in all the other browsers.

Here is the template: http://www.gmaptools.com/redemo/format.html

(The scrollbar located on the right of the page doesn't contain to 100% height in the other browsers)

The entire page must stay at 100% height and 100% width, and work in the other browsers the same way it works in Internet Explorer.

Does anyone know why it isn't working in the other browsers?

I need it to work in:
1. Internet Explorer (Windows)
2. FireFox (Windows & Mac)
3. Opera (Windows)
4. Safari (Mac)

I really appreciate any assistance you can give me.

Thanks in advance,

[felgall]

All modern browsers with the exception of Internet Explorer will treat the stylesheet commands the same way resulting in the page looking basically the same in all of them. Internet Explorer doesn't understand all of the stylesheet commands properly and treats some differently depending on whether you have a valid doctype as the first thing in the HTML.

Steps to get a page displaying the same in all browsers.

1. Make sure it has a valid doctype.
2. Validate the HTML at www.w3c.org to make sure that there are no HTML errors that may lead to browsers interpreting what you mean in different ways.
3. Set up the stylesheet so that the page displays correctly in Firefox, Opera, and Safari
4. If the page doesn't display correctly in IE then add a second stylesheet within IE conditionals in the HTML to add the extra overrides that you need to get IE to match the modern browsers. Like this:

<link rel="stylesheet" type="text/css" href="main.css">
<!--[if IE lte 6]>
<link rel="stylesheet" type="text/css" href="ie.css">
<[endif]-->

[VIPStephan]

Fellgall is totally right except it must read
<!--[if lte IE 6]>
and
<![endif]-->