The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Black Backgrounds only appearing in chrome? Help!
adymond
post Feb 2 2011, 04:29 PM
Post #1





Group: Members
Posts: 2
Joined: 2-February 11
Member No.: 13,773
Soo.. this is what it is doing in chrome:
http://s11.photobucket.com/albums/a154/kit...view¤t=help.jpg
the black boxes are ugly...
open up the website in firefox, and it looks pretty: http://amandadymond.com/test/index.html
I don't understand why this is happening.. I mean it works for some of the navigation, but not all in chrome?

Here is the code, even though I doubt this is the problem.. but maybe there is a smarter way to go about this that is all browser compatible? any suggestions would be greatly appreciated
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=utf-8" />
<title>Amanda Dymond Illustration</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--


table.navbar1 {
   border-collapse: collapse;
}
table.navbar1 td {
   border: 0px solid black;
}
table.navbar1 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar1 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFF;
}
table.navbar1 td a:hover, table.navbar td a:active {
    color: #fff;
    background-image:url(navbg1.gif)
}


table.navbar2 {
   border-collapse: collapse;
}
table.navbar2 td {
   border: 0px solid black;
}
table.navbar2 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar2 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFF;
}
table.navbar2 td a:hover, table.navbar td a:active {
   color: #fff;
  background-image:url(navbg2.gif)
}


table.navbar3 {
   border-collapse: collapse;
}
table.navbar3 td {
   border: 0px solid black;
}
table.navbar3 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar3 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFFFFF;
}
table.navbar3 td a:hover, table.navbar td a:active {
   color: #fff;
   background-image:url(navbg3.gif)
}


table.navbar4 {
   border-collapse: collapse;
}
table.navbar4 td {
   border: 0px solid black;
}
table.navbar4 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar4 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFFFFF;
}
table.navbar4 td a:hover, table.navbar td a:active {
   color: #fff;
   background-image:url(navbg4.gif)
}





table.navbar5 {
   border-collapse: collapse;
}
table.navbar5 td {
   border: 0px solid black;
}
table.navbar5 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar5 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFFFFF;
}
table.navbar5 td a:hover, table.navbar td a:active {
    color: #fff;
    background-image:url(navbg5.gif)
}



table.navbar6 {
   border-collapse: collapse;
}
table.navbar6 td {
   border: 0px solid black;
}
table.navbar6 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar6 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFFFFF;
}
table.navbar6 td a:hover, table.navbar td a:active {
   color: #fff;
   background-image:url(navbg6.gif)
}




table.navbar7 {
   border-collapse: collapse;
}
table.navbar7 td {
   border: 0px solid black;
}
table.navbar7 td a{
   display: block;
   width: 200px;
   padding: 0px;
   text-decoration: none;
}
table.navbar7 td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #FFFFFF;
}
table.navbar7 td a:hover, table.navbar td a:active {
   color: #fff;
   background-image:url(navbg7.gif)
}



.type {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #160F1E;
}
a:link {
    color: #160F1E;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #160F1E;
}
a:hover {
    text-decoration: none;
    color: #FFF;
}
a:active {
    text-decoration: none;
    color: #000;
}
-->
</style>
</style>
<script type="text/javascript">
<!--
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_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_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>
<br />
<br />
<br />

<table width="754" border="0" cellpadding="1" cellspacing="0">
  <tr>
    <td width="204" valign="top">


<table width="204" border="0" cellspacing="0" cellpadding="1" bgcolor= #FFFFFF>
  <tr valign="top">
    <td width="202"><img src="LOGO.gif" width="200" height="100" /></td>
  </tr>
  </table>
  <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar1" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "index.html">Home</a></td>
  </tr>
  </table>
  <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar2" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "illustration.html">Illustration</a></td>
  </tr>
  </table>
     <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar3" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "design.html">Design</a></td>
  </tr>
  </table>
   <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar4" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "info.html">Info Illustration</a></td>
  </tr>
  </table>
   <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar5" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "about.html">About</a></td>
  </tr>
  </table>
   <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar6" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "contact.html">Contact</a></td>
  </tr>
  </table>
   <table width="200" border="0" cellspacing="0" cellpadding="1" class="navbar7" bgcolor= #FFFFFF>
  <tr>
    <td align="right" valign="bottom" class="type"><a href= "store.html">Store</a></td>
  </tr>
</table>
    </td>
    <td width="546" border="0" cellspacing="0" cellpadding="20"><center><img src="seawitch_03.jpg" align="middle" /></center></td>
  </tr>
<tr>
<td colspan="2">
  <p style="font-size: 10px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; color: #6A5294; text-align: center;">© 2010 Amanda Dymond
    <br />info@amandadymond.com
  <br />647.342.3163</p>
</td>
</tr>
</table>
</body>
</html>


Thanks so much for your help! wub.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 2 2011, 08:05 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Interesting: "Firefox can't find the server at amandadymond.com."

But http://www.amandadymond.com/test/index.html works fine. Anyway, the online tools report markup and CSS errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 3 2011, 03:04 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Also, SpryMenuBar.js and SpryMenuBarVertical.css return as 404 not found.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th April 2024 - 01:25 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC