.png displaying correctly in IE8,Avant BUT NOT in Firefox, Chrome, or Opera

Hello everyone,

Attached below is a textbook exercise on the topic of “using tables for page layout”

Everything displays correctly in the IE8, Avant and Maxthon browsers but the topright.png is NOT displaying correctly in Firefox, Opera, Safari or Chrome.

Any ideas of why this is occurring?


KPAF Nightly Schedule

Filename: schedule.htm
Supporting files: bottom.png, bottomleft.png, bottomright.png,
left.png, kpaf.css, kpaf.jpg, newshows.css, right.png,
rounded.css, tables.css, top.png, topleft.png,

<title>KPAF Nightly Schedule</title>
<link href=“kpaf.css” rel=“stylesheet” type=“text/css” />
<link href=“tables.css” rel=“stylesheet” type=“text/css” />
<link href=“rounded.css” rel=“stylesheet” type=“text/css” />
<link href=“newshows.css” rel=“stylesheet” type=“text/css” />

<div id=“heading”>
<h2>| Listener supported <i>since</i> 1966</h2>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Schedule</a></li>
<li><a href=“#”>Programs</a></li>
<li><a href=“#”>Music</a></li>
<li><a href=“#”>News</a></li>
<li><a href=“#”>Events</a></li>
<li><a href=“#”>Listen Live</a></li>
<li><a href=“#”>Contact Us</a></li>
<li><a href=“#”>Support KPAF</a></li>

<div id=“page_content”>
<h1><img src=“kpaf.jpg” alt=“KPAF” /></h1>

  &lt;h2&gt;KPAF Nightly Schedule&lt;/h2&gt;
  &lt;p&gt;KPAF airs listener-supported public radio in Bismarck, North Dakota from 
     5:00 a.m. to 10:30 p.m. You can &lt;a href="#"&gt;Listen Live&lt;/a&gt; to streaming audio of our broadcast. Please refer below for our current nightly schedule.&lt;/p&gt;
	 &lt;table class="schedule"
	        summary="This table contains the nightly KPAF program schedule aired from Bismarck, North Dakota. Program times are laid out in thirty-minute increments from 6:00 p.m. to 10:00 p.m., Monday through Sunday night."&gt;
	    &lt;caption&gt;All times listed in central time&lt;/caption&gt;
		   &lt;col class="firstCol" /&gt;
		   &lt;col class="dayCols" span="7" /&gt;
		&lt;tbody &gt;
		   &lt;td colspan="7"&gt;National News&lt;/td&gt;  
			&lt;td colspan="7"&gt;Local News&lt;/td&gt;		
		   &lt;td rowspan="2"&gt;Opera Fest&lt;/td&gt;
		   &lt;td rowspan="2"&gt;Radio U&lt;/td&gt;
		   &lt;td rowspan="2"&gt;Science Week&lt;/td&gt;
		   &lt;td rowspan="2"&gt;The Living Word&lt;/td&gt;
		   &lt;td&gt;Word Play&lt;/td&gt;
		   &lt;td rowspan="2"&gt;Folk Fest&lt;/td&gt;
		   &lt;td&gt;Brain Stew&lt;/td&gt;
		   &lt;td&gt;Bismarck Forum&lt;/td&gt;
		   &lt;td rowspan="4" colspan="4"&gt;The Classical Music Connection&lt;/td&gt;
		   &lt;td&gt;Old Time Radio&lt;/td&gt;
		   &lt;td rowspan="4"&gt;Saturday Night Jazz&lt;/td&gt;
		   &lt;td rowspan="4"&gt;The Indie Connection&lt;/td&gt;
		   &lt;td&gt;The Inner Mind&lt;/td&gt;
		   &lt;td rowspan="2"&gt;Open Mike Nite&lt;/td&gt;
           &lt;td colspan="7"&gt;World News Feed&lt;/td&gt;			   

     KPAF &#183; 
     4300 Magnolia Lane &#183;
     Bismarck, ND 58504 &#183;
     (701) 555 - 5611


<div id=“right_col”>
<table class=“roundedBox”>
<td class=“topLeft”></td>
<td class=“top”></td>
<td class=“topRight”></td>
<td class=“left”></td>
<td class=“boxContent”>
<h1 class=“newshows”>Coming Up on KPAF</h1>

           &lt;ul class="newshows"&gt;
                 &lt;h2 class="newshows"&gt;April 11 - 14&lt;/h2&gt;
                 &lt;h3 class="newshows"&gt;The Classical Music Connection&lt;/h3&gt;
                 &lt;p&gt;Peter Thiesen shares his eclectic
                    selections from the world of classical 
                 &lt;h2 class="newshows"&gt;April 11&lt;/h2&gt;
                 &lt;h3 class="newshows"&gt;Opera Fest&lt;/h3&gt;
                 &lt;p&gt;Excerpts from &lt;i&gt;Turandot&lt;/i&gt; by Giacomo Puccini.&lt;/p&gt;
                 &lt;h2 class="newshows"&gt;April 12&lt;/h2&gt;
                 &lt;h3 class="newshows"&gt;Radio U&lt;/h3&gt;
                 &lt;p&gt;Novelist Karen Graves reads from her latest
                    work, &lt;i&gt;Hellion of Troy&lt;/i&gt;.&lt;/p&gt;
                 &lt;h2 class="newshows"&gt;April 13&lt;/h2&gt;
                 &lt;h3 class="newshows"&gt;Science Week&lt;/h3&gt;
                 &lt;p&gt;Prof. Thomas Glass from UND discusses
                    &lt;i&gt;String Theory and Spooky Action at a Distance&lt;/i&gt;.&lt;/p&gt;
                 &lt;h2 class="newshows"&gt;April 14&lt;/h2&gt;
                 &lt;h3 class="newshows"&gt;The Living World&lt;/h3&gt;
                 &lt;p&gt;A panel discussion on 
                     the &lt;i&gt;Return of the Electric Car&lt;/i&gt; and the latest 
                     in eco-news.&lt;/p&gt;
		&lt;td class="right"&gt;&lt;/td&gt;		 
	    &lt;td class="bottomLeft"&gt;&lt;/td&gt;
		&lt;td class="bottom"&gt;&lt;/td&gt;
		&lt;td class="bottomRight"&gt;&lt;/td&gt;		 



Filename: kpaf.css
Supporting Files: none


body {margin: 0px}
#heading {color: white; background-color: rgb(215, 205, 151);
border-bottom: 1px solid rgb(105, 177, 60)}
#page_content {width: 730px; position: absolute; top: 55px; left: 20px}

#right_col {width: 200px; position: absolute; top: 55px; left: 770px}}

h1, h2, h3, p {font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif}

address {font-size: 0.65em; font-style: normal; text-align: center;
font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;
color: white; background-color: rgb(105, 177, 60);
margin: 20px 0px}

#heading h2 {color: white; background-color: rgb(105, 177, 60);
font-size: 1.1em; padding: 5px 0px 5px 12px; margin: 0px}
#heading i {font-size: 0.7em}

#heading ul {list-style-type: none; margin: 0px; padding: 0px}
#heading ul li {display: inline; font-size: 0.7em;
font-family: ‘Courier New’, monospace;
background-color: rgb(215, 205, 151);
padding: 0px 10px; margin: 0px}

#heading ul li a {text-decoration: none; color: rgb(105, 177, 60)}
#heading ul li a:hover {color: rgb(153, 0, 153)}

#page_content h1 {margin: 0px; padding: 0px}
#page_content h2 {color: white; background-color: rgb(153, 0, 153);
font-size: 1.1em; padding: 5px 0px 5px 12px; margin: 0px}

Filename: tables.css
Supporting Files:


table.schedule {border: 10px outset rgb(153, 0, 153); border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; width: 100%}

table.schedule th, table.schedule td {border: 1px solid gray}

table.schedule thead {color: white; background-color: rgb(203, 50, 203)}

table.schedule col.firstCol {background-color: rgb(255, 255, 192); width: 7%}

table.schedule col.dayCols {width: 13%}

table.schedule thead tr {height: 20px}
table.schedule tbody tr {height: 30px}

table.schedule tbody td {vertical-align: top; padding: 5px}
table.schedule caption {caption-side: top; text-align: right}[/COLOR]

Style Sheet to create rounded boxes

Filename: rounded.css
Supporting Files: bottom.png, bottomleft.png, bottomright.png, left.png,
right.png, top.png, topleft.png, topright.png


table.roundedBox {margin: 5px; border-collapse: collapse}
table.roundedBox td {padding: 0px}

table.roundedBox td.topLeft {width: 16px; height: 16px}
table.roundedBox td.topRight {width: 16px; height: 16px}
table.roundedBox td.bottomLeft {width: 16px; height: 16px}
table.roundedBox td.bottomRight {width: 16px; height: 16px}

table.roundedBox td.top {width: auto; height: 16px}
table.roundedBox td.bottom {width: auto; height: 16px}

table.roundedBox td.left {width: 16px; height: auto}
table.roundedBox td.right {width: 16px; height: auto}

.topLeft {background: url(topleft.png) no-repeat top left}
.topRight {background: url(topright.png) no-repat top right}
.bottomLeft {background: url(bottomleft.png) no-repeat bottom left}
.bottomRight {background: url(bottomright.png) no-repeat bottom right}

.top {background: url(top.png) repeat-x top}
.bottom {background: url(bottom.png) repeat-x bottom}

.left {background: url(left.png) repeat-y left}
.right {background: url(right.png) repeat-y right}[/COLOR]



Style Sheet for upcoming new shows

Filename: newshows.css
Supporting Files:


h1.newshows {font-size: 0.9em; text-align: center;
color: white; background-color: rgb(153,0,153);
font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;
margin: 0px; padding: 0px}

h2.newshows {font-size: 0.9em; color: black; text-align: left; line-height: 0.95;
font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;
margin: 10px 0px 0px 0px; padding: 0px}

h3.newshows {font-size: 0.9em; color: black; text-align: left; font-weight: bold;
font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;
margin: 0px; padding: 0px}

ul.newshows {font-size: 0.7em; padding: 0px; margin: 0px 0px 0px 5px;
list-style-type: none}

ul.newshows li {padding: 0px; margin: 0px}

ul.newshows li p {font-size: 1em; margin: 5px 0px 0px 0px; padding: 0px 0px 0px 5px;
border-left: 4px solid rgb(255,202,255)}

p.newshows {font-size: 0.7em; padding: 0px 0px 0px 5px; margin: 5px 0px 0px 0px;
border-left: 4px solid rgb(255,202,255)}

Any images I use I always save as jpg and sometimes gif.
Anyone knows, why would you want to use a png instead of a jpg?

If you save your image as a jpg instead of png, does it then work in the other browsers?

I will give it a try… Thanks for the suggestion… all the other .pngs display correctly in all browsers

Hmmm, you have a typo in rounded.css:

no-repat top right -> no-rep[e]at top right

That will solve your main ‘topright.png’ missing issue.

Well (not including the banner); those eight superior lossless PNG-8 files can produce a far smaller image size than a lossy (JPG at around 80% quality).

The eight files saved as: JPG (2,790 bytes) 80% save quality.
The eight files saved as: PNG (1,969 bytes) PNG-8

Optimised (eight files) PNG-8 (1,504 bytes). So you can see the JPG was overkill since the images usually had less than 50 colours and very little gradient ‘horses for courses’ and PNG won yet again. Obviously these are just using the above files so you will get slight differences depending on settings.

Thank you very much for the assistance, xhtmlcoder.

The table is now displaying correctly in all browsers.

No problem. I just looked at that line and noticed a misspelling.

Remember, you can always use the W3C CSS Validator too; it may be of help in the future.

Thank you

No need to thank me twice but much appreciated. :slight_smile:

So the problem wasn’t to do with the PNG image at all, but rather default browser behaviour. Interesting turn around.