|
chrlogan -> Firefox not applying certain css elements (5/1/2009 15:07:11)
|
Hi all,
Have a quick question! A site I'm working on is displaying the way I want it to in IE and not Firefox (there's a first time for everything!). The site is located here:
http://www.myrelationshipresolution.com/
More specifically, I'm just referring to the header -- the title doesn't display in white nor does menu bar appear in purple (although the hover works).
Page Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<center>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="leftheader" width="15%"></td>
<td class="rightheader" width="*" valign="bottom"><h1>Welcome to the Relationship Resolution Centre, Inc.</h1></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr class="rowhead">
<td class="menubarleft" width="15%"><font color="white">.</font></td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Coaching</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Mediation</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Financial Divorce Analysis</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Relationship Building</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Workplace Bullying</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">About Us</td>
<td class="menubar" width="12%" valign="bottom" onmouseover="this.style.backgroundColor='#C97979'" onmouseout="this.style.backgroundColor='#997979'">Contact Us</td>
</tr>
</table>
</center>
</html>
CSS:
h1 {
color: white;
}
h2 {
color: #997979;
}
td.leftheader {
background-image: url('RRC_finalOttawa.png');
background-repeat: no-repeat;
margin: 0px auto; position: relative;
}
td.rightheader {
background: repeat-x url('testbar.png');
margin: 0px auto; position: relative;
height: 125px;
text-align: center;
padding-bottom:12px;
}
td.menubar {
background-color: #997979;
color: white;
text-align: center;
}
td.footer {
background: repeat-x url('botbar.png'); color: #FFF;
margin: 0px auto; position: relative;
width: 764px; height: 85px;
z-index: 1;
text-align: center;
color:black;
font-family: arial, "lucida console", san-serif;
font-size: 12px;
}
Thanks for any help!
|
|
|
|
