Home > HTML > img Tag’s alt Text Issue in Webkit Browsers

img Tag’s alt Text Issue in Webkit Browsers

Leaving or do not using alt attribute of the img tag is considered as one of the most important fault in current web standards. Even the web page validation will fail if you are using a strict DTD in the web page due to this.

There is an interesting issue in Webkit browsers (Apple Safari & Google Chrome) related to the alt attribute in the img tag.

This issue can be seen by simply putting an img tag in a web page with an alt text value but with a wrong src value.

In other words you should use an incorrect image name in this case to experience this issue. As a web developer you are sure that if the browser can’t find the image you wanted to show it will show the alt text value in place of the image, this is a well known fact. Consider the following code:

<img src="1.png" alt="Missing image alt text">

In IE, Firefox and Opera you can view the alt text (whatever value you’ve used) in the browser.

But in Webkit browsers (Apple Safari & Google Chrome) you can see an image place holder but there is no sign of the alt text in those browsers.

There are two questions that comes at this point :

  • Is this a browser issues?
  • Whether webkit browsers avoids the alt text completely? I mean there is no effect whether you use it or not in Webkit?

As far as the first part is concerned this is an incorrect treatment from the browser point of view.

The second point is bit tricky actually the alt text is coming to the browser like the way it should. But it will be visible only if the img tag(element) has enough width and height specified in it to display the alt text.

As you know we can show an image using img tag with or without specifying the width and height of the image.

If the width and height are missing then the browser will calculate the dimensions its own and show the image accordingly, otherwise it will use the specified width and height.

But in Webkit browsers if you want to show the alt text in case of missing image the img tag should have enough height and width for showing the text. Simply putting you have to maintain a minimum width and height for the worst case purpose.

Advertisements
Categories: HTML
  1. pranoy sinha
    September 2, 2010 at 1:53 pm

    Hi,

    I read all the functions. Nice post.. keep it up gentle man. I prefer to keep this function from yours. “JavaScript Password Generator”. I only need to know the reverse function by which i can decrypt the password. I think you will write that function for us.

    Cheers,
    pranoy

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: