Loading ...
1px Dotted Border Bug In Internet Explorer 6
In Internet Explorer 6 a 1px border with style dotted is displayed as it has style dashed. The workaround can be found in this article.
When I was developing this weblog theme, I stumbled on a Internet Explorer 6 bug.
The CSS style I’ve added to the ‘category’ list included the line border-bottom:1px dotted #ccc;. It did work in Firefox 2.0 and on first sight, it looked alright in Internet Explorer 6 as well. But then a friend pointed me to look into this issue again and I saw the difference between the rendering in both browsers.
IE6 displays 1px dotted borders as 1px dashed borders.
How can we deal with this? Leave it as it is? Of course, it isn’t a real big issue and most visitors only visit in one browser, so they won’t notice the difference between the dashed and dotted border. Because it irritated me the design wasn’t exactly the same, I started to look into this issue. I found a couple links that described what was wrong and I decided to use the workaround with images.
The workaround, how?
For this example, we will use a white background with a simple 1px black dotted border-bottom.
Open up Adobe Photoshop and create a 2px (width) by 1px (height) image. In this image, make sure you use a white background. Select the pencil tool and create a black (#000) dot. Save the file as dot.jpg.
An example below:
Open up your CSS file and select the class you have styled with a border. Remove the property border-bottom. You will now add a background propery to your class.
Like this:
1 2 3 4 5
.box{
background:url(images/dot.jpg) bottom repeat-x;
}
We now have a border element which renders the border exactly the same in Firefox, Internet Explorer 7, and even in Internet Explorer 6! Hallelujah!
We all hope all users starts to use Firefox, because IE6 makes us front-end-developers go back to the ‘code-with-images-instead-of-css’ timeframe. Bah.
Just fine hint, but there is one issue.
You should not save the image as JPG for 2 reasons.
1) JPG is not loss-less and furthermore just not the format of choice in case of a known 2 color only palette
2) If you use GIF you can use “transparent” instead of white as the background and thus, do not have to create a separate image for every background-color you work with and want a dotted border to appear on.
greets
Yeah. What if you have this :
#myelement {
border: 1px dotted #000;
}
Uh ?
@me – I didn’t really think of that, but it’s a good idea. Of course a GIF image does a better job here.
Thanks for your comment and tip!
@ Guzabi – I couldn’t find much online, and I didn’t try it because I found the bug when I used border-bottom:1px dotted #000;
Regarding your question, I made a sample, which can be found here. http://www.divitodesign.com/dd-articles/1px-border-bug/ie-border-try.html
As you can see, the bug occurs in border:1px dotted #000; as well!
@ Guzabi
Sorry, no chance for that, unless you know the size of the element (in px, not em!)
This, of course, breaks usability with scaled font size — for professional use not an option.
@ME – Thanks for helping out!
Hi Stefan, thanks for the article, most helpful.
I had a similar problem where IE 6 would not show border-bottom: 1px dashed #000; though would work in IE7 (It may be due to floating?). Anyway to save time I used your mentioned technique to resolve the issue as well as being able to stylise the dashed line to my liking. Saving it as a gif for me added a touch more versatility too.
in I.E (6 and 7) have problem. the combobox border color not hidding, it is bug.