It seems google adds "position:relative;" to the map_canvas div. You
can add to your css with something like:

#map_canvas { position:abosolute !important ; }

to overide thier injected style. Tested in firefox with firebug and IE
7 and it looks great.

On Jun 12, 3:06 am, MIGhunter <ad...@botdls.com> wrote:
> I know this isn't really a prototype issue but I don't know of any
> other forums.  I am trying to embed the google maps api onto a page
> and it is getting "hidden" by the css.  For the life of me I can't fix
> it.  I asked on a CSS forum and they suggested I make a function for
> the element.  So the code looks like this but it still isn't working.
> Any suggestions?http://paste.windower.net/f1c327c55
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
> <title>CSS frameset generator</title>
>
> <style type="text/css">
> /*bgein of frames setting*/
> html{
>     margin:0;
>     padding:0;
>     height:100%;
>     overflow:hidden;
>
>     _padding:110px 225px 5px 5px;
>
> }
>
> body{
>
>     margin:0;
>     padding:0;
>     height:100%;
>     overflow:hidden;
>     zoom:1;
>
> }
>
> .frame{
>     position:absolute;
>     top:0;
>     left:0;
>     right:0;
>     bottom:0;
>     overflow:hidden;
>     zoom:1;
>     _right:0;
>     _bottom:0;
>     _width:100%;
>     _height:100%;
>     _position:relative;
>
> }
>
> .frame-bd{
>   zoom:1;
>
> }
>
> #main-header{
>     overflow:hidden;
>     position:absolute;
>     width:100%;
>     height:100px;
>     top:0;
>     left:0;
>     _zoom:1;
>     _overflow:visible;
>     _padding:0 230px 0 0;
>
> }
>
> #main-header .frame{
>
>   overflow:auto;
>   _padding:0 0 0 230px;
>   _zoom:1;
>
> }
>
> #main-header .frame .frame-bd{
>   zoom:1;
>   _margin:0 0 0 -230px;
>
> }
>
> #main-footer{
>     overflow:hidden;
>     position:absolute;
>     width:100%;
>     height:0px;
>     bottom:0;
>
>     left:0;
>     z-index:10;
>     _zoom:1;
>     _overflow:visible;
>     _padding:0 230px 0 0;
>
> }
>
> #main-footer .frame{
>   overflow:auto;
>   _padding:0 0 0 230px;
>   _zoom:1;
>
> }
>
> #main-footer .frame .frame-bd{
>   zoom:1;
>   _margin:0 0 0 -230px;
>
> }
>
> #pri-main{
>
>     overflow:hidden;
>     position:absolute;
>
>     top:105px;
>     left:225px;
>     right:5px;
>     bottom:5px;
>     z-index:2;
>
>     _top:105px;
>     _bottom:auto;
>     _height:100%;
>
> }
>
> #pri-main .frame{
>   overflow:auto;
>
> }
>
> #pri-sub{
>         overflow:hidden;
>         position:absolute;
>         height:0px;
>         top:105px;
>         left:225px;
>         right:5px;
>         z-index:1;
>
>         _botom:0;
>         _width:100%;
>
> }
>
> #pri-sub .frame{
>   overflow:auto;
>
> }
>
> #sec-main{
>
>     overflow:hidden;
>     position:absolute;
>     width:220px;
>
>     top:105px;
>     bottom:5px;
>     left:0;
>     z-index:4;
>
>     _height:100%;
>     _bottom:auto;
>     _padding:0 0 5px 0;
>
> }
>
> #sec-main .frame{
>
>     overflow:auto;
>     _padding:0 0 5px 0;
>
> }
>
> #trd-main{
>
>     overflow:hidden;
>     position:absolute;
>     width:0px;
>
>     top:105px;
>     right:0;
>     bottom:5px;
>
>     z-index:4;
>
>     _height:100%;
>     _bottom:auto;
>     _padding:0 0 5px 0;
>
> }
>
> #trd-main .frame{
>      overflow:auto;
>     _padding:0 0 5px 0;
>
> }
>
> /*My Customized Theme*/
>
> body{
>         font-size:0.78em;
>         font:normal 0.78em/150% "verdana","monospace";
>         background:buttonface url(metal-solid.gif);
>
> }
>
> .frame{
>   background:#fff url(frame-shadow.gif) 0 0 no-repeat;
>   _background-attachment:fixed;
>
> }
>
> /*Free HedgerWow Style*/
>
> li{
>   _vertical-align:top;}
>
> .mod{
>
> }
>
> .mod .bd{
>   padding:12px;
>
> }
>
> a.valid{
>   font:0/0 Arial;
>   text-indent:-5000px;
>   display:block;
>   width:88px;
>   height:33px;
>   margin:4px 0;
>   background:#ccc url(http://www.w3.org/Icons/valid-xhtml10) no-
> repeat;
>
> }
>
> a.generate{
>   padding:12px;
>   display:-moz-inline-box;
>   display:inline-block;
>   color:#222;
>   background:buttonface;
>   border:solid 1px buttonshadow;
>   border-top-color:buttonhighlight;
>   border-left-color:buttonhighlight;
>   margin:4px 12px 4px 0;
>   vertical-align:top;
>
> }
>
> a.generate:hover{
>   border:solid 1px buttonshadow;
>   border-right-color:buttonhighlight;
>   border-bottom-color:buttonhighlight;
>
> }
>
> h1,h2,h3,h4{
>         margin:0;
>
>         color:#fff;
>         font-size:small;
>         padding:5px;
>         font-weight:bold;
>         letter-spacing:1px;
>         background:#444 url(metal-solid-dark.gif);
>         opacity:0.7;
>         zoom:1;
>         filter:alpha(opacity=70);}
>
> p{
>         margin:3px 0;
>         color:#666;
>
> }
>
> </style>
> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
> <script type="text/javascript" src="http://maps.google.com/maps/api/js?
> sensor=true"></script>
> <script type="text/javascript">
>  window.onload = displayGoogle;
>  function displayGoogle(){
>    var google_wrap = document.getElementById("map_canvas");
>    google_wrap.style.overflow="default";
>    /* or use any other values except HIDDEN */
>
> }
>
>  function initialize() {
>     var latlng = new google.maps.LatLng(39.2398190, -86.5133859);
>     var myOptions = {
>       zoom: 13,
>       center: latlng,
>       mapTypeId: google.maps.MapTypeId.ROADMAP
>     };
>     var map = new google.maps.Map(document.getElementById
> ("map_canvas"), myOptions);
>   }
>
> </script>
>
> </head>
> <body onload="initialize()">
>
> <div id="doc">
>
>         <!--main-header-->
>         <div id="main-header">
>              <div class="frame">
>                 <div class="frame-bd">
>
>     <!--My HTML-->
>       <div class="mod">
>         <div class="hd">
>           <h2>Header</h2>
>
>         </div>
>         <div class="bd">
>            <p>in sapien eget erat sodales viverra. Proin pulvinar
> interdum nibh. Proin ultrices gravida dui. Ut dapibus, dui a gravida
> dictum, nisi mi fermentum risus, sed auctor felis elit eu quam.
> Curabitur laoreet. Nullam tristique justo non metus. Sed scelerisque.
> In hac habitasse platea dictumst. Praesent feugiat mauris a elit
> gravida posuere. In consequat magna egestas lacus. Nam quis mauris.
> Integer tempor augue et odio. Suspendisse sodales, libero quis
> fermentum pretium, nibh augue rhoncus lectus, eget venenatis nulla
> lectus in dui. Sed egestas rutrum tortor. Vestibulum ante ipsum primis
> in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum
> sem purus, lobortis vitae, hendrerit non, porttitor ac, velit.
> Pellentesque fringilla. Vivamus bibendum interdum turpis. Duis est
> urna, scelerisque in, cursus in, blandit vel, augue. Etiam a massa
> eget quam interdum accumsan. Curabitur tincidunt sagittis justo.
> Phasellus mi est, nonummy ut, ultrices eu, fringilla sit amet, purus.
> Fusce sapien lorem, congue id, sagittis ut, cursus eu, ipsum. In a
> erat porttitor mi cursus dapibus. Sed lobortis elit at tortor. Proin
> massa augue, hendrerit quis, gravida sit amet, tempor id, mauris.
> Etiam et velit at pede euismod elementum. Praesent pretium, lectus eu
> luctus volutpat, justo libero ultrices libero, nec eleifend eros mi
> eget justo. Nullam vitae massa eget purus facilisis viverra</p>
>         </div>
>       </div>
>     <!--//My HTML-->
>
>                 </div>
>        </div>
>         </div>
>         <!--//main-header-->
>
>   <!--pri-->
>   <div id="pri">
>
>         <!--pri-main-->
>         <div id="pri-main">
>
>             <div class="frame">
>                 <div class="frame-bd">
>
>       <!--My HTML-->
>       <div id="intro" class="mod">
>       <div class="hd">
>       <h1>100% CSS Frameset Layout</h1>
>       </div>
>       <div class="bd">
>
>  <div id="map_canvas" style="width:50%; height:50%"></div>
>
>       </div>
>       </div>
>       <!--//My HTML-->
>
>                 </div>
>             </div>
>
>         </div>
>         <!--//pri-main-->
>
>     </div>
>     <!--//pri-->
>
>     <!--sec-->
>     <div id="sec">
>
>         <!--sec-main-->
>         <div id="sec-main">
>             <div class="frame">
>
>                 <div class="frame-bd">
>
>     <!--My HTML-->
>       <div class="mod">
>         <div class="hd">
>           <h2>Header</h2>
>         </div>
>         <div class="bd">
>            <p>in sapien eget erat sodales viverra. Proin pulvinar
> interdum nibh. Proin ultrices gravida dui. Ut dapibus, dui a gravida
> dictum, nisi mi fermentum risus, sed auctor felis elit eu quam.
> Curabitur laoreet. Nullam tristique justo non metus. Sed scelerisque.
> In hac habitasse platea dictumst. Praesent feugiat mauris a elit
> gravida posuere. In consequat magna egestas lacus. Nam quis mauris.
> Integer tempor augue et odio. Suspendisse sodales, libero quis
> fermentum pretium, nibh augue rhoncus lectus, eget venenatis nulla
> lectus in dui. Sed egestas rutrum tortor. Vestibulum ante ipsum primis
> in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum
> sem purus, lobortis vitae, hendrerit non, porttitor ac, velit.
> Pellentesque fringilla. Vivamus bibendum interdum turpis. Duis est
> urna, scelerisque in, cursus in, blandit vel, augue. Etiam a massa
> eget quam interdum accumsan. Curabitur tincidunt sagittis justo.
> Phasellus mi est, nonummy ut, ultrices eu, fringilla sit amet, purus.
> Fusce sapien lorem, congue id, sagittis ut, cursus eu, ipsum. In a
> erat porttitor mi cursus dapibus. Sed lobortis elit at tortor. Proin
> massa augue, hendrerit quis, gravida sit amet, tempor id, mauris.
> Etiam et velit at pede euismod elementum. Praesent pretium, lectus eu
> luctus volutpat, justo libero ultrices libero, nec eleifend eros mi
> eget justo. Nullam vitae massa eget purus facilisis viverra</p>
>         </div>
>
>       </div>
>     <!--//My HTML--
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to