border-bottom and <a> links

[Nutter]

I'm working on a navigation panel and have come up against something confusing. I have the following (plus some additional) css for my <a> tags...

border-bottom: 1px solid grey;
display: block;

It works fine in FF, but the border doesn't show up in IE. It's hard to search for an answer when one of the search terms is 'a', so I haven't found anything.

Thanks in advance.

[Setek]

I found the same problem on a couple of sites I've done in the past... Is it a horizonal menu?

I think it's due to not enough whitespace underneath, I remember solving the problem with a clearing div, or try increasing the line height.

[Nutter]

Thanks, that makes a lot more sense than it just not working :-). I'll try that when I get home tonight. I also tried wrapping each <a> in a <p> tag with the border applied to the paragraph and it didn't work either, so your suggestion sounds like a good idea.

It's not a horizontal menu. Just a series of <a>'s with the display set to block so they are on separate lines. If your suggestion doesn't work, my next attempt will be to use <ul> / <li> tags and see what happens.

[jessejump]

>>>>> border-bottom: 1px solid grey;
display: block;

try gray or green or the hex #

That works for me in IE.

[Nutter]

Don't you hate words that have two spellings :-) Changed the spelling from grey to gray and it works. Thanks for the help.