Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Images doesnt show on Firefox or IE (xhtml project)

Status
Not open for further replies.
Fuzion187

Fuzion187

MIS
Nov 19, 2006
6
GB
Hi, i am kinda new to xhtml and css coding. My site works fine on the xhtml editor but when i try to save it 'index.xhtml' and run try to run it on firefox then the images doesnt show up.

My xhtml code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="<head>
<title>Gaming Zone</title>
<link rel="stylesheet" type="text/css" href="lay.css" />
<style type="text/css">
/*<![CDATA[*/
h6.c2 {font-weight: bold}
p.c1 {font-weight: bold}
/*]]>*/
</style>
</head>

<body>
<div id="whole0"></div>

<div id="whole1"></div>

<div id="whole2"></div>

<div id="banner">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/banner2.jpg" alt="banner" />
</div>

<div id="redbar">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navredbar.jpg" alt="redbar" />
</div>

<div id="redbar1">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navredbar.jpg" alt="redbar1" />
</div>

<div id="nav">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navhome.jpg" alt="nav" />
</div>

<div id="navhome">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navhome1.jpg" alt="navhome" />
</div>

<div id="xbox">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navmxbox.jpg" alt="xbox" />
</div>

<div id="x360">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/navx360.jpg" alt="x360" />
</div>

<div id="ps2">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/ps2.jpg" alt="ps2" />
</div>

<div id="ps3">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/ps3.jpg" alt="ps3" />
</div>

<div id="psp">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/psp.jpg" alt="psp" />
</div>

<div id="gzbglogo">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/bgg.jpg" alt="gzbglogo" />
</div>

<div id="side1"></div>

<div id="side2"></div>

<div id="side3"></div>

<div id="side4"></div>

<div id="wii">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/wii.jpg" alt="wii" />
</div>

<div id="ds">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/ds.jpg" alt="ds" />
</div>

<div id="pcgames">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/pc.jpg" alt="pcgames" />

<div id="Platform">
<br />


<p class="c1">Current Platform Games</p><b>1. NFS CARBON</b>
</div>

<div id="current">
<form id="Select">
<select name="choices">
<option value="Select">
Select
</option>

<option value="Xbox360">
X360
</option>

<option value="Xbox">
Xbox
</option>

<option value="PS2">
PS2
</option>

<option value="PS3">
PS3
</option>

<option value="PSP">
PSP
</option>

<option value="DS">
DS
</option>

<option value="PC">
PC
</option>
</select>
</form>
</div>

<div id="nfs1">
<br />
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/nfsc.jpg" alt="Need For Speed Carbon" border="1" />
</div>

<div id="Platform1">
<p><br />
<b>2. SCARFACE</b></p>

<div id="current1">
<form id="Select">
<select name="choices">
<option value="Select">
Select
</option>

<option value="Xbox">
Xbox
</option>

<option value="PS2">
PS2
</option>

<option value="PSP">
PSP
</option>
</select>
</form>
</div>

<div id="scar">
<br />
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/scarface.gif" alt="Scarface" border="1" />
</div>
</div>
</div>

<div id="news">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/news.jpg" alt="news" />
</div>

<div id="outnow">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/outnow.jpg" alt="outnow" align="left" border="0" hspace="20" />
</div>

<div id="outnow1">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/outnow.jpg" alt="outnow" align="left" border="0" hspace="20" />
</div>

<div id="outnow2">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/outnow.jpg" alt="outnow" align="left" border="0" hspace="20" />
</div>

<div id="gow">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/gow.jpg" alt="Gears of Wars" align="left" border="1" hspace="20" />

<div id="gowinfo">
<h3>1.Gears of War - Xbox360 <span id="bigger"></span></h3>

<p>Gears of War is a tactical third-person shooter video game developed by Epic Games.
<br />
Developed using the Unreal Engine 3 technology, it was released for Xbox 360
<br />
on November 7, 2006 in select stores in the United States and will be released
<br />
in major retailers on November 12, 2006.It will be released on November 17, 2006
<br />
in Europe outside of Germany, where the game was bannedafter being denied
<br />
a rating.[1]. According to Microsoft Game Studios VP Shane Kim, the preorder
<br />
sales wereexpected to reach $100M USD, second only to Halo 2 in videogame history.</p>
</div>

<div id="svr07">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/svr07.jpg" alt="Smackdown vs Raw 2007" align="left" border="1" hspace="20" />

<div id="svrinfo07">
<h3>2.Smackdown vs Raw 07 - Xbox360 <span id="bigger"></span></h3>

<p>The WWE knocks the snot out of the world with an all-new multi-platform wrestling smackfest.
<br />
New additions this year include a brand new analog control grappling system,
<br />
new high-impact movesets, user-controlled environmental hotspots and an interactive
<br />
fighting area within the crowd. In addition, the game includes updated rosters for
<br />
Raw and SmackDown, an expanded General Manager Mode and online multiplayer game
<br />
play with voice chat support. The WWE knocks the snot out of the world with
<br />
an all-new multi-platform wrestling smackfest.</p>

<div id="nfs">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/nfsc.jpg" alt="Need For Speed Carbon" align="left" border="1" hspace="20" />

<div id="nfsinfo">
<h3>3.NFS Carbon - ||PC||Xbox360||Xbox||PS2||PS3||DS||PSP||<span id="bigger"></span></h3>

<p>The battle for the city is won in the canyon as Need for Speed Carbon
<br />
immerses you in the world's most dangerous and adrenaline-filled form of street racing.
<br />
For the first time in a Need for Speed game, build a crew and race in an all-out war for your
<br />
city against rival crews and opposing car classes. You'll risk everything to take over rival
<br />
neighborhoods one street at a time.As the police turn up the heat and force the races to
<br />
the outskirts of the city, the battle ultimately shifts to Carbon Canyon,
<br />
where territories and reputations can be lost on every perilous curve.</p>

<div id="burnout5">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/burnout5.jpg" alt="Burnout5" lign="left" border="1" hspace="20" />
</div>

<div id="rainbow">
<img src="C:/Documents and Settings/PR45H4NT/Desktop/webpic/rainbow.jpg" alt="Rainbow Six Vegas" lign="left" border="1" hspace="20" />

<div id="copyright">
<h6 class="c2">COPYRIGHT NOV 2006</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Css code

body {
background-color:#EDE6D7;}

#whole0
{
background-color:#8B2D3B;
position:absolute;
top:00px;
left:00px;
width:1125;
height:1735;
}

#whole1
{
background-color:#EDE6D6;
position:absolute;
top:00px;
left:40px;
width:1045;
height:1710;
}

#whole2
{
background-color:#8B2D3B;
position:absolute;
top:200px;
left:240px;
width:20;
height:1500;
}

#side1
{
background-color:#8B2D3B;
position:absolute;
top:580px;
left:270px;
width:800;
height:20;
}

#side2
{
background-color:#8B2D3B;
position:absolute;
top:860px;
left:270px;
width:800;
height:20;
}

#side3
{
background-color:#8B2D3B;
position:absolute;
top:1130px;
left:270px;
width:800;
height:20;
}

#side4
{
background-color:#8B2D3B;
position:absolute;
top:1410px;
left:270px;
width:800;
height:20;
}

#side5
{
background-color:#8B2D3B;
position:absolute;
top:370px;
left:0px;
width:155;
height:0;
}


#banner {
background-color:;
position:absolute;
top:10px;
left:50px;
width:px;
height:px;}



#redbar
{
background-color:;
position:absolute;
top:170px;
left:50px;

}

#redbar1
{
background-color:;
position:absolute;
top:2500px;
left:50px;

}

#nav
{
position:absolute;
top:195px;
left:40px;
}

#navhome
{
position:absolute;
top:314px;
left:62px;
}

#xbox
{
position:absolute;
top:355px;
left:62px;
}

#x360
{
position:absolute;
top:394px;
left:62px;
}

#ps2
{
position:absolute;
top:435px;
left:62px;
}

#ps3
{
position:absolute;
top:475px;
left:62px;
}

#psp
{
position:absolute;
top:515px;
left:62px;
}

#wii
{
position:absolute;
top:557px;
left:62px;
}

#ds
{
position:absolute;
top:600px;
left:62px;
}

#pcgames
{
position:absolute;
top:645px;
left:62px;
}

#gzbglogo
{
position:absolute;
top:700px;
left:380px;
}

#news
{
position:absolute;
top:215px;
left:270px;
}

#news1
{
position:absolute;
top:600px;
left:270px;
}

#gow
{
position:absolute;
top:335px;
left:280px;
}

#outnow
{
position:absolute;
top:510px;
left:450px;
}

#outnow1
{
position:absolute;
top:800px;
left:450px;
}

#outnow2
{
position:absolute;
top:1070px;
left:450px;
}



#gowinfo
{
font-family:Arial;
text-align:absolute;
color:#8B2D3B;
font-size:10pt;
}

#svr07
{
position:absolute;
top:285px;
left:0px;
}

#nfs
{
position:absolute;
top:280px;
left:0px;
}

#rainbow
{
position:absolute;
top:550px;
left:0px;
}

#burnout5
{
position:absolute;
top:267px;
left:0px;
}

#svrinfo07
{
font-family:Arial;
text-align:justify;
color:#8B2D3B;
font-size:10pt;
}

#nfsinfo
{
font-family:Arial;
text-align:justify;
color:#8B2D3B;
font-size:10pt;
}

#bigger
{
font-family:Arial;
text-align:justify;
color:#8B2D3B;
font-size:10pt;
}


#Platform
{
font-family:Arial;
text-align:justify;
color:#8B2D3B;
font-size:10pt;
}

#Platform1
{
font-family:Arial;
text-align:justify;
top:70px;
color:#8B2D3B;
font-size:10pt;
}

h3
{
text-align:left;
font-size: 15pt;
}

h6
{
text-align:center;
font-size: 8pt;
}

#current
{
position:absolute;
top:765px;
left:175px;
}

#current1
{
position:absolute;
top:385px;
left:105px;
}

#nfscurrent
{
position:absolute;
top:790px;
left:70px;
}


firefox ss with no images..
Firefox screen shot

Actual screen print of the site on xhtml editor.

Link1
Link2
Link3

Thanks alot :)
 
Sort by date Sort by votes
It's probably because you are using the physical path to the file rather than an absolute or relative url.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
I save the image and then use it as a code, dunno if thats right but could u provide me with the code i need to use for this plz.. :)
 
Upvote 0 Downvote
If you need to link the pictures with the full path (only if this project will not be a web based one but a local page) then you need to add protocol (file:///) in front of the image sources. I however agree with ca8msm that you should use relative paths -- if the image is in the same folder as the html file then use just the filename, if it is a folder below use the (folder/filename.jpg) and a folder lower (../filename.jpg). That sould let you explore all other options.
 
Upvote 0 Downvote
thanks alot mate, i will work on it right now :), ne problems i'll let u know =xD
 
Upvote 0 Downvote
i tried to add the protocol file code but it didnt work, could you please show me an example of the protocol file code and relative paths code please..

thanks
 
Upvote 0 Downvote
The absolute path will work only if you're simply running the script with all the paths intact. If you upload the html with such references to an online web server, it won't work anymore. That is why you should only use it if it is supposed to run locally only on this computer. To change one of your references you would do:
Code: 
src="file:///C:/Documents%20and%20Settings/PR45H4NT/Desktop/webpic/rainbow.jpg"
This adds the protocol and spaces need to be escaped by %20 for it to work.

Of course, you should resort to relative paths. I explained how to do relative paths for all three possible situations: image in the same folder as the html file, image in the folder above (parent) the folder with html file and image in the folder below (child) the folder with html file. All else is a simple manipulation of those paths. Two folders down one folder up would therefore be: ../../images/myimage.jpg.
 
Upvote 0 Downvote
Yeh i understand now 'Vragabond' :)..

Thanks alot 'Vragabond' & 'ca8msm', I can now see my site images on firefox.. thnx once again :)
 
Upvote 0 Downvote
Ohh no, another problem occured on firefox. Background doesnt show up now for some reason :(

My Css code

body
{
background-color:#EDE6D7;
}
 
Upvote 0 Downvote
Your (rather weird) element #whole0 starts at top left edge of the screen, is over 1000 pixels wide and high and has a different background. Are you sure this element is not just covering your body?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
781
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
205
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
722
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
903
spamjim
spamjim
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
171
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top