SSHUC
04-26-2008, 09:45 PM
I'm designing my page in MySpace and having some issues. Please view the page in both IE and FF.
www.myspace.com/sshuc (http://www.myspace.com/sshuc)
As you can see, in IE, the video player appears in it's proper position, however, in Firefox, it does not. Earlier I attempted to use the background image for the layer and playlist as a DIV background, but could not get it to appear in FF. So, I was forced to use it as an image, which now requires absolute positioning of the DIV containing the video player itself. However, it is not positioning itself correctly in FF!
Any help would be greatly appreciated!
Here is the CSS:
<style type="text/css">
div.topbanner {
position: absolute;
top: 0%;
left: 2;
width: 1000px;
margin-left: 0px;
height: 465px;
z-index:2;
}
body {
margin-top:450px;
background-image:url('');
background-attachment:fixed;
background-repeat:repeat;
background-position:top center;
border-width:0px ; border-style: solid;
background-color:900000;
}
table, td {
background-image:url('');
background-repeat:repeat;
background-color: transparent;
}
.main {
background-image:url('');
background-repeat:repeat;
position: absolute;
left: 0px;
top: 585px;
width: 1000px;
height: 4865px;
z-index: 1;
margin-left: 0px;
}
.content{
width: 1000px;
height: 430px;
padding: 0px 0px 0px 0px;
margin: 0px 0 0 0px;
border: 0px solid;
}
.lower{
background-image: url('http://www.sshuc.com/myspace/sshuc2.png');
width: 1000px;
height: 250px;
padding-left: 0px;
margin: 0px 0px 0 0;
border: 0px solid;
background-repeat: no-repeat;
}
.content1{
float: left;
width: 667px;
height: 250px;
position: relative;
clear: left;
}
.content2{
float: right;
width: 333px;
height: 250px;
position: relative;
clear: right;
}
.lower1{
float: left;
position: relative;
height: 250px;
padding-left: 553px;
clear: left;
}
.lower2(
float: right;
width: 315px;
height: 250px;
position: relative;
clear: right;
}
.folio(
width: 1000px;
height: 860px;
position: absolute;
}
.musicbg {
width: 1000px;
height: 600px;
position: relative;
}
.musicvideos {
position:relative;
left: 50px;
top: 50px;
height: 600px;
width: 1000px;
}
.InterestsAndDetails {
width: 670px;
height: 600px;
position:absolute;
margin-top: -620px;
margin-left: -38px;
z-index: 2;
}
</style>
Here is the HTML:
<div class="topbanner"><img src="http://www.sshuc.com/myspace/header.png" height="465px" width="1000px" border="0px"></div>
<div class="main"><table style="width: 1000px;height: 5000px; cellpadding:0px;cellspacing:0px;background-color:900000;">
<tr>
<td valign="top">
<div class="content"><img src="http://www.sshuc.com/myspace/sshuc1.png" width="1000px" height="430px"></div>
<div class="lower"><div class="lower1"><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5 JmZyaWVuZElEPTM3MTc0NzIxOQ=373197196" target="_self"><img src="http://www.sshuc.com/myspace/add.png" width="132px" height="250px" border="0px"></a></div>
<div class="lower2"><div class="commentbox"><center><form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<br><input type="hidden" name="friendID" value="373197196"><textarea name="f_comments" cols="40" rows="13"></textarea><br /><input type="submit" value="Send a Request"></form>
</center>
</div>
</div>
<div class="folio"><img src="http://www.sshuc.com/myspace/testimonials.png" border="0px" width="1000px" height="60px"><img src="http://www.sshuc.com/myspace/port-ingrid.png" width="700px" height="400px" border=0px"><img src="http://www.sshuc.com/myspace/pagesx1.png" width="300px" height="400px" border="0px"><img src="http://www.sshuc.com/myspace/pagesx1.png" width="300px" height="400px" border="0px"><img src="http://www.sshuc.com/myspace/pagesfcs.png" width="700px" height="400px" border=0px"></div>
<div class="musicbg"><img src="http://www.sshuc.com/myspace/musicvideos1.png" width="1000px" height="600px" border="0px"></div><table class="InterestsAndDetails"><div class="musicvideos">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="542" width="670" data="http://media.imeem.com/pl/ekGtbeYuL2/pv=2/">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://media.imeem.com/pl/ekGtbeYuL2/pv=2/" />
</object></div></table>
</td></tr></table></div>
www.myspace.com/sshuc (http://www.myspace.com/sshuc)
As you can see, in IE, the video player appears in it's proper position, however, in Firefox, it does not. Earlier I attempted to use the background image for the layer and playlist as a DIV background, but could not get it to appear in FF. So, I was forced to use it as an image, which now requires absolute positioning of the DIV containing the video player itself. However, it is not positioning itself correctly in FF!
Any help would be greatly appreciated!
Here is the CSS:
<style type="text/css">
div.topbanner {
position: absolute;
top: 0%;
left: 2;
width: 1000px;
margin-left: 0px;
height: 465px;
z-index:2;
}
body {
margin-top:450px;
background-image:url('');
background-attachment:fixed;
background-repeat:repeat;
background-position:top center;
border-width:0px ; border-style: solid;
background-color:900000;
}
table, td {
background-image:url('');
background-repeat:repeat;
background-color: transparent;
}
.main {
background-image:url('');
background-repeat:repeat;
position: absolute;
left: 0px;
top: 585px;
width: 1000px;
height: 4865px;
z-index: 1;
margin-left: 0px;
}
.content{
width: 1000px;
height: 430px;
padding: 0px 0px 0px 0px;
margin: 0px 0 0 0px;
border: 0px solid;
}
.lower{
background-image: url('http://www.sshuc.com/myspace/sshuc2.png');
width: 1000px;
height: 250px;
padding-left: 0px;
margin: 0px 0px 0 0;
border: 0px solid;
background-repeat: no-repeat;
}
.content1{
float: left;
width: 667px;
height: 250px;
position: relative;
clear: left;
}
.content2{
float: right;
width: 333px;
height: 250px;
position: relative;
clear: right;
}
.lower1{
float: left;
position: relative;
height: 250px;
padding-left: 553px;
clear: left;
}
.lower2(
float: right;
width: 315px;
height: 250px;
position: relative;
clear: right;
}
.folio(
width: 1000px;
height: 860px;
position: absolute;
}
.musicbg {
width: 1000px;
height: 600px;
position: relative;
}
.musicvideos {
position:relative;
left: 50px;
top: 50px;
height: 600px;
width: 1000px;
}
.InterestsAndDetails {
width: 670px;
height: 600px;
position:absolute;
margin-top: -620px;
margin-left: -38px;
z-index: 2;
}
</style>
Here is the HTML:
<div class="topbanner"><img src="http://www.sshuc.com/myspace/header.png" height="465px" width="1000px" border="0px"></div>
<div class="main"><table style="width: 1000px;height: 5000px; cellpadding:0px;cellspacing:0px;background-color:900000;">
<tr>
<td valign="top">
<div class="content"><img src="http://www.sshuc.com/myspace/sshuc1.png" width="1000px" height="430px"></div>
<div class="lower"><div class="lower1"><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5 JmZyaWVuZElEPTM3MTc0NzIxOQ=373197196" target="_self"><img src="http://www.sshuc.com/myspace/add.png" width="132px" height="250px" border="0px"></a></div>
<div class="lower2"><div class="commentbox"><center><form method="post"
action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<br><input type="hidden" name="friendID" value="373197196"><textarea name="f_comments" cols="40" rows="13"></textarea><br /><input type="submit" value="Send a Request"></form>
</center>
</div>
</div>
<div class="folio"><img src="http://www.sshuc.com/myspace/testimonials.png" border="0px" width="1000px" height="60px"><img src="http://www.sshuc.com/myspace/port-ingrid.png" width="700px" height="400px" border=0px"><img src="http://www.sshuc.com/myspace/pagesx1.png" width="300px" height="400px" border="0px"><img src="http://www.sshuc.com/myspace/pagesx1.png" width="300px" height="400px" border="0px"><img src="http://www.sshuc.com/myspace/pagesfcs.png" width="700px" height="400px" border=0px"></div>
<div class="musicbg"><img src="http://www.sshuc.com/myspace/musicvideos1.png" width="1000px" height="600px" border="0px"></div><table class="InterestsAndDetails"><div class="musicvideos">
<object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="542" width="670" data="http://media.imeem.com/pl/ekGtbeYuL2/pv=2/">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://media.imeem.com/pl/ekGtbeYuL2/pv=2/" />
</object></div></table>
</td></tr></table></div>