Simulated dotted line for IE

Posted on 2003-02-24
Medium Priority
Last Modified: 2008-01-16
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.

Question by:waiman
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 8014394
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)
LVL 17

Expert Comment

ID: 8015352
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;

Accepted Solution

miskate earned 400 total points
ID: 8021261
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

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month9 days, 8 hours left to enroll

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question