views:

24

answers:

0

Greetings,

I'm used to implementing piped links (in an un-ordered list) and implementing the pipes using a 1px solid border to one side of each list item.

However, I've encountered a problem with the above implementation while attempting to accommodate a request to make the border's height shorter than that of the text. In effort to do this, I essentially wrote the following CSS:

li {
      border-right: 1px solid #ccc;
      padding-right: 7px;
      margin-right: 7px;
      height: 8px;
      line-height: 8px
}

li a {
     line-height: 12px;
}

The above works fine in every browser except IE6, where the 12px line-height of the anchors causes the height of the parent container to expand to 12px, and for the pipes to be taller than desired.

Is there any way to set this up without using a background image or adding extra markup such that it renders identically in all browsers and is flexible?

Many thanks!