css loaded image doesn't show up in browser

[Beeej21]

Hello all!
I am struggling with what seems to be a very simple problem. Well, the issue is extremely annoying and problematic, and I am unable to figure out the solution.

I am using CSS to load an image onto my HTML page. The reason being because I'd like to be able to swap out the images using CSS depending on the circumstance. Well, for some odd reason, the image is showing up in Dreamweaver CS3 in my desighn panel, but it does not show once I load that same page into a browser! That is very frustrating.

Here is the code from my css file:

#me {
	background-image: url(../../images/avatar.jpg);
	background: #000000;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 125px;
	width: 125px;
	position: relative;
}

Pretty straight forward. Now here is the code residing on my HTML page:

<td width="125"><div id="me"></div></td>

Can someone PLEASE explain to me why Dreamweaver is showing the image in my table cell, but once I load the page into a browser ( IE, Firefox, Netscape, etc ) I do not see anything except for the background color I picked for the css tag. The background color shows up, so I know that the HTML page is connecting properly to the css file.

Please help. Thank you in advance.

[richie513]

Hi Beeej21,

I used to have this problem aswell. Try changing the position from relative to absolute. Also make sure to save your CSS sheet before testing it in the browser as some times this can be overlooked. Once your browser loads, if there is still no image, try refreshing your browser as some times, dreamweaver does not reset itself each time you reload it into the browser. Other than this your code looks fine. Let me know how this go's:)

[ndeniche]

try putting the id not in a <div></div> but in the <td></td>

[Beeej21]

Hi Beeej21,

I used to have this problem aswell. Try changing the position from relative to absolute. Also make sure to save your CSS sheet before testing it in the browser as some times this can be overlooked. Once your browser loads, if there is still no image, try refreshing your browser as some times, dreamweaver does not reset itself each time you reload it into the browser. Other than this your code looks fine. Let me know how this go's:)

Thank you kindly for the reply, Richie513. Unfortunately, I tried everything you suggested and still have the same issue. Changing the position from relative to absolute didn't reveal the image, but instead it took the background color ( behind the image ) and moved it out of the table cell. I just CANNOT seem to figure out what the problem is.

Would you or anyone else please take a look at my testing page?

Here's the the link to the css files: css

Here's the link to the javaswitcher js file: js file

Here's the link to the testing HTML page: testing page

Thanks again for your help and consideration.

[Beeej21]

try putting the id not in a <div></div> but in the <td></td>

Hello Nichito! Thank you for taking the time to try and help me out. As it turns out, putting the id in the <td></td> tags didn't work. I am about to pull my hair out! I know I am overlooking something, and I just can't seem to figure it out.

I posted the links for Richie to look at,.. would you please take a look at my code and tell me what I am overlooking? I have a feeling I am going to feel very stupid once I figure out the problem.. but so far I am only feeling frustration.

Here's the the link to the css files: css

Here's the link to the javaswitcher js file: js file

Here's the link to the testing HTML page: testing page

Please note that on the first style, that is where I'd like the image load. The other two styles don't have images ( yet ). The background color shows up perfectly, but no image. Even if I delete the background color... the image still does not show up. I am working in Dreamweaver CS3.

Thanks for your help. Nichito. BTW, I love your avatar!! lol.

[ndeniche]

or try inserting a   in between the <td id="id"></td> or the <div></div> tags

[ndeniche]

did you specify the <!DOCTYPE> ?

[Beeej21]

or try inserting a   in between the <td id="id"></td> or the <div></div> tags

Thanks again for the reply, Nichito. I tried both your suggestions, and neither one of them worked. There is still no image showing up in the browsers, but it's there in Dreamweaver. I totally feel like the fella in your avatar now.

[richie513]

Hi Beeej21,

I have noticed that you have placed the DIV tag for your image inside of a TD tag. This can cause problems as I have learned that you can not place DIV tags inside of a table. Maybe instead you can try something like this.

<table>
<tr>
<td>
<span class="me"></span>
</td>
</tr>
</table>

Take the DIV tags out and just use the SPAN tag. If you would like to use a DIV tag, just wrap your DIV tags around the table like this:

<DIV>
<table>
<tr>
<td>
<span class="me"></span>
</td>
</tr>
</table
</DIV>

Mixing TABLE tags and DIV tags has been well known to cause a lot of unnecessary problems. Give this a try and let me know how you go. I will work with this code as well to see if i can help get this problem solved.

[richie513]

Hi Beeej21,

Please ignore my last post, as I have just done some research and you can use a DIV tag inside a table cell and table cell only. However I have just taken a look at your source code and have noticed that your DIV tag has not been closed properly. What I noticed is that your DIV tags look like this:

<div id="me"/>

try changing it to this:

<div id="me"></div>.

I have also ran firebug on your CSS and it is producing a lot of Declaration Dropped errors. I will have a look at these and let you know what I find. Can you please tell me what browser are you using? as this can also affect the way pages are displayed if your not coding for browser compatibility.

[Beeej21]

Hi Beeej21,

I have noticed that you have placed the DIV tag for your image inside of a TD tag. This can cause problems as I have learned that you can not place DIV tags inside of a table. Maybe instead you can try something like this.

Mixing TABLE tags and DIV tags has been well known to cause a lot of unnecessary problems. Give this a try and let me know how you go. I will work with this code as well to see if i can help get this problem solved.

Richie, thanks again Buddy for helping me out. I really need to have the id tag within a table cell because, #1, I am not that good at CSS yet, and 2#, I am gonna be replacing a ton of images in one table at the click of a button, changing up the entire look of a page.

Your solution didn't work as I had hoped it would.. however, something DID happen and suddenly I am seeing the images in my browser! It seems to work in both IE and Firefox! I've updated the files on my server.

I THINK it was a

backgrond-attachment: fixed;

property that I had deleted. It seems to be working okay now! Thanks a MILLION for all your help.

[opsryushi]

Hi Beeej21 -
These guys seem to be doing a pretty good job of taking care of you - let me just throw in a quick suggestion.

Whenever you're using a table cell background to display an image, it's ALWAYS a good idea to fill the space with something. As I'm sure you'll recall from basic HTML, an empty td is a nonexistent td when it comes to displaying in your browser. Go with Nichito's suggestion and place "&nbsp;" between your opening and closing td tags.

Also - I don't mean to insult your intelligence in anyway - but double-check the route to the image file. I find that this practice actually solves 85-90% of the problems that my Web Design 1 students have with their pages as they learn HTML and CSS.

Best of luck!

[ndeniche]

i'm checking on your page, and it seems to be aok... unless those are not the results you want... did you manage to solve your problem?

[richie513]

Beeej21. That is great news that you have fixed the issue. It was my pleasure to help you out as much as i could. I will be willing to help you again in the future if you ever need it. Also opsryushi has made a great point, it is great practice to double-check the route to your image. Have fun and best of luck!

richie513

[olabambola]

guys i have the same problem :( i don't know how to work with the codes just use the commands.when i click insert -> image ,i see the image on dreamweaver8 but when i test my web page online i can't see the images also when i post videos from youtube on my web page the video seems to be there but it doesn't play,just keep loading for some seconds and that's it.I'm going crazy cause saturday have the web design exam and still have done nothing :(( please help me !!!

[smith.smith8086]

There may be problem with path so this type of error happens. Try to change location to relative or absolute.

[usman123usman]

change the position of background - color move up to the pic then you will get the output ok