CSS Dotted lines

18.08.2007 | Author:Black iD Team

Here comes one more of the irritating IE issues. The dotted line shown as dashed. This was one more bug that came up when I was making a beautiful site. It kept on ruining my design. Moreover, when you scroll in IE, the dotted(Dashed) line suddenly appears solid in some portions. Its really poor for a big giant like Microsoft to have developed such a rubbish software. But it has, and we have to live with it. Especially we developers. Since still a large audience on the web is unaware of the serious issues with Internet Explorer, we are left with no choices but to hack our way through to achieve perfect sites.

Here is my way of attaining pure CSS driven dotted borders.

First of all, I created an 2px x 1px image dot.jpg

The Dot Image(Magnified) The Dot Image(original - right-click to save)

<html>
<head>
<title>Dotted Border</title>
<style>
#one_with_dotted_bottom_border
{
border_bottom: dotted 1px #545454;
}
*html #one_with_dotted_bottom_border { border: none; background:url(dot.jpg) repeat-x bottom; padding-bottom: 1px;}
</style>
<body>
<div id="one_with_dotted_bottom_border">This has dotted Bottom Border</div>
</body>
</html>

But this had another problem with it… The W3C standards. According to it, usage of star-html hack for IE is invalid CSS code. So I developed another route to it…

<html>
<head>
<title>Dotted Border</title>
<style>
#one_with_dotted_bottom_border
{
border_bottom: dotted 1px #545454;
}
</style>
<script language='javascript'>
window.onload = function() {
document.write('<style>*html #one_with_dotted_bottom_border { border: none; background:url(dot.jpg) repeat-x bottom; padding-bottom: 1px;}</style>');
}
</script>
<body>
<div id="one_with_dotted_bottom_border">This has dotted Bottom Border</div>
</body>
</html>

This gave me a perfectly validated CSS code which I could use. Hope this helps you too.

Thanks And All the best

One Response to “CSS Dotted lines”

  • MARGOMAR Says:
    April 3rd, 2008 at 5:13 pm

    I’m so glad that I finally found what I was searching for! It doesn’t matter what other people write or think, I just know for sure that I’m right. Here I found all useful information , all I exactly needed for my new experience. It’s not just a great entertaining source, it’s also a way of giving different information for all of us

Leave a Reply