Help
I am not a coder and would really appreciate it if someone could see if the problem stands out at all. I know the coding won't be very tidy because I use layers and the design part of dreamweaver however there is no good reason for it to work in every other browser absolutley fine and not I.E
I will be very grateful for any help you lovely people can provide.
www.motif.tv <<< problematic site
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});
</script>
<link rel="shorcut icon" href="favicon.png" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/videobox.css" type="text/css"/>
<title>Motif.tv Freelance Video, Design, Audio and Tea</title>
<style type="text/css">
<!--
#wrapper {
position:relative;
left:auto;
top:35px;
width:792px;
height:500px;
z-index:1;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
right: auto;
}
body {
background-image: url(testbackground.jpg);
background-color: #000000;
}
#Layer1 {
position:absolute;
left:142px;
top:93px;
width:495px;
height:21px;
z-index:2;
background-color: #000000;
}
#Layer2 {
position:absolute;
left:57px;
top:153px;
width:326px;
height:28px;
z-index:2;
}
#Layer3 {
position:absolute;
left:54px;
top:149px;
width:828px;
height:22px;
z-index:2;
}
#Layer4 {
position:absolute;
left:470px;
top:221px;
width:359px;
height:206px;
z-index:2;
}
#Layer5 {
position:absolute;
left:25px;
top:130px;
width:151px;
height:36px;
z-index:2;
}
#teamaker {
position:absolute;
left:122px;
top:-50px;
width:82px;
height:124px;
z-index:5;
visibility: visible;
}
#Layer7 {
position:absolute;
left:-8px;
top:-28px;
width:120px;
height:89px;
z-index:2;
}
#headerblue {
position:absolute;
left:-1px;
top:-300px;
width:792px;
height:434px;
z-index:2;
background-color: #0E83FF;
visibility: visible;
}
#Layer9 {
position:absolute;
left:-1px;
top:412px;
width:792;
height:142;
z-index:2;
background-color: #0E83FF;
}
#Layer10 {
position:absolute;
left:442px;
top:140px;
width:256px;
height:162px;
z-index:4;
}
#Layer11 {
position:absolute;
left:392px;
top:144px;
width:399px;
height:260px;
z-index:3;
}
#twitterfeed {
position:absolute;
left:523px;
top:20px;
width:258px;
height:108px;
z-index:4;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
visibility: visible;
}
a:link {
color: #FFFFFF;
}
a:hover {
color: #FFFFFF;
}
#logo {
position:absolute;
left:-1px;
top:-30px;
width:792px;
height:150px;
z-index:6;
visibility: visible;
}
#Layer14 {
position:absolute;
left:10px;
top:160px;
width:342px;
height:159px;
z-index:10;
}
#Layer15 {
position:absolute;
left:516px;
top:168px;
width:228px;
height:152px;
z-index:12;
}
#whitearea {
position:absolute;
left:-1px;
top:129px;
width:792px;
height:720px;
z-index:19;
border: 2px 2px #FFFFFF;
background-color: #FFFFFF;
visibility: visible;
}
#Birdy {
position:absolute;
left:696px;
top:-51px;
width:53px;
height:46px;
z-index:13;
visibility: visible;
}
#Layer18 {
position:absolute;
left:5px;
top:385px;
width:44px;
height:17px;
z-index:15;
}
#Layer19 {
position:absolute;
left:-1px;
top:421px;
width:792px;
height:195px;
z-index:14;
background-color: #0E83FF;
}
#Layer20 {
position:absolute;
left:541px;
top:326px;
width:95px;
height:40px;
z-index:16;
}
#Layer21 {
position:absolute;
left:457px;
top:146px;
width:334px;
height:221px;
z-index:11;
background-color: #0E83FF;
}
#Layer22 {
position:absolute;
left:6px;
top:388px;
width:52px;
height:54px;
z-index:17;
}
#Clickme {
position:absolute;
left:590px;
top:-52px;
width:34px;
height:40px;
z-index:18;
visibility: visible;
}
#Lines {
position:absolute;
left:-1px;
top:146px;
width:138px;
height:31px;
z-index:19;
}
#Layer24 {
position:absolute;
left:-1px;
top:371px;
width:29px;
height:16px;
z-index:20;
}
#lukeelwell {
position:absolute;
left:12px;
top:141px;
width:204px;
height:200px;
z-index:50;
visibility: visible;
text-indent: 2px;
}
#Layer26 {
position:absolute;
left:297px;
top:226px;
width:249px;
height:138px;
z-index:20;
}
#lines {
position:absolute;
left:665px;
top:293px;
width:56px;
height:25px;
z-index:22;
}
#Layer27 {
position:absolute;
left:261px;
top:234px;
width:250px;
height:124px;
z-index:22;
}
#movingimage {
position:absolute;
left:15px;
top:345px;
width:73px;
height:114px;
z-index:24;
visibility: visible;
}
#Layer29 {
position:absolute;
left:-1px;
top:374px;
width:792px;
height:1711px;
z-index:23;
background-color: #0E83FF;
visibility: visible;
}
#Layer30 {
position:absolute;
left:646px;
top:356px;
width:35px;
height:37px;
z-index:25;
}
#logos {
position:absolute;
left:67px;
top:473px;
width:27px;
height:23px;
z-index:26;
visibility: hidden;
}
#Layer32 {
position:absolute;
left:261px;
top:196px;
width:124px;
height:87px;
z-index:27;
}
#cvcontact {
position:absolute;
left:761px;
top:201px;
width:24px;
height:38px;
z-index:27;
visibility: visible;
}
#Showreel {
position:absolute;
left:230px;
top:147px;
width:103px;
height:91px;
z-index:46;
visibility: visible;
}
#Documentary {
position:absolute;
left:27px;
top:461px;
width:187px;
height:57px;
z-index:45;
visibility: visible;
}
#Layer31 {
position:absolute;
left:541px;
top:434px;
width:241px;
height:73px;
z-index:30;
visibility: visible;
}
#amisexyinfo {
position:absolute;
left:566px;
top:470px;
width:208px;
height:198px;
z-index:31;
font-family: georgia;
line-height: 10px;
visibility: visible;
}
.style5 {
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
a:active {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
#handmade {
position:absolute;
left:27px;
top:861px;
width:114px;
height:88px;
z-index:32;
visibility: visible;
}
#Layer33 {
position:absolute;
left:584px;
top:275px;
width:200px;
height:80px;
z-index:33;
}
#buttons {
position:absolute;
left:601px;
top:147px;
width:92px;
height:16px;
z-index:47;
}
#uptodate {
position:absolute;
left:604px;
top:192px;
width:168px;
height:36px;
z-index:34;
}
.style6 {
font-family: georgia;
font-size: 10px;
color: #292929;
font-weight: bold;
font-style: italic;
}
#Layer37 {
position:absolute;
left:607px;
top:202px;
width:146px;
height:28px;
z-index:35;
}
#Layer38 {
position:absolute;
left:567px;
top:258px;
width:178px;
height:107px;
z-index:35;
}
#available {
position:absolute;
left:625px;
top:228px;
width:76px;
height:62px;
z-index:35;
}
#emailcv {
position:absolute;
left:717px;
top:107px;
width:63px;
height:14px;
z-index:44;
}
#handmadedesc {
position:absolute;
left:27px;
top:1137px;
width:338px;
height:117px;
z-index:37;
}
.style16 {
font-size: 12px;
font-family: georgia;
font-weight: bold;
color: #FFFFFF;
}
#Vote4fun {
position:absolute;
left:424px;
top:861px;
width:164px;
height:155px;
z-index:38;
}
#doc2 {
position:absolute;
left:0px;
top:459px;
width:592px;
height:332px;
z-index:39;
}
#MotionGraphics {
position:absolute;
left:419px;
top:796px;
width:84px;
height:64px;
z-index:40;
}
#HandMadetitle {
position:absolute;
left:21px;
top:797px;
width:58px;
height:43px;
z-index:41;
}
#divide2 {
position:absolute;
left:2px;
top:766px;
width:792px;
height:22px;
z-index:42;
}
#divide1 {
position:absolute;
left:2px;
top:87px;
width:28px;
height:19px;
z-index:43;
}
#musicpromo {
position:absolute;
left:27px;
top:1296px;
width:151px;
height:103px;
z-index:48;
}
#vote4fundesc {
position:absolute;
left:424px;
top:1139px;
width:338;
height:123px;
z-index:49;
}
#ayap {
position:absolute;
left:61px;
top:94px;
width:131px;
height:133px;
z-index:50;
}
.style18 {font-size: 12px; color: #FFFFFF; font-family: arial;}
.style19 {font-size: 12px; font-family: georgia;}
#Layer6 {
position:absolute;
left:516px;
top:-2px;
width:108px;
height:48px;
z-index:51;
}
#LOGOINTRO {
position:absolute;
left:6px;
top:1573px;
width:787px;
height:107px;
z-index:52;
}
#Layer8 {
position:absolute;
left:1px;
top:1691px;
width:792px;
height:475px;
z-index:53;
background-color: #FFFFFF;
}
#Layer12 {
position:absolute;
left:-33px;
top:413px;
width:791px;
height:20px;
z-index:54;
}
.style22 {font-family: arial}
#Layer13 {
position:absolute;
left:0px;
top:0px;
width:1px;
height:105px;
z-index:55;
}
#IMAGETEST {
position:absolute;
left:192px;
top:77px;
width:182px;
height:44px;
z-index:56;
}
#Layer16 {
position:absolute;
left:1px;
top:1549px;
width:166px;
height:83px;
z-index:56;
}
#Layer17 {
position:absolute;
left:193px;
top:520px;
width:212px;
height:60px;
z-index:57;
}
#Layer23 {
position:absolute;
left:258px;
top:560px;
width:96px;
height:77px;
z-index:57;
}
#Layer25 {
position:absolute;
left:270px;
top:557px;
width:180px;
height:131px;
z-index:57;
}
#Layer28 {
position:absolute;
left:306px;
top:558px;
width:199px;
height:90px;
z-index:57;
}
#Layer34 {
position:absolute;
left:18px;
top:534px;
width:328px;
height:152px;
z-index:57;
}
#Layer35 {
position:absolute;
left:567px;
top:401px;
width:85px;
height:21px;
z-index:57;
}
#Layer36 {
position:absolute;
left:2px;
top:460px;
width:50px;
height:43px;
z-index:58;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
//-->
</script>
</head>
<div id="wrapper">
<body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">
<div id="logos"><img src="LOGOS2.png" width="645" height="154" /></div>
<div id="Layer29"></div>
<div id="Layer35"><a rel="shadowbox" class="option" title="Google.com" href="http://www.dailymotion.com/swf/x9ccf2_do-you-think-im-sexyy"> External Site</a></div>
<div id="movingimage"><img src="movingimage.png" width="522" height="149" /></div>
<div id="Showreel">
<div>
<object width="345" height="209">
<param name="movie" value="http://www.dailymotion.com/swf/x7tpfb_luke-elwell-showreel-2008_creation&related=1" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<embed src="http://www.dailymotion.com/swf/x7tpfb_luke-elwell-showreel-2008_creation&related=1" type="application/x-shockwave-flash" width="345" height="209" allowfullscreen="true" allowscriptaccess="always"></embed>
</object>
<br />
</div></div>
<div id="lukeelwell">
<p align="justify" class="style19"><img src="welcometext.png" width="200" height="200" /></p>
</div>
<div id="Clickme"><img src="speech.png" width="130" height="74" /></div>
<div id="Birdy"><a href="http://www.twitter.com/motiftv" target="_blank"><img src="birdy.png" width="97" height="97" border="0" /></a></div>
<div id="whitearea"><img src="gradient.png" width="792" height="250" /></div>
<div id="logo"><img src="TOP.png" width="792" height="142" /></div>
<div id="teamaker"><img src="is.png" width="370" height="170" /></div>
<div id="headerblue"></div>
<div id="twitterfeed">
<div id="twitter_div">
<h2 class="sidebar-title style18"> </h2>
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Motiftv.json?callback=twitterCallback2&count=1"></script>
</div>
<div id="buttons"><img src="icons.png" width="171" height="41" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="130,1,164,39" href="http://youtube.com/enterskywalker" target="_blank" />
<area shape="rect" coords="86,-6,123,42" href="http://twitter.com/motiftv" target="_blank" />
<area shape="rect" coords="43,4,81,37" href="http://motiftv.wordpress.com" target="_blank" />
<area shape="rect" coords="-6,1,41,47" href="http://flickr.com/photos/motifcollective" target="_blank" />
</map></div>
<div class="style6" id="uptodate"><img src="date.png" width="168" height="45" /></div>
<div id="available"><img src= "avail2.png" width="130" height="130" /></div>
<div class="style16" id="emailcv"><span class="style22"><a href="mailto:luke.elwell@gmail.com">EMAIL</a><a href="cv.jpg" rel="lightbox" title="Luke Elwell CV"> CV</a></span></a></div>
<div id="divide1"><img src="divide.png" width="790" height="85" /></div>
<div id="Layer6"><img src="twittered2.png" width="190" height="85" /></div>
<div id="Layer12">
<div align="center"><img src="divide.png" alt="divider" width="700" height="85" /></div>
</div>
<div id="Layer13"></div>
<div id="Layer16"><img src="logoprint.png" width="792" height="300" /></div>
<div id="Layer36"><img src="videos.png" width="790" height="567" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="8,31,245,160" href="#" /></map></div>
<div id="Layer34">
</body>
</div>
</html>
