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
-~----------~----~----~----~------~----~------~--~---
