[OSM-dev] [OSM-talk] rails port live

David Earl david at frankieandshadow.com
Mon May 7 12:15:08 BST 2007



> -----Original Message-----
> From: talk-bounces at openstreetmap.org
> [mailto:talk-bounces at openstreetmap.org]On Behalf Of SteveC
> Sent: 05 May 2007 18:05
> To: OSM
> Subject: [OSM-talk] rails port live
>
> * slippy map doesnt show in IE7. Sorry, none of us have windows or
> IE. If you do, please feel free to fix it.
> * slippy map a bit broken in Safari. I think johnM has a fix for this
> in progress.


I've got a fix for this, but, as Douglas Adams said 'you aren't going to
like it'. But though it is a bit long, you can just copy and paste.

The problem seems to be that IE won't make the box any bigger than its
actual content and there isn't any content. I've tried every combination of
width, margin, position and so on I can think of and none of them do what we
need. So I've concluded the only way to get the width and height right is in
javascript, and measuring the window width and height needs variations for
different browsers.

The good news is that I've tested the following in IE6, IE7, Firefox 1.5 and
Safari 2.0.4 on Macos10.4 and they all work. I can't say how it will behave
with the insertion of tiles, but I'm assuming once it is ok to start with
the rest will work. If not, let me know and I'll work on it.

I know it is tedious, but though most of you aren't working on Windows, more
of the non-project visitors looking atthe map will be on Windowswith IE6 or
7, so it is vital they work. It's not clearthat Windows is wrong here, just
different. The CSS spec is not at all clear what should happen if you set
all four of top left right and bottom IMO.

David

--------------------

     <div id="map" style="position: absolute; top: 70px; left: 200px;
border: 1px solid black;">
        
     </div>
     <script type="text/javascript">
function windowWidth() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    return (window.innerWidth);
  } else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    return (document.documentElement.clientWidth);
  } else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
    //IE 4 compatible
    return (document.body.clientWidth);
  }
}
function windowHeight() {
  if( typeof( window.innerHeight ) == 'number' ) {
    //Non-IE
    return (window.innerHeight);
  } else if( document.documentElement && (
document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    return (document.documentElement.clientHeight);
  } else if( document.body && ( document.body.clientWidth ||
document.body.clientHeight ) ) {
    //IE 4 compatible
    return (document.body.clientHeight);
  }
}
       var map = document.getElementById('map');
       map.style.height = windowHeight() - 70 - 5;
       map.style.width = windowWidth() - 200 - 5;
     </script>







More information about the dev mailing list