Forum Moderators: open
I am new to this forum and am not sure if my questions have been posted elsewhere, so I apologize in advance.
I'm developing a site for a friend whose design requires a table to always snaps to the center of a browser window. My attempts to find a solution have not rendered well, so I'm wondering if anyone might have a possible solution? The code is posted below.
My 2nd question is how to deal with Netscape and Firefox not displaying table cell colors? Currently, only the graphics within the cells display, but not the cell's bgcolor. It renders almost perfect in IE (Mac)
Thanks very much for any help or suggestions!
Monica
<!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"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Las Lilas Coffee</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<script language="JavaScript" 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_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onload="MM_preloadImages('assets/nav/about_ro.gif','assets/nav/order_ro.gif',
'assets/nav/vroast_ro.gif','assets/nav/froast_ro.gif','assets/nav/contact_ro.gif',
'assets/nav/home_on.gif');MM_preloadImages('assets/nav/about_ro.gif');
MM_preloadImages('assets/nav/vroast_ro.gif');MM_preloadImages('assets/nav/froast_ro.gif');
MM_preloadImages('assets/nav/order_ro.gif')"><table width="100%" height="10%" border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="assets/spacer.gif" width="1" height="50" border="0" /></td>
</tr>
</table>
<table width="750" height="85" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="166" height="84"> </td>
<td width="35" height="84"><img src="assets/nav/yvert1.gif" width="35" height="84" border="0" /></td>
<td width="416" height="84" bgcolor="ffd457"> </td>
<td width="133" height="84" align="left" valign="bottom" bgcolor="ffd457"><a href="mailto:info@example.com" onmouseover="MM_swapImage('contact','','assets/nav/contact_ro.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/contact_on.gif" name="contact" width="45" height="9" vspace="10" border="0" id="contact" /></a></td>
</tr><tr>
<td colspan="4" align="right"><img src="assets/nav/o_dot.gif" width="750" height="1" border="0" /></td>
</tr>
</table><table width="750" height="395" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="166" rowspan="6" align="left" valign="bottom"><a href="vroast.html"><img src="assets/nav/vroast.gif" width="68" height="84" hspace="12" vspace="10" border="0" /></a><a href="froast.html"><img src="assets/nav/froast.gif" width="68" height="84" vspace="10" border="0" /></a></td>
<td width="35" height="395" rowspan="6" align="right"><img src="assets/nav/yvert2.gif" width="35" height="395" border="0" /></td>
<td width="82" height="75" align="right" valign="top" bgcolor="ffd457"> </td><td width="30" rowspan="6" align="center" valign="top" bgcolor="ffd457"><img src="assets/nav/overt.gif" width="10" height="224" vspace="40" /></td>
<td width="437" rowspan="6" align="left" valign="top" bgcolor="ffd457"><a href="index.html"><img src="assets/nav/logo.gif" width="221" height="77" vspace="20" border="0" /></a><!-- InstanceBeginEditable name="text" --><img src="assets/nav/bags.jpg" width="298" height="225" border="0" /><!-- InstanceEndEditable --></td>
</tr>
<!-- InstanceBeginEditable name="nav" -->
<tr>
<td width="82" height="30" align="right" valign="top" nowrap="nowrap" bgcolor="ffd457"><a href="index.html" onmouseover="MM_swapImage('home','','assets/nav/home_on.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/home_ro.gif" name="home" width="34" height="9" border="0" id="home" /></a></td>
</tr>
<tr>
<td width="82" height="30" align="right" valign="top" bgcolor="ffd457"><a href="about.html" onmouseover="MM_swapImage('about','','assets/nav/about_ro.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/about_on.gif" name="about" width="36" height="9" border="0" id="about" /></a></td></tr>
<tr>
<td width="82" height="30" align="right" valign="top" bgcolor="ffd457"><a href="vroast.html" onmouseover="MM_swapImage('vroast','','assets/nav/vroast_ro.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/vroast_on.gif" name="vroast" width="80" height="10" border="0" id="vroast" /></a></td>
</tr>
<tr>
<td width="82" height="30" align="right" valign="top" bgcolor="ffd457"><a href="froast.html" onmouseover="MM_swapImage('froast','','assets/nav/froast_ro.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/froast_on.gif" name="froast" width="80" height="9" border="0" id="froast" /></a></td>
</tr>
<tr>
<td width="82" height="200" align="right" valign="top" bgcolor="ffd457"><a href="order.html" onmouseover="MM_swapImage('order','','assets/nav/order_ro.gif',1)" onmouseout="MM_swapImgRestore()"><img src="assets/nav/order_on.gif" name="order" width="34" height="9" border="0" id="order" /></a></td></tr>
<!-- InstanceEndEditable -->
</table><table width="750" height="70" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" align="right"><img src="assets/nav/o_dot.gif" width="750" height="1" border="0" /></td>
</tr>
<tr>
<td width="166" height="69"> </td><td width="35" height="69"><img src="assets/nav/yvert3.gif" width="35" height="69" border="0" /></td>
<td width="416" height="69" bgcolor="ffd457"> </td>
<td width="133" height="69" bgcolor="ffd457"> </td>
</tr>
</table>
</body>
<!-- InstanceEnd -->
</html>
<Sorry, no personal URLs. See Terms of Service [webmasterworld.com]>
[edited by: tedster at 5:43 am (utc) on Aug. 25, 2005]
[edited by: encyclo at 12:37 pm (utc) on Aug. 25, 2005]
[edit reason] fix sideways scroll [/edit]
However, it's better still to be completely standards compliant and use a css "style" attribute:
style="background-color:#ffd457;"
I understand using a CSS "style" attribute, but only some of the table cells require a background color, not the entire table, so unless I'm mistaken, I don't think I can use: style="background-color:#ffd457;".
If there is a way to use CSS to assign a background color to just some of the cells?
Thanks again!
Monica
The problem you are experiencing is due to the difference between quirks mode and standards-compliance mode [webmasterworld.com] in the browser.
As tedster has said, you are missing the "#" symbol before the color declaration. As you are using an XHTML doctype, the browser is in standards-compliance mode and does not accept the colors defined without the "#".
For the style declaration, you can use it on each
<td>
Best,
Monica
