Help! Cross Browser Issue

**centenial** · 08-08-2006, 03:15 PM

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

**jscheuer1** · 08-08-2006, 03:59 PM

There is some other problem in Opera, with the map showing up to begin with that has nothing to do with the layout. Try this, I cannot test in Safari, works in IE and FF:

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 sizeIt(){
document.getElementById('theTable').style.height=document.getElementById('theBar').style.height=window.innerHeight-316+'px';
}
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);
if (window.innerHeight){
sizeIt();
onresize=sizeIt;
}
}
</script>
//]]>
</script>
</head>
<body onload="onLoad()">

<table id="theTable" 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 id="theBar" 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>

Thread: Help! Cross Browser Issue

Thread Tools

Search Thread

Help! Cross Browser Issue

Bookmarks

Bookmarks

Posting Permissions