Images not shown in Internet Explorer

Sometimes, the photos, images, pictures or graphics do not show or display in a website in Internet Explorer (“IE”) browser or an email in MS Outlook Express. Instead, where the pictures ought to be, there is a Red X or a placeholder.



Several factors could have caused this problem of images not being displayed in IE. In this Help guide, we'll look at these reasons and the solutions to show images in IE. Some of the possible causes may only be resolved by the webmaster. If you are an owner of a Blog or a webmaster, these tips might be useful to note when you are uploading images onto your Blog or webpage.

1. Image type not supported by IE

When you see a red X or placeholder, right-click on it to view the “Properties” of the image. Look at the image “Type” and “Address (URL”). IE supports images with .art, .avi, .bmp, .emf, .gif, .jpeg, .jpg, .mov, .mpeg, .mpg, .png, .wmf, and .xbm extensions. As a webmaster, if you have to put images on your website, try to stick to the usual image formats or have alternative images in these formats.

2. “Show Pictures” option in IE not selected

If you are using IE 7, under Tools -> Internet Options -> Advanced tab, there is an option called “Show pictures” under the “Multimedia” heading. Select this option and press OK to save the change. In other IE versions, the option may fall under a different heading.

3. Scripts disabled in IE

Webmasters may use Active scripts, Scriptlets, Java applet, ActiveX control, or cookies to display the images on their sites. If the security setting in IE browser is set to “High”, these features may be blocked. To enable them, go to Tools -> Internet Options -> Security tab. View the “Internet” zone and under “Security level for this zone” change it to “Medium” or “Medium-high”. You can also reset the zone to “Default” level. Likewise, under Tools -> Internet Options -> Privacy tab where you define the cookie settings, you may set it to “Default” level. Click OK to save.

4. Scripts disabled by Firewall

Other than IE, the configurations in your Firewall program (Norton Personal Firewall, Zonealarm, McAfee, BitDefender, etc.) may have disabled some of these scripts. View the help file of the program you are using and follow their instructions to enable some of these scripts. For this reason, webmasters should avoid using too many scripts for the main contents of the sites. Consider adding text using <noscript> tags to cater to those who have scripts disabled.

5. Web bugs

Be careful when you are configuring the above settings. The web pages you view or emails you receive may sometimes contain hidden web bugs. These are usually small little graphics 1px by 1px that track user statistics like location, usage, pages visited, or whether an email has been read. This is even used in organizations and companies to find out how many times a message is forwarded or read by the staff. They do not pose major threats, but there are those who do not like this infringement of privacy. Take a stand and configure your security and privacy settings accordingly.

6. Images blocked in Outlook Express

We touch briefly on the problem of images not displayed in Outlook Express email program. When you are in Outlook Express, go to Tools -> Options -> Security and you'll see a “Download Images” configuration. If you want to view images in your email, do not tick the “Block images and other external content in HTML e-mail” option. Click OK and save the change. You should now be able to view images in Outlook and not see the red X symbol.

7. Images not sent in Outlook Express

Also, if you are sending email with images, you could have disabled these images in the configuration. Those receiving your email will only see the red X or placeholders rather than the images. The solution to this is to go to your Outlook Express Tools -> Options -> Send tab. The “Mail Sending Format” should be “HTML” and not “Plain Text”. Click the “HTML Settings” button and check the box next to “Send pictures with messages.” Click OK to save.

8. Character Set not recognized by IE

This sounds rather technical. In layman terms, the browser interprets the code page or encoding of the web page. If your IE browser does not recognize this character set, or if a file in your browser software is corrupted or missing, the images may not be displayed when viewing the web page. For instance, the web page may be in a foreign language. If so, see that this language has been added to the browser settings. In IE, go to Tools -> Internet Options -> General. Under “Appearance” there is a “Languages” button. (In other versions of IE, the Language option may be under a different heading.) Add the languages that you would use to read the web page and click OK to save. If you are still unable to view the page, it is possible that a file or registry key is corrupted or missing. To resolve this, you may follow the Microsoft Help guide on your desktop to restore or repair your Windows software.

9. Image Server is down

Since free blogging platforms including Blogger.com have limits on the amount of storage space taken up by the Blog photos, images and graphics, it is worth considering hosting these images on an external server and linking to them from your Blog. These too have limits on space and bandwidth. All servers, even Blogger.com, can have downtimes. When these image hosts are busy, undergoing maintenance, temporarily suspended, offline, or when the download bandwidth has been exceeded, the images linked to the Blog will not be displayed. The problem could be temporary, and should you need to see these images on a particular Blog, revisit the Blog an hour or so later.

10. Image links are broken or dead

Since the images are hosted on another platform and linked, there could be instances when the webmasters typed a wrong URL, placed the " at the wrong places or omitted the closing image tags. The image HTML code and attributes are discussed in Hyperlinks and Image Links. The image links could be broken or dead when webmasters delete the images from the server or switch image servers without updating the image links. It is also possible that the image is not hotlinked. By this we mean that when the image is stored on the image server, the link given is not a direct link to the image, but a page containing the image and other contents. Hotlinking takes up bandwidth and some image servers do not provide that service. If such URL is used in the image HTML code, the image will not show.

11. Cache not cleared

The Browser cache stores web page content of the sites you have visited on your hard disk. These are the Temporary Internet Files which supposedly speed up the page download when you revisit a site since some of the contents are already stored. However, these files can comprise cookies and JavaScripts too. Make it a habit to clear the cache regularly to remove these files. In IE, go to Tools -> Internet Options -> General and under “Browsing history” click “Delete” button. Delete all the Files and offline content. These are temporary files that can be removed. If you are unable to view images, sometimes deleting these Temporary Internet Files may solve the problem.

Read more >>

Background Image for Blogger Template

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

You will need to create an image. Find a picture you like. If you need a free photo editing tool, you can either search the net for one or use Google's Photo Editing Software Picasa. You can also use a small tile-size image which can be repeated so as to cover the entire page. Try not to have an image file that is too large as your page may take a little longer to load.

After creating a picture, you will need to upload it onto a free picture host.Next, log in to your dashboard layout; under Template -> Edit HTML, scroll to where you see this:-

body { background:$bgcolor;

Change background color

If you would like to change the background color of your blog to a very unique color, you can manually specify the color value. take a look at the HTML Color Chart to see if you can find your desired color. For example, if you have chosen a color code #B38481, change the above code to this:-

body { background-color:#B38481;

If you are changing the background color of your sidebar only, add the color code under the relevant sidebar heading.

#sidebar-wrapper { background-color:#B38481;

Similarly, if you want a different color for your main post column, add the color code as follows:-

#main-wrapper { background-color:#B38481;

Note that different templates may label their stylesheets differently. The #sidebar-wrapper may be called #side-wrap or something to that effect.

In some templates like the TicTac Template, the background color you see is due to a background image and inserting a color code into the template will not help. To have a different color, this background image will have to be edited. For more details, read the article on Background Color of TicTac Template.

Add a background image

The code to insert is this:-

body { background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets.

Insert the URL of this test image into the above brackets and Preview your blog.

You can also have a background image just for your sidebar. Locate the style and add the background image code accordingly.

#sidebar-wrapper { background-image: url(URL address of your image);

For a background image to your main post body only, add the code here:-

#main-wrapper { background-image: url(URL address of your image);

Repeat background image

By default, the image is repeated to fill up the entire background of the page. If you have a small or tile-sized image, it will appear like a print pattern in the background. Sometimes, you may choose not to have the image repeated. If that is the case, you can insert this code:-

background-repeat: no-repeat;

Alternatively, you may only want the image to be repeated horizontally. The code is this:-

background-repeat: repeat-x;

To have the image repeated vertically, the code is this:-

background-repeat: repeat-y;

Position background image

If you have an image that is not repeated, you may like to specify the exact position of this image on your page. The HTML code to be inserted is this:-

background-position: top left;

Your image will appear at the top left corner of your page. The other possible values that you can use to replace “top left” are:-

top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

If you do not want it entirely left, right or center, you can also define the horizontal and vertical alignments either in percentage or in pixels. Use either of these values instead, with x being the horizontal value and y being the vertical value.

x% y%;
xpx ypx;

Static background image

After that, you may specify whether you want your background image to remain in a fixed position when the contents of your blog are scrolled. By default, the picture scrolls with your content. To have it stay put, the code to insert is this:-

background-attachment: fixed;

Putting it all together

The eventual CSS code that you will have for your customized template may look like this:-

body { background-color:#B38481; background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed;

You can also combine the attributes into one line and the shorthand code will look like this:-

body { background:#B38481 url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg) no-repeat center center fixed;

Putting the above code into my blog, this is what you would see.



Of course, after having added the background image, you will need to adjust the colors of your text so that they stand out against the backdrop. Go to Template -> Fonts and Colors to do that.

This guide will give you an image background to your Blog. Sometimes, you may have several images, all of which are suitable for your Blog.

Read more >>