Solved

How to display table cell background images in IE

Posted on 2008-06-23
7
4,655 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

708 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now