Jump to content

debut album site layout help...

andr923

By andr923
in CSS Help

Recommended Posts

andr923 Member

andr923

Posted
Posted

Hey guys and gals, I'm a musician not a programmer but I'm doing the best I can.  Just spent hours and hours learning how to get this layout to work in Safari only to find out that it doesn't work in Firefox... I feel like there's gotta be a simple solution to my problem.  Any help would be greatly appreciated.  Here is the link to the page that looks weird in firefox: http://andreimatorin.com/opus/index3.html

 

this is the code I'm using for my tables...

<table border="0" cellspacing="0" cellpadding="0" id="container" width="1040px">

<tr>
	<td height="120px" background="layout/topgrey.jpg" width="1040px" height="120px" colspan="6"><img src="layout/topgreycontent.jpg"></td>
</tr>

<tr>
	<td rowspan="3" width="120px" class="norepeat" valign="bottom" align="right" background="layout/leftgrey2.jpg"></td>
	<td width="300px" height="100%" class="leftbackground" valign="top" background="layout/leftgreyrepeat.jpg"><a href="index2.html" class="roll"></a><a href="index2.html" class="roll2"></a><a href="index2.html" class="roll3"></a><a href="index2.html" class="roll4"></a><a href="index2.html" class="roll5"></a><a href="index2.html" class="roll6"></a><img src="layout/home/homethumb.jpg" style="float:left;"><img src="layout/cornergreyimage.jpg">
	<td rowspan="3" width="10px" valign="top" background="layout/outlinecolor.jpg"><img src="layout/divider.jpg"></td>
	<td rowspan="2" width="480px" class="contentrepeat" valign="top" height="1000px" bgcolor="#FFFFFF"><img src="layout/content_top.jpg"></td>
	<td rowspan="3" width="10px" valign="top" background="layout/outlinecolor.jpg"><img src="layout/divider.jpg"></td>
	<td width="120px" valign="top" background="layout/rightgreyrepeat.jpg"><img src="layout/toprightgrey.jpg"></td>
</tr>

<tr>
	<td rowspan="2" class="bottomright" height="100px" background="layout/leftgreyrepeat.jpg"><img src="layout/bottomleftgrey.jpg"></td>
	<td rowspan="2"class="bottomright2" height="100px" background="layout/rightgreyrepeat.jpg"><img src="layout/bottomrightgreycopyright.jpg"></td>

</tr>

<tr>
	<td height="10px" background="layout/outlinecolor.jpg"></td>


</tr>

<tr>
	<td></td>
	<td class="norepeat" colspan="5" height="120" background="layout/bottomgreycontent.jpg" width="1040px"></td>
</tr>




</table>

 

 

this is the entire code for the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<style css="text/css">

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(layout/grey.jpg);
text-align: center;
}

#container {
margin-left:auto; 
margin-right:auto; 
padding: 0;
valign:top;
}


a.roll, a.roll:link, a.roll:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 200px;
height: 90px;

background-image: url(layout/links/1.jpg);

background-repeat:no-repeat;
background-position:top center;
float:left;
}

a.roll:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}
a.roll2, a.roll2:link, a.roll2:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 100px;
height: 90px;

background-image: url(layout/links/2.jpg);

background-repeat:no-repeat;
background-position:top center;
float:right;

}

a.roll2:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}
a.roll3, a.roll3:link, a.roll3:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 300px;
height: 60px;

background-image: url(layout/links/3.jpg);

background-repeat:no-repeat;
background-position:top center;
float:left;


}

a.roll3:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}
a.roll4, a.roll4:link, a.roll4:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 190px;
height: 70px;

background-image: url(layout/links/4.jpg);

background-repeat:no-repeat;
background-position:top center;
float:left;

}

a.roll4:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}
a.roll5, a.roll5:link, a.roll5:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 110px;
height: 70px;

background-image: url(layout/links/5.jpg);

background-repeat:no-repeat;
background-position:top center;
float:right;

}

a.roll5:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}
a.roll6, a.roll6:link, a.roll6:visited {
border:0px;
margin: 0px;
padding: 0px;
display: block;
width: 300px;
height: 70px;

background-image: url(layout/links/6.jpg);

background-repeat:no-repeat;
background-position:top center;
float:left;


}

a.roll6:hover {
color:#FFFFFF;
border:0px;
margin: 0px;
padding: 0px;
background-repeat:no-repeat;
background-position:bottom center;
}


.contentrepeat {
background-image:url(layout/contentbackground.jpg);
background-repeat:repeat-y;
background-color:#FFFFFF;
}

.norepeat {
background-repeat:no-repeat;
}

.leftbackground {
background-position:right;
background-repeat:repeat-y;
}

.bottomright {
position: relative;
vertical-align:bottom;
text-align:right;
background-repeat:repeat-y;
background-position:right;
}
.bottomright2 {
position: relative;
vertical-align:bottom;
text-align:left;
background-repeat:repeat-y;
background-position:left;
}

.top {
position: relative;
top:0px;
}

</style>
</head>

<body>
<div style="text-align:center; position-left: 50%">
<table border="0" cellspacing="0" cellpadding="0" id="container" width="1040px">

<tr>
	<td height="120px" background="layout/topgrey.jpg" width="1040px" height="120px" colspan="6"><img src="layout/topgreycontent.jpg"></td>
</tr>

<tr>
	<td rowspan="3" width="120px" class="norepeat" valign="bottom" align="right" background="layout/leftgrey2.jpg"></td>
	<td width="300px" height="100%" class="leftbackground" valign="top" background="layout/leftgreyrepeat.jpg"><a href="index2.html" class="roll"></a><a href="index2.html" class="roll2"></a><a href="index2.html" class="roll3"></a><a href="index2.html" class="roll4"></a><a href="index2.html" class="roll5"></a><a href="index2.html" class="roll6"></a><img src="layout/home/homethumb.jpg" style="float:left;"><img src="layout/cornergreyimage.jpg">
	<td rowspan="3" width="10px" valign="top" background="layout/outlinecolor.jpg"><img src="layout/divider.jpg"></td>
	<td rowspan="2" width="480px" class="contentrepeat" valign="top" height="1000px" bgcolor="#FFFFFF"><img src="layout/content_top.jpg"></td>
	<td rowspan="3" width="10px" valign="top" background="layout/outlinecolor.jpg"><img src="layout/divider.jpg"></td>
	<td width="120px" valign="top" background="layout/rightgreyrepeat.jpg"><img src="layout/toprightgrey.jpg"></td>
</tr>

<tr>
	<td rowspan="2" class="bottomright" height="100px" background="layout/leftgreyrepeat.jpg"><img src="layout/bottomleftgrey.jpg"></td>
	<td rowspan="2"class="bottomright2" height="100px" background="layout/rightgreyrepeat.jpg"><img src="layout/bottomrightgreycopyright.jpg"></td>

</tr>

<tr>
	<td height="10px" background="layout/outlinecolor.jpg"></td>


</tr>

<tr>
	<td></td>
	<td class="norepeat" colspan="5" height="120" background="layout/bottomgreycontent.jpg" width="1040px"></td>
</tr>




</table>




</div>

<div style="z-index:5; position:absolute; top: 0px; width: 100%; text-align: center;">

<div style="position:relative; margin-left:auto; margin-right:auto; top: 630px; right:206px; width: 192px">





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

		<div id="flashPlayer">
		  This text will be replaced by the flash music player.
		</div>

		<script type="text/javascript">
		   var so = new SWFObject("playerMultiple.swf", "mymovie", "192", "95", "7", "#FFFFFF");
		so.addVariable("overColor","#660000")

		   so.addVariable("autoPlay","no")
		   so.addVariable("playlistPath","playlist.xml")
		   so.write("flashPlayer");
		</script>

</div>


</div>

<div style="z-index:6; position:absolute; top: 0px; right: 0px; width: 160px; background-image:url(layout/signature.gif); height: 100%;"></div>

</body>
</html>

 

 

Thanks sooo much!!!!  I'll send you a mp3s of the album to the first person who helps me fix the problem =)

 

Link to comment
https://forums.phpfreaks.com/topic/167456-debut-album-site-layout-help/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.