Simulated dotted line for IE
Posted on 2003-02-24
I am running into a problem drawing a one pixel wide vertical dotted line in IE6+/NS7+. I use the following CSS:
padding : 0px;
The 'dottedLine.gif' file is a 2 pixel vertical image with one black 1 pixel dot on top of 1 pixel white dot. Since the image repeat itself vertically it creates a dotted line in theory.
You might wonder why I did that instead of using something like 'border-right: 1px dotted black'. The trouble with IE5+ is a 1 pixel dotted line will appear exactly the same as 1 pixel dashed line. A dotted line will only appear as 'dotted' if the width is at least 2 pixels.
Strangely the CSS example above works in IE5.5 and NS 6.3 but it appears blank in NS7+ and IE6+. I am just wondering why that happens and is there anything we can do to get around it? Thanks in advance.