Header, Background and h1 images not visible on site

HTML & CSS
1

I had created a simple index page and uploaded it onto the subdomain of my host. When I viewed it on IE, I find that the header and background image cannot be seen. I then tried it on Mozilla Firefo. I find that additional to the above images, even my h1 image (I had used an image for my h1 text) cannot be seen. Why is this happening? I can view the images when I test the page on my laptop. I am using IE 8 and Mozilla Firefox 3.6.4

I am giving below the code of my css page which I have used in my index page.

body {
 background: white url(osteoporosisLowOpacity.jpg); //This image is not visible in IE or Firefox
 font-family: Tahoma, Arial, sans-serif;
 text-align:center;
 
 color:black;
}
#container
{
 background: white;
        margin: 0 auto;
 width: 600px;
        border-right: 1px solid black;
        border-left: 1px solid black;
}
#header
{
 background:#fff url(CalciumHeaderimage.jpg); //This image is not visible in IE or Firefox
 padding: 20px;
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-left: 1px solid black;
}
#header h1 { margin: 0; }
#h1
{background:white url(h1.jpg) no-repeat top-center; //This image is visible in IE but not in Firefox
padding-bottom:1px;
}
 
 
#navigation
{
 float: left;
 width: 600px;
 background:#ccc;
}
#navigation ul
{
 margin: 0;
 padding: 0;
         border-right: 1px solid black;
        border-left: 1px solid black;
}
#navigation ul li
{
 list-style-type: none;
 display: inline;
        
        
}
#navigation li a
{
 display: block;
 float: left;
 padding: 5px 10px;
 color:#000;
 text-decoration: none;
 
       
}
#navigation li a:hover { background:#383; }
#content
{
 clear: left;
 padding: 20px;
        text-align:left;
        background:  url(osteoporosis.2.jpg) no-repeat bottom;
        border-right: 1px solid black;
        border-left: 1px solid black;
}
#content h2
{
 color:#000;
 font-size: 160%;
 margin: 0 0 .5em;
}
#footer
{
 background:#ccc;
 text-align: right;
 padding: 20px;
 height: 1%;
        border-right: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
}
2

Could you post a link to the page? That’s the easiest way for us to advise on what’s happening.

3

Thanks, Ralph. Here is the link http://www.priyavarier.com/CalciumDeficiency/index.html I did not post the link earlier since I was not sure whether I was allowed to do so.

4

The first problem is that the image is not where your link points:

url(CalciumHeaderimage.jpg)

Are you sure yu’ve uploaded it? If so, where is it in relation to the style sheet. Is it in an images oflder? At the moment, the styles sheet is looking for it in the same folder as itself, which is not a good place to put images.

5

I found that I had made errors in the name of the images ie I had mixed up cases, but there was no mistake in my h1 image. Now if you look, you can see the link to the images. But I still cannot see the images on my webpage IE or Firefox. I removed the temporary files in IE but am still not able to view it. Am I still making some newbie error? I had not put my images in a separate folder since there were not too many mages (only three). Why does it help to put images in a separate folder even if there are very few images?

6

OK, it’s working in firefox now, and your code looks OK, so you may just need to clear your browser cache, or just refresh the page.

It’s just good for organization, nothing else, but with only a few files, I guess it doesn’t matter. But it’s rare for a site to stay with just a few files, so better to prepare for the future. :slight_smile:

7

I waited for a day before replying because when I tried yesterday, my cookies were not getting deleted even though I set it to be so. Does it sometimes take time for the cookies to get deleted? When I checked today morning, I found that I can view the page with all the images in IE8 but when I view it in Firefox, I can still not see the h1 image (the one with the small image alongside the heading, Calcium Deficiency.

Now when I think of it, even earlier, even though I had made misstakes in the case while naming the background image and the header image, I could not find anything wrong where I had set an image for h1. So is there any other reason why I am not able to view it in Firefox?

OK, it’s working in firefox now
Are you able to view the h1 image as well?

8

You can use your Browser to delete cookies and it should more-or-less be done within seconds. Depending upon how full the cookie jar is. With Firefox you can download the Web Developer Addon https://addons.mozilla.org/en-US/firefox/addon/web-developer/ which makes it easier to clear them in Fx.

9

Clearing the cache and clearing cookies are different things (Tools > Web Developer > Miscellaneous > Clear Private Data > Cache), but anyhow, as xhtmlcoder says, it should happen straight away. One way to force CSS to reload is to change the name of the CSS file. That will force it to be downloaded again. that’s a bit of a pain, though.

Are you able to view the h1 image as well?

Yes.

10