Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Link Colours Not Displaying Properly

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #26105
    leehughes
    Member

    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

    #64049
    deconspray
    Member

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

    :link
    :visited
    :hover
    :active

    #64050
    leehughes
    Member

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

    thanks

    #64055
    deconspray
    Member

    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.

    #64056
    leehughes
    Member

    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..

    #64057
    TheDoc
    Member

    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

    #64058
    leehughes
    Member

    Ahh

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

    Thanks

    #64059
    leehughes
    Member

    sorted :D

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.