Set thickness of the Underline?

Discussion in 'Web Design & Coding' started by S Walch, Nov 12, 2007.

  1. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    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?
     
    S Walch, Nov 12, 2007
    #1
    1. Advertisements

  2. S Walch

    Fenis-Wolf VIP Member

    Joined:
    Apr 30, 2003
    Messages:
    2,951
    Likes Received:
    35
    Location:
    Ann Arbor, Mi
    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.
     
    Fenis-Wolf, Nov 12, 2007
    #2
    1. Advertisements

  3. S Walch

    James Photojournalist VIP Member

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Location:
    Maine, USA
    You can do this with CSS using the border-bottom: 3px solid; command.
     
    James, Nov 13, 2007
    #3
  4. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    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.
     
    Last edited: Nov 13, 2007
    S Walch, Nov 13, 2007
    #4
  5. S Walch

    James Photojournalist VIP Member

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Location:
    Maine, USA
    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):

    HTML:
    <span class="und">texttext texttexttext texttext</span> texttext
    Code:
    CSS:
    .und { text-decoration: underline }
    
    As for my last comment on the border, I was thinking of something else.
     
    James, Nov 13, 2007
    #5
  6. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    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:

    [​IMG]

    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:

    [​IMG]

    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.
     
    S Walch, Nov 13, 2007
    #6
  7. S Walch

    James Photojournalist VIP Member

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Location:
    Maine, USA
    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?
     
    James, Nov 13, 2007
    #7
  8. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    I had a look at that, but then there's still no way to increase or decrease the thickness of the underline.
     
    S Walch, Nov 14, 2007
    #8
  9. S Walch

    James Photojournalist VIP Member

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Location:
    Maine, USA
    There is if you use the border command and using CSS browser conditionals.
     
    James, Nov 14, 2007
    #9
  10. S Walch

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    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;
     
    Last edited: Nov 16, 2007
    S Walch, Nov 15, 2007
    #10
    1. Advertisements

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
  1. vishnu
    Replies:
    2
    Views:
    757
    vishnu
    Jan 30, 2004
  2. Swishsticks
    Replies:
    2
    Views:
    989
    Swishsticks
    Sep 11, 2004
  3. spike228

    What do you have your homepage set to and why?

    spike228, Oct 13, 2004, in forum: General Discussion
    Replies:
    20
    Views:
    1,770
    spike228
    May 5, 2006
  4. Tosca
    Replies:
    6
    Views:
    866
    Tosca
    Jan 15, 2005
  5. Humming
    Replies:
    2
    Views:
    1,309
    Humming
    Feb 11, 2005
  6. stubby711

    How to set-up at a MySQL Database for logins etc...

    stubby711, Mar 24, 2005, in forum: Web Design & Coding
    Replies:
    1
    Views:
    1,193
    Fenis-Wolf
    Mar 24, 2005
  7. Nickweb

    uk tv series set in maine, US

    Nickweb, May 16, 2005, in forum: Books, Movies, TV and music
    Replies:
    6
    Views:
    1,752
    Nickweb
    May 20, 2005
  8. Ruler1
    Replies:
    3
    Views:
    729
    Ruler1
    Feb 3, 2006
Loading...