We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Can't get an image to display on my webpage no matter what I do
Posted on 2015-02-01
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.
Help would be greatly appreciate.
Michael
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"> </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"> </div>
<div id="homePageDesign-sliced-15"> </div>
<div id="homePageDesign-sliced-16"> </div>
<div id="homePageDesign-sliced-17"> </div>
<div id="bottom-section"> </div>
</div>
</body>
</html>
Help would be greatly appreciate.
Michael
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
8
6
- +1
16 Comments
Active today
I went to a different computer on a different network and I still see the image like above in Firefox and Opera 27.
wow, that is strange. Yes, I see it in Chrome but not in IE or Firefox even though I cleared my cache in firefox.
Active today
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 ?
Active today
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.
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.
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.
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.
Active 1 day ago
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.
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.
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.
Featured Post
We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month4 days, 11 hours left to enroll
635 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.