Image and Display Issues

While things go smoothly most of the time, you might run into a problem when the page does not display correctly or an image is not appearing.

Losing Formatting

Occasionally when adding your own text and images to your pages, the page may suddenly seem to lose the formatting. This is because Expression Web is not sure how much content, etc. you are adding to an area. Don't panic. Continue adding your content, then Save the page (Control + S). Now Refresh the page (F5) and you will see your page "snap" back into position. Continue editing your pages. If the page loses formatting again, just Save and Refresh the page.

Prevent Footer from jumping

The most common complaint is when editing content near the bottom of the page, the footer will jump up and cover the text. You can save and refresh the page, but the action is annoying when you have to do it multiple times. There's an easy way to temporarily "hide" the footer area while you work. Open the default.css file and look for the footer code. Then add one line to "hide" the area. [Don't forget to remove the line before you upload your site to the server!!]

  1. footer {
  2. clear: both;
  3. background-size: 100%;
  4. color: #000000;
  5. width: 100%;
  6. font-size: 0.85em;
  7. padding: 20px 0 10px 0;
  8. display: none;
  9. }

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: (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 coding for the sidebar area is written as <div id="sidebar"> or <aside class="sidebarLeft">. If you check your coding and see style=" width: 275px; height: 2075px” has been added, remove the style portion from the code.

Image Issues - the Red X Box

You've probably seen 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.

If you see a file path that begins with a drive letter, you are linking to an image on your hard drive. Correct the file path and republish your web.

Images, Links and Internet Explorer

There have been reports from users who add new images and then go to File > Preview in Browser but cannot see the new images. Others have reported that new hyperlinks do not work.

Check your "preview" settings. Go to Site > Site Settings. In the preview tab, make sure "preview using website url" is selected. Under that, check "Use Microsoft Expression Development Server". Then, select "for all web pages".

We recommend that you also have the FireFox and Chrome browsers on your computer and preview your site in these browsers. 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 and other browsers as well.)