Solved

How to display table cell background images in IE

Posted on 2008-06-23
7
4,659 Views
Last Modified: 2013-12-08
Several years ago I created a web page called "LeeTutor's Doing and Fixing Windows" at my ISP's personal webspace site.  (See my E-E profile to get the address.)  I used the free tool from Microsoft, FrontPage Express to do it.  I have recently started working on it again after importing the web pages into an old copy of Dreamweaver that I acquired, version 4 to be exact.  I wanted to change the original site's use of background colors in the table cells to instead use background images of textured designs.  I have succeeded in doing this by changing all bgcolor tags to be background tags.  It looks very nice in Dreamweaver.  But the background images do not display in Internet Explorer!!  The text on my local site displays on a plain white background...  

I tried IE7 in both Vista and XP, and also IE6 in XP, in case it might be a browser bug, and it reacts the same in all of them.  Also doesn't display correctly in Firefox 3 on my Vista computer.

Here is the page on my site that I am trying to modify in Dreamweaver:

http://home.earthlink.net/~leetutor/DoWin/contmenu.htm

I will attach files with screenshots showing what it looks like in Dreamweaver, and in IE, and also the page's HTML saved in a file with the HTM file extension changed to .TXT.

I googled about the problem, and found this interesting page:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14012
Internet Explorer does not display the background image in a table cell

But checking my code, it doesn't suffer from the described problem:  the background tag is in the TD element, not in the TR element.

I am barely above a Beginner in HTML and web page development using Dreamweaver.  Please suggest the easiest way I can get the background images in my table cells to display in IE and other popular web browsers...  And I am looking for EASY ways.  From my googling, I found that I could try doing it using CSS, but I have just barely started learning about that, and the prospect of adding a CSS style sheet to each of my over 500 web pages sounds daunting to say the least!
DreamweaverCapture.JPG
IECapture.JPG
ContMenu.txt
0
Comment
Question by:LeeTutor
  • 3
  • 2
  • 2
7 Comments
 
LVL 11

Accepted Solution

by:
glumlun earned 250 total points
ID: 21846497
css would definately be the answer here.

attached is a 2 td table with clases appled to the tdd's and the corresponding css at the top of the page.
have a play with that.

let me know if you require any  more help
<!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" />
<title>Untitled Document</title>
 
<style>
 
.bg1 {
	background-image: url(yourimage1.jpg)
}
 
.bg2 {
	background-image: url(yourimage2.jpg)
}
 
</style>
 
</head>
 
<body>
 
<table width="350" border="0" cellspacing="5" cellpadding="5">
  <tr>
    <td class="bg1">&nbsp;</td>
  </tr>
  <tr>
    <td class="bg2">&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

Open in new window

0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 250 total points
ID: 21851553
I doubt this is an IE bug, as IE has no problems displaying images for backgrounds.  It is probably that DW is trying to spread or slice the image in some way or other.  You can use either CSS or table specs, but with DW, you will have to fix the code manually, for example --

<TABLE background="images/gif1.gif">
   <TR background="images/gif2.gif">
     <TD background="images/gif2.gif>

etc.  Make sure the path is correct with no preceeding slash.  Remove the "images/" if in the root dir.

or with CSS --

.borderTable { border: 1px solid #000000; background:images/gif1.gif; }
.borderTD { border: 0px solid #000000;  background: images/image2.gif; }
.borderTR { border: 0px solid #000000;  background:images/gif3.gif; }
0
 
LVL 59

Author Comment

by:LeeTutor
ID: 21891390
All right, I finally figured it out.  It turns out that Dreamweaver somehow generated an incorrect reference to my background image files in the HTML, and once I corrected that, it worked.  

But before I figured it out (as well as figuring out how to make changes to over 500 different web pages on my local site without individually editing each page of HTML code! -- I was able to use Dreamweaver's global find and replace function), I took a look at the option of using CSS, since you both had recommended it.  I found some nice CSS tutorials on the net and experimented around with the code to see if I could get it working.  I tried in-line CSS, as well as using an external style sheet, and until today I couldn't get it to work.  But then I found this important piece of information:

http://www.w3.org/TR/CSS1/#url

quote:

6.4    URL
A Uniform Resource Locator (URL) is identified with a functional notation:

BODY { background: url(http://www.bg.com/pinkish.gif) }

The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself (as defined in [11]) followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. Quote characters that are not part of the URL itself must be balanced.

Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash: '\(', '\)', '\,'.

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:

BODY { background: url(yellow) }



The important piece of information is the last sentence, for in my previous experimenting around where it didn't work, the URL I was using to link to the background image was relative to the web page code, not relative to the source of the style sheet.  Once I had corrected that, it worked...

So I really solved this question myself, but both of your comments led me to learn more about CSS, so I will split the points.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 59

Author Comment

by:LeeTutor
ID: 21891401
By the way, sorry to take so long to finalize this question, but I'm a big tennis fan and I hadn't found it easy to find the time to investigate this problem because I spend most of every day watching Wimbledon on ESPN2...  ;0)
0
 
LVL 11

Expert Comment

by:glumlun
ID: 21891406
ha.
tennis and css is the same thing, so you should get on fine. thanks for the feedback
love all me thinks
Glum
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21891591
Lee -- you should be aware that putting a direct link in the webpage to a background image can cause big problems -- first, it radically slows down how quick your pages load.  Second, if the web page that has the background is down, your own site will seize cold, waiting for a downed site.  Third, people change their sites from month to month, almost all links like that become obsolete in a year.

I encourage you to do this -- (1) if you can download the BG and use it free, do that with all you need and remove all hot links to other websites.  If you can't find a different background to use.
(2).  Do not have any embedded links in your pages where your own page loading depends on them, it will bite you.  The only links to outside sites (including "partner" sites), should be as a clickable link.  So only the loading of the other page is affected, not your own.
0
 
LVL 59

Author Comment

by:LeeTutor
ID: 21891614
The background images were ones I downloaded (and they were free) and I put them in a folder I called backgrounds which is on the site.  So there is no dependency on other people's pages...
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question