Help! Cross Browser Issue

Forum Moderators: not2easy

Message Too Old, No Replies

Help! Cross Browser Issue

Page works in IE but not other browsers...

centenial

3:48 pm on Aug 8, 2006 (gmt 0)

Hi,

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

Here is the template: <snip>

(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,

[edited by: trillianjedi at 4:03 pm (utc) on Aug. 8, 2006]
[edit reason]
[1][edit reason] No specifics please as per TOS [/edit] [/edit][/1]

trillianjedi

4:04 pm on Aug 8, 2006 (gmt 0)

Hi Centenial and welcome to WebmasterWorld!

I'm afraid we don't allow specific URL's to be posted here (you can imagine the spam problem we'd have if we did), so you'll need to describe the problem.

The best thing to do would be to post some HTML source code, removing any specifics.

centenial

4:21 pm on Aug 8, 2006 (gmt 0)

Sorry about that - I can definitely understand the SPAM problem.

Here is the code:


<html>
<head>
<!-- localhost/ -->
<!-- <script src="http://maps.google.com/maps?file=api&amp;v=2.43&key=ABQIAAAAVLltzwLVaGQe926DmEHfChT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQj8pN6lAnBSt9hBQvHNsGp7ig3Kw" type="text/javascript"></script> -->
<!-- gmaptools.com/redemo -->
<script src="http://maps.google.com/maps?file=api&amp;v=2.43&key=ABQIAAAAVLltzwLVaGQe926DmEHfChQwPAh0R9SMc4IvhqBWY2mdYHHI8BSGuQrMjGe8wIdmyU45rdlBCyWx-A" type="text/javascript"></script>
<script type="text/javascript">
function onLoad() {
 var map = new GMap2(document.getElementById('map'));
 map.addControl(new GMapTypeControl());
 map.addControl(new GSmallMapControl());
 map.setCenter(new GLatLng(37.441944,-122.181944),10);
}
</script>
//]]>
</script>
</head>
<body onload="onLoad()"><table border="0" width="100%" height="100%" style="position: absolute; top: 0px; left: 0px">
<tr>
 <td colspan="2" style="height: 200px; background-color: blue; color: white; font-weight: bold">Header</td>
</tr>
<tr>
 <td id="left" rowspan="2">
<div id="map" style="width: 100%; height: 100%"></div>
 </td>
 <td id="right" style="width: 300px; height: 50px;">
<div style="background-color: green;">Form</div>
 </td>
</tr>
<tr>
 <td style="width: 300px;" valign="top">
  <div style="background-color: blue; height: 100%; overflow: auto">
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   Sidebar<br/>
   </div>
  </td>  </tr>
<tr>
 <td colspan="2" style="height: 50px; background-color: red; color: white; font-weight: bold">Footer</td>
</tr>
</table>
</body>
</html>

I want it to work in all browsers the way it works in IE. Does anyone know why it isn't working in FF or Opera?

HelenDev

3:24 pm on Aug 9, 2006 (gmt 0)

Firstly, you're missing a Doctype, so this won't help all browsers to behave constistently.

Second, I would advise starting again (this time using a full doctype) and designing and testing in a compliant browser, such as Firefox first.

This way, you should get much more constistent behaviour across all popular browsers, and if you do need to make any browser-specific adjustments they should be small and manageable.