Neil Merton

Force IE To Go Dottie

If you’re a seasoned web designer / developer you will most probably have noticed that Internet Explorer treats dotted borders the same as dashed ones. Here’s a quick CSS work around for this:

style_general.css

abbr, acronym {
  border-bottom: 1px dotted #bbb;
  cursor: help;
  text-decoration: none;
}

and then use the following to include a specific stylesheet just for Internet Explorer, versions 6 and lower:

<!--[if LTE IE 6]>
<style media="all" type="text/css">@import url("style_ie.css");</style>
<![endif]-->

style_ie.css

abbr, acronym {
  background: url(../images/dotted.gif) repeat-x bottom left;
  border-bottom: 0 solid;
  padding: 0 0 1px 0;
}

Simple?