How to avoid link underlines overlapping in Firefox/Mac

Discussion in 'HTML & Website Design' started by PurpleJennifer, Aug 2, 2008.

  1. #1
    Hi,

    I designed a simple html webpage using Frontpage. Everything is fine in IE7, but when I open my website in Firefox or Mac/IE7, if the words with hyperlinks are in the same line, there is only a single underline extending from the first word to the last word.

    For example, this is how it looks:

    IE7
    apple orange banana Guava

    Mac-IE7/Firefox
    apple orange banana Guava

    1. Can you troubleshoot this? and provide me a simple html solution rather than some higher programming discussion or plugins?

    2. Can I completely avoid the underlines, yet keep the links active in all these browsers?

    Thanks.

    J
     
    PurpleJennifer, Aug 2, 2008 IP
  2. unitedlocalbands

    unitedlocalbands Well-Known Member

    Messages:
    246
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    128
    #2
    Can you post the html code you are using?
     
    unitedlocalbands, Aug 2, 2008 IP
  3. PurpleJennifer

    PurpleJennifer Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here it is, simplified (cut and pasted this protion only, no change made in this code: Please open in IE/PC, Vs. Firefox, and IE/Mac.

    -----------------------
    <html>
    <head></head>
    <body>


    <p align="center"><font face="Arial,sans-serif" size="4px" color="#000999"><u>
    <a href="www.google.com">Books<span

    style="text-decoration: none">&nbsp;&nbsp;&nbsp;
    </span></a><a href="www.google.com">T-shirts<span

    style="text-decoration: none">&nbsp;&nbsp;&nbsp;
    </span></a><a href="www.google.com">Mugs<span

    style="text-decoration: none">&nbsp;&nbsp;&nbsp;
    </span></a><a href="www.google.com">Bags<span

    style="text-decoration: none">&nbsp;&nbsp;&nbsp;
    </span></a><a href="www.google.com">Other</a></u></font></p>


    </body>
    </html>

    Thanks for your attention, J.

    PS: Please let me know if it is possible to get rid of the underlines altogether in all of these.
     
    PurpleJennifer, Aug 2, 2008 IP
  4. blueroomhosting

    blueroomhosting Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    First of all, you've got the whole block of text inside <u> tags which means underline.

    Secondly, the <span style='text-decoration:none'> is inside the <a> links so is affected by the underline that is automatically applied to those.

    Try this:

    <html>
    <head></head>
    <body>
    <p align="center">
    		<font face="Arial,sans-serif" size="4px" color="#000999">
    		<a href="www.google.com">Books</a>&nbsp;&nbsp;&nbsp;
    		<a href="www.google.com">T-shirts</a>&nbsp;&nbsp;&nbsp;
    		<a href="www.google.com">Mugs</a>&nbsp;&nbsp;&nbsp;
    		<a href="www.google.com">Bags</a>&nbsp;&nbsp;&nbsp;
    		<a href="www.google.com">Other</a>&nbsp;&nbsp;&nbsp;
    		</font></p>
    
    </body>
    </html>
    Code (markup):
    To remove the underlines from the links, use the following in your stylesheet:

    a { text-decoration: none; }
    Code (markup):
     
    blueroomhosting, Aug 2, 2008 IP
  5. PurpleJennifer

    PurpleJennifer Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Great! Thanks! It worked.

    I am not sure I understand the stylesheet thing, but for that I will come back after I work out my basic html!

    You didn't help a student however. This is already a functional website with many more visitors than you would expect with such horrible cut&paste coding of mine!

    Thanks.
     
    PurpleJennifer, Aug 2, 2008 IP
  6. blueroomhosting

    blueroomhosting Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It's good that you're making an effort to learn. :) However, don't leave the CSS too long. Most web design is centred around it these days and things like <font> tags are horribly outdated. Plenty of good tutorials around - http://www.w3schools.com/css/default.asp comes to mind but I'm sure people here would be happy to recommend some others.
     
    blueroomhosting, Aug 2, 2008 IP