Border Shows in Firefox, Disappears in IE

[unpoedic]

I am using a bottom border to "underline" text without being limited to one color, and the below code does the job well—in Firefox. In IE, no border appears at all. Advice?

h1 {
 border-bottom : 1px solid #91977d;
 color : #541502;
 font : 18px georgia, times new roman;
 font-style : italic;
 letter-spacing : 3px;
 line-height : 13px;
 margin : 12px;
 padding : 0 30px 0 30px;
}

[coho75]

I tried your code in IE, and I saw the border. Which version of IE are you testing with?

You might also try:

text-decoration:underline;

[unpoedic]

I am testing over IE 6.0.

And yes, text-decoration: underline; is an option, but I wanted a broader option: an underline of a different color.

[D_Blackwell]

I also see the border-bottom; in IE6.

---

As an aside:

Sadly, text-decoration: underline; doesn't allow for the underline to be a color different from the text. I've been using something like this pretty happily - though it may not be best for the question at hand.

<div style="font-size: 1em; color: blue;">
A bit of text.
<br/ >
<span style="display: inline-block; border-bottom: .1em solid red; vertical-align: bottom;">A bit of</span> text.
<br/>
A bit of text.
</div>

Note: Without vertical-align: bottom;, Opera and IE both, to differing degrees, jigger the text up a bit.

Note: vertical-align: bottom; gives a consistent result across Firefox, Opera and IE. Other values are less predictable.