Stu Nicholls | CSSplay | nicholls Dotted Line Replacement technique

Information

A simple tutorial to explain the basic method of removing the active/focus dotted border from your menu links.

Please note that this in only applicable to links of known size. That is, links that have a width and height value in either pixels, ems or percent.

I see no problem in removing the default dotted border so long as it is replaced with a suitable alternative that will be equally recognizable by your visitors.

Just for fun and because everyone else is doing it, I have named this method nDLRt ;o)

The basic idea is to enclose the link content in an extra element (em and span are both acceptable) then give each link a position relative and the extra element a position absolute.

When the link is clicked its size is reduced to ZERO. This gets rid of the dotted border as this is only placed around the link irrespective of content.

Because the extra element has an absolute position it will still be visible and can be styled as you wish with an active/focus state.

I have shown the xhtml and well-documented CSS below to indicate how each of the steps has been styled.

xhtml

All the above steps use the same xhtml code as shown below.
The only additon to a standard unordered list is the addition
of the em around the link text.
This is necessary to allow the actual link to be reduced to zero
size whilst still showing clickable link text.

<ul id="navlist">
<li><a href="#nogo"><em>Item one</em></a></li>
<li><a href="#nogo"><em>Item two</em></a></li>
<li><a href="#nogo"><em>Item three</em></a></li>
<li><a href="#nogo"><em>Item four</em></a></li>
<li><a href="#nogo"><em>Item five</em></a></li>
</ul>

CSS

STEP 1
/* The BASIC horizontal list */

#navlist_a {
  /* remove the list bullets */ 
  list-style-type:none; 

  /* remove the list padding */
  padding:0; 
  
  /* set the overall width of the list links */
  width:36em;
  
  /* set the height required */
  height:5em; 
  
  /* centre the list */
  margin:0 auto; 
  }

#navlist_a li {
  /* set up the width and height of the list items */
  display:block;  
  width:7em; 
  height:2em;

  /* float them in one horizontal line */
  float:left; 

  /* add a gap between each list item */
  margin-right:0.2em;
  }

#navlist_a li em {
  /* remove the emphasized text style */
  font-style:normal; 

  /* make the text black */
  color:#000;
  }

STEP 2
/* adding the hover state */

#navlist_b {
  list-style-type:none; 
  padding:0; 
  width:36em; 
  height:5em; 
  margin:0 auto;
  }

#navlist_b li {
  display:block; 
  width:7em; 
  height:2em; 
  float:left; 
  margin-right:0.2em;
  }

#navlist_b a {
  /* set up the link height and width */
  display:block; 
  width:7em; 
  height:2em;
  
  /* give the links a relative position
  so that the ems can have an absolute position
  within each link */
  position:relative; 

  /* remove the text underline */
  text-decoration:none;
  }

  /* style the em */
#navlist_b a em {
  
  font-style:normal; 
  color:#000; 
 
  /* give the em text the same overall size as the link */
  display:block; 
  width:7em; 
  height:1.5em; 
  border-bottom:0.5em solid #000;
  
  /* give the em text a position absolute so that it will be
  taken out of the normal flow and control of the link */
  position:absolute; 
  top:0; 
  left:0;
  
  /* make the link cursor appear when the mouse is over
  the em text */
  cursor:pointer;
  }

#navlist_b a:hover {
  /* add a default hover state for the links.
  This is necessary for IE to apply the hover state to
  the em */
  color:#c00;
  }

#navlist_b a:hover em {
  /* recolor the em bottom border on hover */
  border-bottom:0.5em solid #c00;
  }

STEP 3
/* removing the active/focus dotted border */
#navlist_c {
  list-style-type:none; 
  padding:0; 
  width:36em;
  height:5em;
  margin:0 auto;
  }
#navlist_c li {
  display:block; 
  width:7em; 
  height:2em; 
  float:left; 
  margin-right:0.2em;
  }
#navlist_c a {
  display:block; 
  width:7em; 
  height:2em; 
  position:relative; 
  text-decoration:none;
  }
#navlist_c a em {
  font-style:normal; 
  color:#000; 
  display:block; 
  width:7em; 
  height:1.5em; 
  border-bottom:0.5em solid #000; 
  position:absolute; 
  top:0; 
  left:0; 
  cursor:pointer;
  }
#navlist_c a:hover {
  color:#c00;
  }
#navlist_c a:hover em {
  border-bottom:0.5em solid #c00;
  }


#navlist_c a:active, #navlist_c a:focus {
  /* reduce the link size to zero when the link is in the 
  active/focus state.
  This literally removes the dotted border which is ONLY applied
  to the link itself and not any containing elements WHEN THOSE
  ELEMENTS HAVE A POSITION ABSOLUTE! */
  width:0; height:0;
  outline:0; /* for browsers that understand */
  }

STEP 4
/* adding the active/focus state */
#navlist_d {
  list-style-type:none; 
  padding:0; 
  width:36em; 
  height:5em; 
  margin:0 auto;
  }
#navlist_d li {
  display:block; 
  width:7em; 
  height:2em; 
  float:left; 
  margin-right:0.2em;
  }
#navlist_d a {
  display:block; 
  width:7em; 
  height:2em; 
  position:relative; 
  text-decoration:none;
  }
#navlist_d a em {
  display:block; 
  font-style:normal; 
  width:7em; 
  height:1.5em; 
  color:#000; 
  border-bottom:0.5em solid #000; 
  position:absolute; 
  top:0; 
  left:0; 
  cursor:pointer;
  }
#navlist_d a:hover {
  color:#c00;
  }
#navlist_d a:hover em {
  border-bottom:0.5em solid #c00;
  }
#navlist_d a:active, #navlist_d a:focus {
  width:0; 
  height:0;
  outline:0; /* for browsers that understand */
  }

#navlist_d a:active em, #navlist_d a:focus em {

  /* change the em bottom border and text to blue on
  active/focus thus giving a suitable alternative to
  the dotted border */
  border-bottom:0.5em solid #00c; 
  color:#00c;
  outline:0; /* for browsers that understand */
  }

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.