So I did a redesign of my portfolio website. In the early stages of design, I got some comments on my navigation that it might be too confusing for some people and I should consider changing it. SO, I uploaded what I had done AT THAT time to a subdomain of my domain. I got back good feedback, which isn't the point. The point IS that on my test site, all my background images work just fine throughout all browsers - Safari, Firefox, and Explorer. BUT, when I uploaded my finished site, the backgrounds in the Print and Identity section don't work(on Firefox and Explorer). I have a background image with hotspots for my navigation, so the links are still there, you just can't see them because the background is missing (or something). I didn't change any of the code, all I did was add more content. Here is my test: www.swattersdesign.com/test and here is my site: www.swattersdesign.com I can't figure out the issue here! My test site code (from the print page): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>s. watters design print design</title> <script> function sizeMe() { window.resizeTo(1000,800) } </script> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-repeat: no-repeat; background-image: url(../images/print.jpg); } --> </style></head> <body> <img src="../images/clear.png" alt="s.watters design" width="1000" height="800" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="949,174,966,235" href="contact.html" /> <area shape="rect" coords="891,202,907,252" href="resume.html" /> <area shape="rect" coords="823,204,840,261" href="art.html" /> <area shape="rect" coords="765,247,778,306" href="identity.html" /> <area shape="rect" coords="699,292,712,369" href="web.html" /> <area shape="rect" coords="632,199,649,323" href="menu.html" alt="s.watters design" /> </map> </body> </html AND from the finished site (with the info I added..) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>s. watters design print design</title> <script> function sizeMe() { window.resizeTo(1010,900) } </script> <style type="text/css"> </style> <link href="text.css" rel="stylesheet" type="text/css" /> <body onload="javascript:sizeMe"> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-repeat: no-repeat; background-image: url(../images/print.jpg); } --> </style></head> <body> <div id="text" style="position:absolute; left:100px; top:122px; width:321px; height:646px; z-index:7;"> <p><span class="style1">read me and discard</span> <br/> <br/> <span class="style2">Promotional book piece showcasing songs written by my husband, Rick Flores. 5.5" x 3.5" (11" flat)15 pages, including cover, inkjet print. Click the image to get a closer view of select spreads </span><br/> <br/> <br/> <a href="../images/print/readme.jpg"><img src="../images/print/readmesm.jpg" width="349" height="261" /></a></p> </div> <div id="text" style="position:absolute; left:255px; top:55px; width:150px; height:60px; z-index:7;"> <p class="style3"><a href="print.html">01</a> <a href="print02.html">02</a> <a href="print03.html">03</a> <a href="print04.html">04</a> <a href="print05.html">05</a> <a href="print06.html">06</a> <a href="print07.html">07</a> <a href="print08.html">08</a><br/> <br/> <br/> </p> </div> <img src="../images/clear.png" alt="s.watters design" width="1000" height="800" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="949,174,966,235" href="contact.html" /> <area shape="rect" coords="891,202,907,252" href="resume.html" /> <area shape="rect" coords="823,204,840,261" href="art.html" /> <area shape="rect" coords="765,247,778,306" href="identity.html" /> <area shape="rect" coords="699,292,712,369" href="web.html" /> <area shape="rect" coords="632,199,649,323" href="../index.html" alt="s.watters design" /> </map> </body> </html> There's no difference!! Can any of you guys help me out? Give me some insight?? Thanks!!!
It seems like the image files are corrupted somehow. I went to the directory "swattersdesign.com/images/" and then to the directory "swattersdesign.com/test/images/" and noticed that the image files are different sizes. So that means that could mean they are corrupt or different image files. My suggestion is that you copy the exact files from .../test/images/ to .../images/. Also, I wouldn't suggest automatically resizing the browser window. It's really annoying from the user's perspective. And another thing, the image files are quite large, which is problematic when it comes to load times. Try saving them at a different quality or as a different file type. Good Luck!
Yeah, I did go in and resize the background images for the final site for faster loading time. They are all between 200 KB and 600 KB. I COULD try to resize them again, of course. But, on the test site, they were huge. I think one of them was 1.3 MB. Okay, I just did what you said and copied the print.jpg into the images folder on the actual site and it WORKED. How did that work?! WHY did that work?! That's amazing! thank you so much! And the comment about the resizing the browser thing.. if I get more commentary about it, I'll go in and change it. As it stands, most people appreciate. My website is controversial with a lot of things like that I guess.. Thanks for your input though.. I might just go ahead and remove that from the code.. I don't think it's that necessary myself. Thanks once again!!!