Solved

Can't get an image to display on my webpage no matter what I do

Posted on 2015-02-01
16
67 Views
Last Modified: 2015-02-06
I have a website: http://goodkarmamarket.com and going to it you will see there is a dark blue rectangle on the right hand side (below the white text with the blue background) and for the life of me I can't figure out why it's not showing up. It's similar to the pink button on the left, with a text overlay.

I've looked over the code a dozen times and can't see what's different from the pink button code that does show up and the blue button code that does not show up.

And just to prove that the image file is in the images folder, attached is a screen shot. You can see the source code but if you want me to post the code I'm uploading, it is also attached.
<html>
<head>
<title>Good Karma Market - Your place to buy from fellow community members - world wide!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#Table_01 {
	position: absolute;
	left: 15%;
	width: 950px;
	margin: 0 auto;
}
#top-banner {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 950px;
	height: 72px;
}
#sliced-02 {
	position: absolute;
	left: 0px;
	top: 72px;
	width: 245px;
	height: 42px;
}
#sub-heading {
	position: absolute;
	left: 245px;
	top: 72px;
	width: 459px;
	height: 42px;
	font-size: 20px;
	font-family: Century Gothic, verdana;
	color: rgb(0, 51, 255);
	font-weight: bold;
	font-style: italic;
	text-align: center;
}
#sliced-04 {
	position: absolute;
	left: 704px;
	top: 72px;
	width: 246px;
	height: 42px;
}
#sliced-05 {
	position: absolute;
	left: 0px;
	top: 114px;
	width: 245px;
	height: 101px;
}
#sliced-06 {
	position: absolute;
	left: 245px;
	top: 114px;
	width: 459px;
	height: 101px;
}
#sliced-07 {
	position: absolute;
	left: 704px;
	top: 114px;
	width: 246px;
	height: 101px;
}
#sliced-08 {
	position: absolute;
	left: 0px;
	top: 215px;
	width: 30px;
	height: 82px;
}
#sliced-09 {
	position: absolute;
	left: 30px;
	top: 215px;
	width: 215px;
	height: 82px;
}
#sliced-10 {
	position: absolute;
	left: 245px;
	top: 215px;
	width: 459px;
	height: 395px;
}
#sliced-11 {
	position: absolute;
	left: 704px;
	top: 215px;
	width: 216px;
	height: 82px;
}
#sliced-12 {
	position: absolute;
	left: 920px;
	top: 215px;
	width: 30px;
	height: 82px;
}
#sliced-13 {
	position: absolute;
	left: 0px;
	top: 297px;
	width: 30px;
	height: 313px;
}
#marketplace {
	position: absolute;
	left: 30px;
	top: 297px;
	width: 215px;
	height: 313px;
	font-family: century gothic, verdana, sans-serif;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
#classifieds {
	position: absolute;
	left: 704px;
	top: 297px;
	width: 215px;
	height: 313px;
	font-family: century gothic, verdana, sans-serif;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
#sliced-16 {
	position: absolute;
	left: 919px;
	top: 297px;
	width: 31px;
	height: 313px;
}
#post-market {
	position: absolute;
	left: 0px;
	top: 610px;
	width: 245px;
	height: 131px;
}
#sliced-18 {
	position: absolute;
	left: 245px;
	top: 610px;
	width: 459px;
	height: 131px;
}
#post-ad {
	position: absolute;
	 left: 704px;
	 top: 610px;
	width: 246px;
	height: 131px;
}
#homePageDesign-sliced-12 {
	position: absolute;
	left: 0px;
	top: 741px;
	width: 212px;
	height: 75px;
	background-color: #FAEDDD;
}
#sliced-21 {
	position: absolute;
	left: 212px;
	top: 741px;
	width: 527px;
	height: 75px;
	font-size: 20px;
	font-family: Century Gothic, verdana;
	color: rgb(0, 51, 255);
	font-weight: bold;
	font-style: italic;
	text-align: center;
}
#homePageDesign-sliced-14 {
	position: absolute;
	left: 739px;
	top: 741px;
	width: 211px;
	height: 75px;
	background-color: #FAEDDD;
}
#homePageDesign-sliced-15 {
	position: absolute;
	left: 0px;
	top: 816px;
	width: 316px;
	height: 205px;
	background-color: #FAEDDD;
}
#homePageDesign-sliced-16 {
	position: absolute;
	left: 316px;
	top: 816px;
	width: 316px;
	height: 205px;
	background-color: #FAEDDD;
}
#homePageDesign-sliced-17 {
	position: absolute;
	left: 632px;
	top: 816px;
	width: 318px;
	height: 205px;
	background-color: #FAEDDD;
}
#bottom-slice {
	position: absolute;
	left: 0px;
	top: 1021px;
	width: 950px;
	height: 105px;
	background-color: #FAEDDD;
}
#bottom-section {
	position: absolute;
	left: 0px;
	top: 1126px;
	width: 950px;
	height: 1px;
	background-color: #FAEDDD;
}
-->
</style>
</head>
<body style="background-color: #02086E; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="Table_01">
  <div id="top-banner"> <a href="http://www.goodkarmamarket.com"><img src="http://goodkarmamarket.com/wp-includes/images/top_banner.jpg" width="950" height="72" alt="" border=0></a><a href="about.html"><IMG STYLE="position:absolute; TOP:25px; LEFT:830px; WIDTH:45px; HEIGHT:47px" src="http://goodkarmamarket.com/wp-includes/images/mbehr_circle_large.png"border=0></a> </div>
  <div id="sliced-02"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_02.jpg" width="245" height="42" alt=""> </div>
  <div id="sub-heading" style="background-image:url(http://goodkarmamarket.com/wp-includes/images/sub_heading.jpg); width:459px; height:42px;">Helping Us Help One Another </div>
  <img src="images/sub_heading.jpg" width="459" height="42" alt=""/>
  <div id="sliced-04"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_04.jpg" width="246" height="42" alt=""> </div>
  <div id="sliced-05"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_05.jpg" width="245" height="101" alt=""> </div>
  <div id="sliced-06"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_06.jpg" width="459" height="101" alt=""> </div>
  <div id="sliced-07"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_07.jpg" width="246" height="101" alt=""> </div>
  <div id="sliced-08"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_08.jpg" width="30" height="82" alt=""> </div>
  <div id="sliced-09"> <a href="#"><img src="http://goodkarmamarket.com/wp-includes/images/sliced_09.jpg" width="215" height="82" alt="" border="0"></a> </div>
  <div id="sliced-10"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_10.jpg" width="459" height="395" alt=""> </div>
  <div id="sliced-11"> <a href="#"><img src="http://goodkarmamarket.com/wp-includes/images/sliced_11.jpg" width="216" height="82" alt="" border="0"></a> </div>
  <div id="sliced-12"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_12.jpg" width="30" height="82" alt=""> </div>
  <div id="sliced-13"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_13.jpg" width="30" height="313" alt=""> </div>
  <div id="marketplace"  style="background-image:url(http://goodkarmamarket.com/wp-includes/images/marketplace.jpg); width:215px; height:313px;"> Want 
    to buy handmade items directly from <br>
    the people who <br>
    make them?
    <p>Or, are you creative, inventive and make things that you
      want to sell?</p>
    <p>Need an online store to 
      sell your creative product? </p>
    <p>Would you like to sell to <br>
      and buy from 
      community members worldwide? </p>
  </div>
  <div id="classifieds" style="background-image:url(http://goodkarmamarket.com/wp-includes/images/classifieds.jpg); width: 215px; height:313px;"> Need to get rid of <br>
    some stuff?
    <p>Have a car for sale?<br>
      <br>
      A  vacation rental? <br>
      A home for 
      
      sale or rent?</p>
    <p> Looking for a job? Or know of an available job?</p>
    <p>Have a business, service or skill you want to advertise and let people <br>
      know about? </p>
  </div>
  <div id="sliced-16"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_16.jpg" width="31" height="313" alt=""> </div>
  <div id="post-market" style="background-image:url(http://goodkarmamarket.com/wp-includes/images/post_market.jpg); width: 245px; height:131px;"> </div>
  <DIV style="position: absolute; top: 628px; width: 183px; left: 44px; height: 82px; padding-top: 10px; text-align: center;"> <a href="#" style="font-size: 15px; font-family: century gothic, verdana, sans-serif; color: rgba(146,5,123,1.00);
	font-weight: bold; line-height:17px; text-decoration:none;">Click here to shop or<br>
    set up your own store. <br>
    <em><strong style="font-size:17px;"><u>It’s free!</u></strong></em></a> </div>
  <div id="sliced-18"> <img src="http://goodkarmamarket.com/wp-includes/images/sliced_18.jpg" width="459" height="131" alt=""> </div>
  <div id="post-ad" style="background-image:url(http://goodkarmamarket.com/wp-includes/images/post_ad.jpg); width: 246px; 
  height:131px;"> </div>
  <DIV style="position: absolute; left: 704px; top: 611px; width: 246px; height: 131px; padding-top: 10px; text-align: center;"> <a href="#" style="font-size: 15px; font-family: century gothic, verdana, sans-serif; color: rgba(3,22,132,1.00);
	font-weight: bold; line-height: 17px; text-decoration:none;">Click here to buy from<br>
    (and sell to) community<br>
    members world-wide!<br>
    <em><strong style="font-size:17px;"><u>It’s free!</u></strong></em> </a></DIV>
  <div id="homePageDesign-sliced-12">&nbsp; </div>
  <div id="sliced-21" style="background-image:url(http://goodkarmamarket.com/wp-includes/images/sliced_21.jpg); width:527px; height:75px; padding-top: 7px;" class="text"> Buy and sell directly from friends worldwide!<br>
    A community alternative to Craigslist, Ebay and Etsy </div>
  <div id="homePageDesign-sliced-14">&nbsp;</div>
  <div id="homePageDesign-sliced-15"> &nbsp;</div>
  <div id="homePageDesign-sliced-16"> &nbsp;</div>
  <div id="homePageDesign-sliced-17"> &nbsp;</div>
  <div id="bottom-section">&nbsp; </div>
</div>
</body>
</html>

Open in new window


Help would be greatly appreciate.
Michael
image
0
Comment
Question by:mabehr
16 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40582869
It shows up just fine in Firefox.  ??  And in IE8 and Chrome.
0
 

Author Comment

by:mabehr
ID: 40582874
attached is the way I see it

screen shot
0
 

Author Comment

by:mabehr
ID: 40582885
and here's a screenshot from IE 8
0
 

Author Comment

by:mabehr
ID: 40582888
screenshot
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40582894
This is what I see in all browsers.
GK Market
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40582909
I went to a different computer on a different network and I still see the image like above in Firefox and Opera 27.
0
 

Author Comment

by:mabehr
ID: 40582910
wow, that is strange. Yes, I see it in Chrome but not in IE or Firefox even though I cleared my cache in firefox.
0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40582922
Did you do a Ctrl-F5 refresh of the page?  Can you load it directly from http://goodkarmamarket.com/wp-includes/images/post_ad.jpg ?
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:mabehr
ID: 40582940
yes, I can see the image through the link but a Ctrl F5 doesn't change anything. Strange.
0
 

Author Comment

by:mabehr
ID: 40583819
what version on Firefox are you seeing the image?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 40584423
Just to back up what Dave's said - I can see it fine too - one thing that I would suggest is that you fix your HTML - currently your page is not valid HTML and gets rendered in Quirks mode - without going into detail, that's not good - you'll never get consistency across browsers in Quirks mode, and debugging can be nigh on impossible.

Start by changing the very first line of your HTML to:

<!DOCTYPE html>

And then run it through the W3C validator - fix any errors and then check your page again.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40584512
I'm on Firefox 35.0.1 like you are and Chrome and Opera are current also.
0
 

Author Comment

by:mabehr
ID: 40585307
Thanks, Chris. Did what you said and added the line and did check:

W3C CSS Validator results for http://goodkarmamarket.com (CSS level 3)
Congratulations! No Error Found.

This document validates as CSS level 3 !

Still don't see the image in my firefox browser.
0
 
LVL 7

Expert Comment

by:Alicia St Rose
ID: 40585697
mabehr,
You want to validate your HTML. That's where you'll see the errors.

Are you also aware that you can use background-color, border and border-radius in CSS3 to achieve the same effects you're getting by using images. Especially, for this section at the bottom of your page:

"Buy and sell directly from friends worldwide!
A community alternative to Craigslist, Ebay and Etsy"

Right now it's being cut off and extending past your image. By creating the background with CSS3 the div would grow with the content and you'd always have the text inside.
0
 

Author Closing Comment

by:mabehr
ID: 40594261
although I have yet to see the image in my browser, I'm at least comforted to know that others are seeing it and will get to the bottom of it sooner or later.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40594779
Come back if you get any more info that we can help with.  Thanks for the points.
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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

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

12 Experts available now in Live!

Get 1:1 Help Now