Forum Moderators: not2easy
I suspect this is one of those "d'oh!" questions, but, surprisingly, I haven't had to solve this one issue before.
I'm designing a site that uses the Google Maps API to fill an entire window with a map. This is to provide an interface whereby the user drags a marker, then clicks on it to be taken to a localized search.
When the window is resized, I need the map to resize as well.
This works beautifully.
In Firefox.
IE6, however, is a different matter.
Here's the XHTML/CSS code (since I'm experimenting, the CSS is all inline. It will move to a file when I get it working):
<body onResize="SetMapSize()" onLoad="MakeMap()">
<div id="container" style="text-align:center">
<div id="bigmap" style="position:absolute;height:100%;width:100%;margin:0;top:0;left:0;bottom:0;right:0"><noscript><h1>NOT SUPPORTED</h1></noscript></div>
</div>
</body>
There's a lot of JavaScript in the file as well, but this isn't a scripting problem. It's a basic markup/css problem. If anyone wants to see the page it's on, they can ask me to SM them the URI.
The problem with IE is that the vertical dimension is zero, and I can't get the blasted <div> to stretch vertically.
I know there's a solution to this, but I'm stumped at the moment.
<Groans. Holds Head/>
<body style="height:100%;width:100%" onLoad="MakeMap()">
<div id="bigmap" style="position:absolute;height:100%;width:100%"><noscript><h1>NOT SUPPORTED</h1></noscript></div>
</body>
Thanks!
