Set thickness of the Underline?

I was just working on making my website more compatable between IE7 and Firefox, and I noticed that all the underlines in Firefox were at least 1-2 pixels thicker than in IE.

Is there a way to set the "thickness" of the underline in CSS so that it looks the same in IE and in Firefox?

__________________
Blankety Blank

For the most parts i believe the only link behavior you can modify is colors, and how the browser should act when it is clicked.

__________________

You can do this with CSS using the border-bottom: 3px solid; command.

__________________
Learn about the man behind the screen @ Ogden2k.net

I was actually refering to underlined text rather than hyperlinks.

Unfortunately, there doesn't appear to be a way around it, so I'm currently having to use the IE CSS hack where you stick a period ( . ) before something, ie .padding-top:20px; compared to padding-top:20px; - Nearly all browsers will ignore the one with the period in front of it, but IE6 + 7 will only accept the one that contains the period.

Edit:

That would only underline the very bottom, and not all of the text if it goes over two lines. Plus, it doesn't stop at the ends of the words properly.

__________________
Blankety Blank

If you're working with XHTML 1.1 Strict than you will need to use this code (there may be other ways but I prefer this one):

As for my last comment on the border, I was thinking of something else.

__________________
Learn about the man behind the screen @ Ogden2k.net

Hmm, I think I'm not explaining what's happening very well.

Right, the following image is what the page I'm working on (http://www.thewaytoyahuweh.com/nt_tran/ver1/ntmatt.htm) looks like in IE7:



Now, if you look at the underline of Chapter 16 you'll see that it's only 1 pixel thick. But now look how it looks in FF 2.0:



As you can see, the underline is quite a bit thicker, which poses a problem as all the numbers and headers that come under the chapter heading are arranged due to how many pixels there are from above them, so obviously, if I make it all look good in IE7, then in Firefox everything will end up looking quite a bit lower than it should (due to the extra pixels posed by the thicker underline in FF). So at the moment, I've been having to do two different position pixels for FF and IE7 so it looks fine in both. Obviously, If I could force FF to decrease the size of the underline (which is being used as { text-decoration: underline; } in my CSS file) then the problem would've been solved quite quickly.

Hope that explains my problem better.

__________________
Blankety Blank

I have the same problem between FF and IE; you could run a conditional CSS statement, if IE then use this pixel width, else use this. Have you looked into that?

__________________
Learn about the man behind the screen @ Ogden2k.net

I had a look at that, but then there's still no way to increase or decrease the thickness of the underline.

__________________
Blankety Blank

There is if you use the border command and using CSS browser conditionals.

__________________
Learn about the man behind the screen @ Ogden2k.net

Well, I've managed to get all pages to look fine in IE7 and firefox - But checking it in Opera... and now it's completely messed up there now!

Blasted different browsers

Edit: Nevermind, figured what I did wrong.

Just means that now I have to spend another couple of hours sorting out the padding width

Edit #2
Followed your advice, found that FF likes to stick the border 1px lower than both IE and Opera do, and also the border spread far too much to the left and right, so I just specified the height and width of the tag I was using and walla, perfect.

Also, somethings to note for people:

Opera, Firefox and IE all seem to have different ways of rending the height of margin and padding when coming from an external style sheet. So if you're every making a website that requires you to use specific positioning, then only use the padding in CSS and set the margin to margin: 0 auto;

__________________
Blankety Blank