Grow your CSS skills. Land your dream job.

[Solved] Link Colours Not Displaying Properly

  • # September 14, 2009 at 4:30 pm

    Well I thought i finished but the css gods had other news for me!

    I coloured my links to make them more visable to users however, I can’t get them to show in different browsers which means av done the coding wrong. .

    It’s working on my setup but no one else’s

    Can someone take a look please and tell me what coding av done wrong?

    Code:
    /*
    Theme Name: Lee Hughes WordPress theme
    Theme URI: http://www.leehughes.co.uk
    Description: The WordPress theme for the Lee Hughes website
    Author: Lee Hughes
    Author URI: http://www.leehughes.co.uk

    /* CSS Document */

    a img {border: 0;}

    a:link {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }

    body {
    background-color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    }
    #page-wrap {
    width: 960px; margin: 0px auto -250px;
    min-height: 100%; height: auto !important; height: 100%;}
    margin-right: auto;
    margin-left: auto;
    }

    #header {
    width: 100%;
    float: left;
    }
    #header #blog-name {
    float: left;
    width: 100%;
    }
    #header #blog-name h1 {
    color: #FFFFFF;
    }
    /* End Images */#header #blog-name h1 a {
    color: #FFFFFF;
    text-decoration: none;
    }
    #header #blog-name h1 a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #header #blog-name h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }
    #header #navigation {
    position: relative;
    float: right;
    width: 100%;
    text-align: left;
    }

    #header-image {
    float: left;
    width: 100%;
    height: 383px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #FFFFFF;
    }
    #content {
    margin-top: 100px;
    float: left;
    width: 100%;
    }
    #content #main-area {
    float: left;
    width: 70.5%;
    }
    #content #main-area-100 {
    float: left;
    width: 100%;
    }
    #footer p {
    color: #FFFFFF;
    font-size: 12px;
    }
    #content #main-area p { /* Main content writing */
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    }
    #content #main-area p a { /* Main content LINKS */
    color: #FF9933;
    text-decoration: none;
    }
    #content #main-area p a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area p a:hover {
    color: #FF9933;
    text-decoration: underline;
    }
    #content #main-area ul {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    }
    #content #main-area li {
    color: #FFFFFF;
    list-style-type: disc;
    }
    #content #main-area h2 {
    font-size: 18px;
    color: #FFFFFF;
    }
    #content #main-area h2 a {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area h2 a:link {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area h2 a:hover {
    font-size: 18px;
    color: #003366;
    text-decoration: none;
    }
    #content #main-area h3 {
    font-size: 18px;
    color: #FFFFFF;
    }
    #content #main-area h3 a {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area h3 a:link {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area h3 a:hover {
    font-size: 18px;
    color: #003366;
    text-decoration: none;
    }
    #content #main-area-100 p {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    }
    #content #main-area-100 p a {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 p a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 p a:hover {
    color: #003366;
    text-decoration: none;
    }
    #content #main-area-100 ul {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    }
    #content #main-area-100 li {
    color: #FFFFFF;
    list-style-type: disc;
    }
    #content #main-area-100 h2 {
    font-size: 18px;
    color: #FFFFFF;
    }
    #content #main-area-100 h2 a {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 h2 a:link {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 h2 a:hover {
    font-size: 18px;
    color: #003366;
    text-decoration: none;
    }
    #content #main-area-100 h3 {
    font-size: 18px;
    color: #FFFFFF;
    }
    #content #main-area-100 h3 a {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 h3 a:link {
    font-size: 18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #main-area-100 h3 a:hover {
    font-size: 18px;
    color: #003366;
    text-decoration: none;
    }
    #content #sidebar {
    float: right;
    width: 27%;
    }
    #content #sidebar p {
    font-size: 15px; /* dontate button) */
    line-height: 22px;
    color: #FFFFFF;
    }
    #content #sidebar p a {

    color: #FFFFFF; /* dontate button) */
    text-decoration: none;
    }
    #content #sidebar p a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #sidebar p a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h1 {

    color: #FFFFFF; /* feedburner button) */
    font-size: 10px;
    }
    #content #sidebar h2 {
    color: #FFFFFF; /* categories button) */
    font-size: 15px;
    }
    #content #sidebar h3 {
    font-size: 15px;
    color: #FFFFFF;
    }
    #content #sidebar h3 a {

    color: #FFFFFF;
    font-size: 17px;
    text-decoration: none;
    }
    #content #sidebar h3 a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h2 a {
    color: #FFFFFF;
    font-size: 15px; /* Subscribe button) */
    text-decoration: none;
    }
    #content #sidebar h2 a:hover {
    color: #FF9933;
    font-size: 15px;
    text-decoration: none;
    }
    #content #sidebar li {
    color: #0000FF; /* Bullet point of posts button) */
    line-height: 20px;
    }
    #content #sidebar li a {
    color: #FFFFFF; /* posts button) */
    font-size: 15px;
    text-decoration: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    #content #sidebar li a:link {
    font-size: 15px;
    color: #FFFFFF; /* seconds posts button) */
    text-decoration: none;
    }
    #content #sidebar li a:hover {
    color: #FF9933;
    text-decoration: underline;
    }
    #content #sidebar a {
    color: #000000;
    }
    #footer {
    float: left;
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    margin-top: 10px;
    }

    #footer #meta {
    float: left;
    width: 40%;
    }

    #footer #sponsorship {
    margin-left: auto;
    margin-right: auto;
    }

    #footer #copyright {
    float: right;
    width: 25%;
    text-align: right;
    }

    #footer a {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #footer a:link {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #footer a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    /* Begin Images */
    p img {
    padding: 0;
    max-width: 100%;
    }

    /* Using ‘class=”alignright”‘ on an image will (who would’ve
    thought?!) align the image to the right. And using ‘class=”centered’,
    will of course center the image. This is much better than using
    align=”center”, being much more futureproof (and valid) */

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }
    small {
    font-size: 12px;
    color: #CCCCCC;
    }

    ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #646060;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
    }
    #nav li {
    position:relative; /* establish stacking context for the AP’d dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
    }
    #nav li a {
    float:left;
    padding:0 .5em;
    border-right: 1px solid #333;
    color: #CCCCCC;
    text-decoration: none;
    }
    #nav li a.first {border:none;}

    #nav li:hover,
    #nav li.sfhover{
    background:#000000;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
    }
    #nav li:hover a,
    #nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/

    /*=== All Sublist Styles ===*/
    #nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
    }
    #nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
    }
    #nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
    border:0;
    }
    * html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
    *+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

    /*=== Hide All Sublists ===*/
    #nav li:hover ul,
    #nav li.sfhover ul {
    margin-left:-999em;
    }
    /*=== Sublist Font Colors ===*/
    #nav li:hover li a,
    #nav li.sfhover li a {color:#FFF;} /*2nd level font color*/

    #nav li li:hover a,
    #nav li li.sfhover a {color:#003366;} /*2nd level font color on hover*/

    /*=== Second Level UL position on hover ===*/
    #nav li:hover ul,
    #nav li.sfhover ul {
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
    }

    label.screen-reader-text {
    display: none;
    .avatar {
    display:none;
    }

    Am trying to get the link to be #FF9933 colour and when I hoover I underline them.

    Is there like a link reset code that I can apply ?

    Thanks

    # September 14, 2009 at 5:37 pm

    You must style links in a particular order for all browsers to display the same/properly:

    :link
    :visited
    :hover
    :active

    # September 14, 2009 at 5:43 pm

    so can I apply that to the top of my css sheet and it will overwrite the current settings?

    thanks

    # September 14, 2009 at 5:58 pm

    No, whenever you specify a link pseudo-state, you must follow this pattern.
    Example:

    a:link{
    color:#0b18bd;
    text-decoration:none;
    }

    a:visited{
    color:#cc02ff;
    text-decoration:none;
    }

    a:hover{
    color:#ffbb02;
    text-decoration:underline;
    }

    a:active{
    color:#bd0b0b;
    text-decoration:underline;
    }

    I’m not sure why you would want to "reset" the browser default settings for the anchor tag. Typically, the purpose of resets is to get all browsers acting the same way. Anchors do act the same way by default on all browsers.

    # September 14, 2009 at 6:09 pm

    Hi,

    Yeah av tried that code in my css but it didn’t work, hence why I asked if it would reset the settings already in my css.

    I have loads of

    #content #main-area li {
    color: #FFFFFF;
    list-style-type: disc;
    }
    #content #main-area h2 {
    font-size: 18px;
    color: #FFFFFF;
    }

    i think this is conflicting with this..

    # September 14, 2009 at 6:43 pm

    These:

    #content #sidebar h2 a:hover
    #content #sidebar li a:hover
    #footer a:hover
    #content #main-area p a:hover

    will override this:

    a:hover

    # September 14, 2009 at 6:44 pm

    Ahh

    that’s what I thought but wasn’t sure what code was doing it :)

    Thanks

    # September 14, 2009 at 6:52 pm

    sorted :D

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".