Table background image error

HTML & CSS
1

Greetings.

I’ve inherited a site that is pretty bad shape. I managed to fix most of the errors, but I have this 1 that I haven’t been able to find a legal replacement for. It basically makes a top horizontal line using a gif ( 50px x 50px ) background the full width of the screen:


<!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>
  <title>Cause it needs 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
  <meta http-equiv="Content-Style-Type" content="text/css"/>
 </head>


 <body style="MARGIN:0px" text="#000000">


 <table width="100%">
  <tbody>
   <tr>
    <td background="images/bg.gif" colSpan="3" height="40">
    </td>
   </tr>
  </tbody>
 </table> 


<!-- W3C Validator -->  
  <p>
    <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10-blue.png" 
         alt="Valid XHTML 1.0 Transitional" 
         align="right"
         height="31" width="88"  border="0" />
    </a>
  </p> 
 </body>
</html>

<td> cannot have either background or colSpan

I’ve tried a lot of combinations of the following with no sucess:



 <style type="text/css">
#bar {
  background-image:url('bg.gif');
  background-repeat:repeat-x;  
  background-size:50px 50px;  
} 
</style>

and then


 <table width="100%">
   <tbody>
    <tr>
     <td id="bar"></td>
    </tr>
....

If anyone could shed some light on this I would deeply appriciative.

-David

2

Maybe you could just do this in your CSS:


body {
  background:url('bg.gif') repeat-x;  
}

Rather than use background-size (which isn’t supported in all browsers) just make sure your image is 50px tall.

3

Ralph,

Thanks! That’s good starting point. I had to add the margins


      margin-top:50px ;  
      margin-right:0px ;  
      margin-left:0px ;  
      margin-bottom:0px ;

in order to drop the table location.

Now to see if they are seamless changes between old pages and new ones.

Thanks again

-David

4

Great, glad that helped. A simpler way to write that code is:


  margin: 50px 0 0;
5

Ah Ha! Didn’t know you could do that. W3Schools reference material can be difficult to navigate at times and the hidden gems don’t just jump out at me. Must be getting old. Thanks again! -David