template is restricting my div javascript overlay

<style type="text/css">
#overlay {
    background-color: #ccffcc;
    display: none;
    margin-left: -400px;
position: absolute;
top: -250px;
left: 50%;
width: 800px;
height: 500px;
visibility: visible

}

#container{

    color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block


}
</style>
<script type="text/javascript" src="swfobject/swfobject.js"></script>

<script type="text/javascript">
//<![CDATA[


function hide() {
    document.getElementById("overlay").style.display = "none";
}

function show() {
    document.getElementById("overlay").style.display = "block";
    swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");




}



//]]>
</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg/div>

 <a href="#" onclick="hide();">Click me/a> to close.</div>/div>

<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>

Sorry my code is messed up below because I want to show html here.

ok I've finally got an overlay that centers in the browser with my flash movie.

But the problem is that these I create resides with other containers when I add this code to my school's cms templates.

How do the "jquery" or other javascript overlays overcome this?

Essentially the css becomes irrelevant because of the container styles in the template.

Thanks

ansaurus

tags:

views:

answers:

template is restricting my div javascript overlay

related questions