Images not working in IE

Hi all, I'm new to the CSS/XHTML world, having been a victim of Front Page and tables 10 years ago. I reformed myself to standards-based design about a year ago. My experience is limited, but I'm doing my best. I have a couple books and rely on tutorials I find online.

It seems I get hung up on the simple stuff most of the time... and it almost always has to do with Internet Explorer. I use Opera as my preferred browser, and design for it first then hack away for IE. All was well on this site right up until the silliest problem...two of the 3 images I have on the page are not working. Yep, little red x's when views in IE and apparently no x's or images in Firefox. What have I done wrong? Why does one image work and not the other two?

http://timelessrose.ca/css%20version/

I tried sleeping on it and approaching it fresh this morning with no success. I check the validation and the XHTML doesn't validate but not for site-threatening reasons (mostly due to a link I have on there without proper symbol alternatives). The CSS validates.

As a bonus, if someone could help me figure out how to centre the whole thing, that'd be great. I've tried the auto margins but no matter which layer I put them in it doesn't work.

If anyone has the time and desire to help me out, I'd appreciate it :)

<div class="bump"><span class="bumpL"><img src="images/mainview1.jpg"></span> <span class="bumpR"><img src="images/mainview2.jpg"></span></div>

here is the path for the image: http://timelessrose.ca/css%20version/images/mainview1.jpg

ok i found this at the bottom of your html, FF is not showing it possibley because the folder path is wrong. FF wont show an x sometimes so IE will if a path is wrong or the picture doesnt exist..

as far as making every thing center, you need to take a new div such as #wrapper, and wrap it around the main content, like so....

css


#wrapper {
width:/*whatever size you need*/;
height:/*whatever size you need*/;
margin:0 auto;
}


then place it into the html such as:


<div id="wrapper">
content.........
..........

</div>


that will place everything center wise....

Hope everything works out!!

Thank you so much for replying :) I had already checked the filepaths and tried using the full url of the images with still no luck. The strange thing is I used the same short-form file path for the first image on the page and it works.

Just noticing now that the file sizes for the last two images are enormous and perhaps I have screwed up with the images itself. Will investigate further... maybe the site is timing out trying to load the images.


Thanks for the tip on the seperate wrapper for centering- I hadn't thought of that! Would it matter if I left the height and width as auto or 100%? Since the actual pixels vary from page to page.

Edit: yes, the files themselves were the problem. For some reason I had them at 300dpi and CMYK colouring for enormously huge files- the browsers must have given up on them, since they are working fine now!! I new it was something silly and simple that I was overlooking.

well if you make or create a wrapper of 100% then it will extend to each point of the screen. Therefore the actual wrapper wont need to be centered. The best thing to do is put the html height 100% and width100%, then create a wrapper that will be centered and if you want make the wrapper like 80%. Then it can be centered and will adjust!!