Page Display and Image Issues
Images
You've probably seem those blank image boxes that contain the small red "x". This means that the image is missing or the file path to the image is incorrect. The most common mistake is to link to images that are on your computer's hard drive rather than to images that are contained within your web folder.
To troubleshoot this problem, open your web site and then open the images folder. See if your images are within this folder, or within any folders you have residing inside of the images folder. Now go to the actual image on the page (or to the area where the image only shows as the red "x" box), right-click and select Picture Properties from the menu.
You should see the image path as being in the images folder as shown above.
If you see a file path that begins with a drive letter as in the example above, you are linking to an image on your hard drive. Correct the file path and republish your web.
Images and IE7
There have been reports from users who add new images and then go to File > Preview in Browser but cannot see the new images. This is a documented IE7 bug. At this time there is no fix, so we have to wait for a future IE7 update that hopefully clears this up.
We recommend that you also have the FireFox browser on your computer and preview your site in this browser. You will notice that your new images are in place and are as they should be. (It's always a good practice to preview your web in both IE and FireFox.)
When you publish your web, your images will be visible and the issue will be resolved. Note that this only affects your local web until you publish and it does not affect anyone viewing your site.
Page Display Issues
If your pages become distorted or does not display correctly, chances are good that you have some element that is too large for the area in which it is placed. This will cause the “container” to be pushed too wide and that will cause other display problems like having the sidebar content drop down to the bottom of the screen.
For example, if the sidebar area is 250 pixels wide but has a 15 pixel padding on the right and left sides, the maximum width for any image would be 220 pixels. (Take the total width and subtract any padding.) If your image has a border around it, you would need to subtract the width of the border on both the left and right sides to determine the maximum width your image can be.
Long hyperlinks can also “push” a containing block out of position. You sometimes have to be a bit creative when listing very long hyperlinks. Rather than a long hyperlink, you may want to use shorter text and then hyperlink that text to the actual page.
Example: http://www.yourwebsitename.com/subfoldername/mygreatpage.htm (which is way to long to be contained in a limited space) would be better written as My Great Page and have the text hyperlinked to the correct page.
Another common error is to accidentally drag or move a containing block edge. By moving an edge to make it wider or taller, you are actually changing the coding to a set width or height. This will naturally overwrite what is in the CSS file and can have some very unpredictable results. Check your coding carefully and remove any widths or heights to items that are already being styled by a class or ID.
Example: The correct coding for the sidebar area is written as <div id="sidebar">. If you check your coding and see <div id="sidebar" width=”275” height=”2075”>, remove the width and height portion from the code.