#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2

    Grr... link styling


    I swear I've styled links a thousand times in the past and for some reason I just can't get the default html link styles to change. If i made a stupid mistake and missed something please let me know because i just don't see it.

    HTML:
    Code:
    			<ul id="navigation-menu">
    				<a href="index.php"><li id="first-nav-button"><div class="nav-break"></div><p id="navText"><span class="home-icon"></span>Home</p></li></a>
    				<a href="leaderboard.php"><li id="leaderboard-button"><div class="nav-break"></div><p id="navText"><span class="leaderboard-icon"></span>Leaderboard</p></li></a>
    				<a href="upload.php"><li id="normal-button"><div class="nav-break"></div><p id="navText"><span class="upload-icon"></span>Upload</p></li></a>
    				<a href="user-search.php"><li id="last-nav-button"><p id="navText"><span class="search-icon"></span>Search</p></li></a>
    			</ul>
    CSS:
    Code:
    ul#navigation-menu li:link{
    	text-decoration:none;
    }
    
    ul#navigation-menu li:visited{
    	text-decoration:none;
    }
    
    ul#navigation-menu li:hover{
    	text-decoration:none;
    }
    
    ul#navigation-menu li:active{
    	text-decoration:none;
    }
    I've tried numerous variations using the "a" tag and "li" tag and id's, but nothing has worked.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    You seem to have three different mistakes repeated multiple times.

    Only <li> elements may be direct children of a <ul>. You need to move the links inside the list-items.

    The same ID should not be used for multiple elements in the same document. In other words, any two or more elements on a page may not have the same ID. You could use a class instead.

    The ":link" and ":visited" pseudo-classed apply only to links. So you could change each "ul#navigation-menu li" to "ul#navigation-menu li a", however, it's unlikely that you don't really need to specify all of that, so just use "#navigation-menu a" instead.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    Originally Posted by Kravvitz
    You seem to have three different mistakes repeated multiple times.
    Thanks, I made the changes you have suggested, but I'm still not having any luck.

    Revised HTML:
    Code:
    <ul id="navigation-menu">
    				<li id="first-nav-button"><a href="index.php"><div class="nav-break"></div><p class="navText"><span class="home-icon"></span>Home</p></a></li>
    				<li id="leaderboard-button"><a href="leaderboard.php"><div class="nav-break"></div><p class="navText"><span class="leaderboard-icon"></span>Leaderboard</p></a></li>
    				<li class="normal-button"><a href="upload.php"><div class="nav-break"></div><p class="navText"><span class="upload-icon"></span>Upload</p></a></li>
    				<li id="last-nav-button"><a href="user-search.php"><p class="navText"><span class="search-icon"></span>Search</p></a></li>
    			</ul>
    Revised CSS:
    Code:
    ul#navigation-menu a:link{
    	text-decoration:none;
    }
    
    ul#navigation-menu a:visited{
    	text-decoration:none;
    }
    
    ul#navigation-menu a:hover{
    	text-decoration:none;
    }
    
    ul#navigation-menu a:active{
    	text-decoration:none;
    }
    Thanks again for the help.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    I expect the problem lies elsewhere in your code. Do you have an example page online somewhere that you could show us?

    By the way, I'm curious, what is the purpose of the ".nav-break" <div>s?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    Originally Posted by Kravvitz
    I expect the problem lies elsewhere in your code. Do you have an example page online somewhere that you could show us?

    By the way, I'm curious, what is the purpose of the ".nav-break" <div>s?
    Unfort everything is on a local server atm, but break is a short border line. It was easier for me to create a new element to produce the effect I wanted opposed to styling a border for li.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Why not just use a <hr /> instead of <div> for that effect because I think it is designed to split content and create a new line.

    For example in my forms, if I have fields relating to different topics, I might use a <hr /> to break the form up so it's easier to read and understand.

    I see no other uses for the <hr /> element other than to split up content and create a new line.

    Regards,

    NM.
    Last edited by Nanomech; January 21st, 2013 at 06:50 PM.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    Originally Posted by Nanomech
    Why not just use a <hr /> instead of <div> for that effect because I think it is designed to split content and create a new line.

    For example in my forms, if I have fields relating to different topics, I might use a <hr /> to break the form up so it's easier to read and understand.

    I see no other uses for the <hr /> element other than to split up content and create a new line.

    Regards,

    NM.
    I agree with you, but I'm steering clear of most HTML5 and CSS3 when I can for at least the next year or so. There's still a lot of old browsers being used unfortunately.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    The <hr /> tag is not HTML5.

    Regards,

    NM.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    To clarify what Namomech said in his last post, the <hr> element was part of HTML long before HTML4 even. It's in HTML2.

    In my opinion, however, an <hr> would not be more appropriate here. If IE7 support isn't required, I would use a ":before" pseudo-element (which is CSS2).

    Unfort everything is on a local server atm
    Well, if you want further help, you'll need to post more of your HTML and CSS.
    Last edited by Kravvitz; January 22nd, 2013 at 03:30 AM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo