IE6 and dotted borders

Encountered yet another issue of using dotted border in IE6. I was working on a vertical menu last day that uses a dotted border to separate menu items. As you can expect everything was well and good until IE6 testing started. I haven’t faced this issue quite a while and didn’t recognize the bug straight away. I have got the issue after spending around ten minutes on the issue.

So thought of posting the experience here. The solution, nothing fancy there used a 2 x 2px image that contains a dot with the color of the border that I want to use at its first pixel and a space at its second pixel. The space is needed in the image for a dotted effect otherwise it would look like a solid border rather than a dotted one.

Use the image as the background image of the element on which you want to show the dotted border. A sample code would be something like the following:

div.ie6Border {
	_background: transparent url(imgs/dotBorder.gif) repeat-x left bottom;
	height: 30px;
}

I have used the underscore CSS hack for targetting IE6 as this fix is meant for IE6 only

Named Anchor Issue in IE

Yesterday I was working on a CSS image map for one of my website and was having issues with internal links in the page in IE. I have started my testing with IE8 and several internal links were not working. The map was working well in all browsers except IE. The most interesting thing was some of the internal links were working in IE too some didn’t.

I knew that I have encountered this issue sometimes back (around 2 years back) but was not able to get the details. My focus was initially to see whether this has anything to do with the image map markup and spent some time to see in that angle. Later I’ve focused my attention to the named anchors used for the internal link purpose.

A typical named anchor markup in my code looks like this

<a name="top"></a>
.....
.....
.....
<a href="#top">Top</a>

It seems that the problem created as the named anchor element does not contain anything within the a tag in IE. Weird, huh. Everything started to work as normal when I changed my named anchor to the following

<a name="top">&nbsp;</a>

IE expects something within the a tag. Once we provide anything in this case a blank space everything will start to work as normal.

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.