Home > HTML > IE6 and dotted borders

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

Advertisements
Categories: HTML
  1. No comments yet.
  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: