• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 640
  • Last Modified:

Simulated dotted line for IE

I am running into a problem drawing a one pixel wide vertical dotted line in IE6+/NS7+.  I use the following CSS:

     display: inline;
     background-image: url(../images/dottedLine.gif);
     background-repeat: repeat-y;
     position: absolute;
     left: 216px;
     height: 446px;              
        margin-top: 0px;
     margin-bottom: 0px;
     padding : 0px;
     top: 53px;
     width: 1px;

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.

1 Solution
Wai -

Can I ask what kind of object you are applying this style to?  I am just curious, because I took the EXACT code that you have posted here, created a "dottedLine.gif" image, and applied the style to a <div>, and it worked perfectly in IE6.

(chomp, chomp)
You have "display: inline;"

In CSS, the width and height properties do not apply to elements that are inline. MSIE gets it wrong.

Use display: block;
with what dorward said...

MSIE 5.x always gets it wrong and MSIE 6 gets it wrong IF YOU DON'T HAVE A DOCTYPE. IE6 is (mostly) standards compliant if you include a valid doctype in your code and very non-compliant if you don't.

So, gator may well have used the exact same style on a div, but if he didn't put a doctype in then it would have rendered fine in IE6. I'm assuming waiman has a doctype - which in IE6 is making the inline object ignore sizing attributes. NS7 is always (mostly) standards copliant and will always ignore sizing attributes on inline elements.

I agree with dorward's solution - give it a block display (I'm wondering why you'd make an absolutely positioned element inline anyway?)

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now