cssnewb1988
08-06-2011, 02:30 PM
Hey everyone,
I am designing a site for a friend and I had everything going great until I started testing things in Mozilla and Internet explorer. A buddy of mine helped me last night to change some tags so they were up to date with HTML 4 I guess, but the real problem I think lies with how the page is coded. I use some absolute positioning in my css and those class names are being used inside tables. I don't know how messed up it is but maybe you guys can help me fix the code and make it more conventional as well as working in all browsers. Thank you!!
http://www.subauditionsound.com/TestSite/SubAud_Main_ver02.html
<html>
<head>
<title>LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="SubAud_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000">
<!-- Save for Web Slices (LAYOUT.psd) -->
<table id="Table_01" width="750" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
<img src="images/TopBanner_01.jpg" width="750" height="310" alt=""></td>
</tr>
<tr>
<td width="208" height="300" class="Content_Menu">
<ul class="Content_menu">
<li><a href="#">Home</a></li>
<li><a href="#">The Crew</a></li>
<li><a href="#">Location Audio Work</a></li>
<li><a href="#">On Set Media</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</td>
<td rowspan="2" class="Content" width="542" height="470"><p class="text_pos">Content goes here. <a href="#">Link TEST</a></p>
</td>
</tr>
<tr>
<td width="208" class="Copyright">Copyright © 2011<br> Sub Audition Sound LLC</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
.Content {
position: static;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: top;
}
p.text_pos
{
margin-top: 20px;
}
.Content_Menu {
position: absolute;
left: auto;
top: auto;
background-image: url(images/SubAud_Main_Menu.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFF;
text-indent: 0px;
text-align: left;
white-space: normal;
line-height: 25px;
}
ul.Content_menu {
list-style-type:square;
margin-top: 20px;
}
a:link {color:#FA2223;} /* unvisited link */
a:visited { color:#999;} /* visited link */
a:hover {color:#FFF;
font-size: 14px;} /* mouse over link */
a:active {color:#FFF;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
.Copyright
{
position: absolute;
margin-top: 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
color: #999;
letter-spacing: 2px;
top: 615px;
text-align: center;
line-height: 20px;
}
I am designing a site for a friend and I had everything going great until I started testing things in Mozilla and Internet explorer. A buddy of mine helped me last night to change some tags so they were up to date with HTML 4 I guess, but the real problem I think lies with how the page is coded. I use some absolute positioning in my css and those class names are being used inside tables. I don't know how messed up it is but maybe you guys can help me fix the code and make it more conventional as well as working in all browsers. Thank you!!
http://www.subauditionsound.com/TestSite/SubAud_Main_ver02.html
<html>
<head>
<title>LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="SubAud_stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000">
<!-- Save for Web Slices (LAYOUT.psd) -->
<table id="Table_01" width="750" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
<img src="images/TopBanner_01.jpg" width="750" height="310" alt=""></td>
</tr>
<tr>
<td width="208" height="300" class="Content_Menu">
<ul class="Content_menu">
<li><a href="#">Home</a></li>
<li><a href="#">The Crew</a></li>
<li><a href="#">Location Audio Work</a></li>
<li><a href="#">On Set Media</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</td>
<td rowspan="2" class="Content" width="542" height="470"><p class="text_pos">Content goes here. <a href="#">Link TEST</a></p>
</td>
</tr>
<tr>
<td width="208" class="Copyright">Copyright © 2011<br> Sub Audition Sound LLC</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
.Content {
position: static;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFF;
text-align: center;
vertical-align: top;
}
p.text_pos
{
margin-top: 20px;
}
.Content_Menu {
position: absolute;
left: auto;
top: auto;
background-image: url(images/SubAud_Main_Menu.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #FFF;
text-indent: 0px;
text-align: left;
white-space: normal;
line-height: 25px;
}
ul.Content_menu {
list-style-type:square;
margin-top: 20px;
}
a:link {color:#FA2223;} /* unvisited link */
a:visited { color:#999;} /* visited link */
a:hover {color:#FFF;
font-size: 14px;} /* mouse over link */
a:active {color:#FFF;} /* selected link */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
.Copyright
{
position: absolute;
margin-top: 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: bold;
color: #999;
letter-spacing: 2px;
top: 615px;
text-align: center;
line-height: 20px;
}