Why is the fixed title overlapped with Youtube object?
Hi all,
I'm developping a page with a lot of graphic elements, grouped in two colums.
The page got a fixed header, that gets loaded last, so all other elements disappear under it while scrolling.
In the left column I call Youtube videos with Javascript. I shows fine, unless that in IE - but not in FF or GChrome - the images that are supposed to disappear under the title go over it.
This the page address: http://www.clermont-herault-concerts...them_media.asp
Any idea how to avoid it?
PS: I know there is another problem with that page: the mp3's in the right column aren't found by IE - but FF and GC finds them! - but I think this had another cause.
Hereunder a few elements of the html and CSS codes:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ulrike Van Cotthem, soprano, France: média son et vidéo</title>
<script src="scriptLibrary/mootools.js" type="text/javascript"></script>
<script src="scriptLibrary/imageMenu.js" type="text/javascript"></script>
<link href="CSS/Ulrike_Van_Cotthem_01.css" media="screen" type="text/css" rel="stylesheet" />
<link href="CSS/Ulrike_Van_Cotthem_header_01.css" media="screen" type="text/css" rel="stylesheet" />
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/unobtrusive_Ulrike_media_sound.js"></script>
<script type="text/javascript" src="scriptLibrary/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {
mp3: "Sound/{MP3}"
};
var params = {
wmode: "transparent"
}
swfobject.embedSWF("scriptLibrary/dewplayer.swf", "Morceau", "200", "20", "10","scriptLibrary/swfobject/expressInstall.swf", flashvars, params);
</script>
<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/8vawvfTAlaE&enablejsapi=1&rel=0&fs=1',
'ytplayer_div',
screen.width*40/100, //WAS '425',
screen.width*31/100, //WAS '344',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
</script>
<script type="text/javascript">
function ytplayer_loadvideo( id ) {
var o = document.getElementById( 'ytplayer_object' );
if( o ) {
o.loadVideoById( id );
}
}
</script>
<style type="text/css">
.thumbs {
float:left;
vertical-align:top;
width:10em;
margin:1em 0 0 1em;
text-align:center;
}
.thumbs a {
color:gray;
}
</style>
<style type="text/css">
#imageMenu ul li.media a {
background: url(images/web_ulrike_ecoutez_0405.jpg) repeat scroll 0%;
height:153px;
border:thick solid white;
}
</style>
<!--[if IE]>
<style type="text/css"> /* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
#sidebar1 { padding-top: 0px; }
#mainContent { zoom: 1; padding-top: 0px; } /* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE mogelijk nodig heeft om verschillende bugs te vermijden */
body{font-size:90%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="imageMenu">
<ul>
<li class="bio"><a href="Ulrike_Van_Cotthem_biographie.asp" id="bio">Biographie</a></li>
<li class="media"><a href="Ulrike_Van_Cotthem_index.asp" id="media">Écoutez</a></li>
<li class="repertoire"><a href="Ulrike_Van_Cotthem_repertoire.asp" id="repertoire">Répertoire des chants</a></li>
<li class="concerts"><a href="Ulrike_Van_Cotthem_concerts.asp" id="concerts">Concerts</a></li>
<li class="presse"><a href="Ulrike_Van_Cotthem_galerie.asp" id="galerie">Galerie</a></li>
<li class="contact"><a href="Ulrike_Van_Cotthem_contact.asp" id="contact">Contact</a></li>
</ul>
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{open:1, openWidth:260, border:2, onOpen:function(e,i){location=(e);}});
});
</script>
<!-- End of imageMenu-->
</div>
<!-- End of Header-wrap -->
</div>
<div id="container">
<div id="sidebar1">
<p style="font-size:larger;text-align:center">Mettez le son et démarrez l'<strong>écoute d'Ulrike <span style="font-variant: small-caps">Van Cotthem</span></strong><span style="display:none">, soprano, France</span></p>
<div id="UMS">
<table>
<tr id="repeatRow">
<td style="padding-bottom:1em"><strong>{Compositeur_prenom} <span class="smallcaps">{Compositeur_nom}</span>: <span class="u">{OEuvre}</span>: <em>{Titre}</em></strong><br />
enregistré {Enregistrement}<br />
<div id="Morceau">
<p>Pour écouter ce fragment, téléchargez <a href="http://get.adobe.com/fr/flashplayer/">la dernière version de Flash.</a></p>
</div>
<a href="sound/{MP3}"><span style="vertical-align:top"> Téléchargez-moi</span></a> </td>
</tr>
</table>
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<h1>Ulrike <span style="font-variant:small-caps">Van Cotthem</span>, soprano lyrique<span style="display:none">, France</span></h1>
<h2>Mes vidéos</h2>
<div id="ytplayer_div">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<div style="z-index:10">
<div class="thumbs"><a href="#ytplayer" onclick="ytplayer_loadvideo( '8vawvfTAlaE' );"> <img src="http://img.youtube.com/vi/8vawvfTAlaE/default.jpg" alt="Cosma: Cantate 1209" /></a><br />
Cosma: Cantate 1209</div>
<div class="thumbs"> <a href="#ytplayer" onclick="ytplayer_loadvideo( 'YX3YvX3L74g' );"> <img src="http://img.youtube.com/vi/YX3YvX3L74g/default.jpg" alt="Verdi: La Traviata: Brindisi" /></a><br />
Verdi: La Traviata: Brindisi</div>
</div>
<!-- end #mainContent -->
</div>
<!-- End of #container -->
</div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks