SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    TEXT-DECORATION [problem]

    Hi,

    If u see MY SYTE with Internet explorer 6 you can see that the left menu got this problem: when the mouse goes on the links text-decoration get a underscore.

    It should get any underscare since it's set so in the CSS STYLE SHEET.

    On Firefox u view it correct.

    Can anyone help me and find the problem?

    Thanks

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have:
    Code:
    a:hover {
    	TEXT-DECORATION: underline;
    	COLOR: black;
    }
    below the .menu styles.

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    You have:
    Code:
    a:hover {
    	TEXT-DECORATION: underline;
    	COLOR: black;
    }
    below the .menu styles.
    well that's the underscore of the main site and I want that.
    Why do I get underscore in the css of the .menu then?

  4. #4
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    That declaration is overriding your ealier declaration. You'll need to use a spcific classname to prevent that from happening.

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yep, you can't just expect that rule to ignore your previous ones, as it applies to the whole page.

    Usually, when using a number of different anchor styles on a page, I specify them by section, using the specific sections ID as a starting point.

    Like:
    Code:
    #main_column a {
    	text-decoration: none;
    }
    
    #sub_column a {
    	text-decoration: underline;
    }
    and so on...

  6. #6
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stymiee
    That declaration is overriding your ealier declaration. You'll need to use a spcific classname to prevent that from happening.
    I see.
    Ok changed that.

    Can I ask u 1 more thing?
    If u see the menu with FIREFOX this time u see this problem: on the link Squadre u have 3a Categoria with the black square on left then u have 5 links with no square and finally the latest links with squares again.

    Why?
    All the links are supposed to have the black square. On Ie6 it's viewed correctly.

  7. #7
    SitePoint Member Trep's Avatar
    Join Date
    Jan 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by westin
    All the links are supposed to have the black square. On Ie6 it's viewed correctly.
    I think it's a problem with padding kicking out the image...
    Trying to set to 0 left and right padding in .menu ul li a {} (padding: 5px 0px 5px 0; ) solves the problem on my FF.

  8. #8
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Trep
    I think it's a problem with padding kicking out the image...
    Trying to set to 0 left and right padding in .menu ul li a {} (padding: 5px 0px 5px 0; ) solves the problem on my FF.
    sorry I am a beginner can u exaclty tell me what to add or remove from my css?

  9. #9
    SitePoint Member Trep's Avatar
    Join Date
    Jan 2006
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No probs, I'm not very good at it either. Sorry if I've been too compact !

    Your CSS now looks:

    .menu ul li a {
    display: block;
    top: 0;
    margin: 0;
    padding: 5px;

    width: 130px;

    border: 1px solid white;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    text-decoration: none;
    color: black;
    background: #B7DCFF;
    }

    Delete the "padding: 5px;" line and write "padding: 5px 0px 5px 0px;" instead. This fixes it for me (at least on FF, I have not tested it on IE6).

    After doing that, if you feel the black squares are too close to the left border, you can add the rule:

    .menu ul li a img {
    padding-left: 5px;
    }

    Maybe there is a better way to do it, but I hope this helps.

  10. #10
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works!!!!!! thank u dude


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •