Dotted line in navbar

Hello,

your already helped me a lot, so I come back with a new question. I inserted dotted lines to my navbar at https://www.blickfrisch.com
The code is this:

/* .nav */
.nav {position: relative; width: 970px; display: inline-block; border-top: 2px dotted #74bbd6; border-bottom: 2px dotted #74bbd6; padding: 0 25px; margin-top: -10px; clear: both; line-height: 1em; text-transform: uppercase;}

In IE the lower line shows like 2 lines, a finer and a thicker one.
In Chrome the lower line is shorter than the upper line.

I can’t figure out how to delete the fine line in IE and how to prolongate the lower line in Chrome. Could you give me a hint?

Thanks so much!
Katharina