SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    Newport News, VA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table background image error

    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:
    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>
      <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:
    Code:
     <style type="text/css">
    #bar {
      background-image:url('bg.gif');
      background-repeat:repeat-x;  
      background-size:50px 50px;  
    } 
    </style>
    and then
    Code:
     <table width="100%">
       <tbody>
        <tr>
         <td id="bar"></td>
        </tr>
    ....
    If anyone could shed some light on this I would deeply appriciative.

    -David
    -David

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,210
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Maybe you could just do this in your CSS:

    Code:
    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. #3
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    Newport News, VA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

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

    Code:
          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
    -David

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,210
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Great, glad that helped. A simpler way to write that code is:

    Code:
      margin: 50px 0 0;

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Location
    Newport News, VA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    -David


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •