Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Looking for a href override code.

    I am having problems with some css code that I found. The problem is that whenever I insert a link, the link appears within a larger box / image. I am just looking for something like a inline override or something similar so that the a href link appears as a normal link.

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I assume you have styled the <a> somewhere in your CSS, that has effected the whole lot.

    To override this, you will probably need to include a child selector (that will replace the adult.)

    E.g.

    #nav a {
    default css properties here (blue text, underlined etc.)
    }


    Or you could remove the css before, which could be universal, <Body> , #wrapper etc.

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by obenns View Post
    Hi,

    I assume you have styled the <a> somewhere in your CSS, that has effected the whole lot.

    To override this, you will probably need to include a child selector (that will replace the adult.)

    E.g.

    #nav a {
    default css properties here (blue text, underlined etc.)
    }


    Or you could remove the css before, which could be universal, <Body> , #wrapper etc.
    Thank you for your reply.
    Yes the <a> is styled somewhere within the css. I have been doing some searching of the subject for about a couple of days but can't seem to get any thing to change it. I was looking for something that could be added into the <a class="????" href , but nothing changes it.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Basza,
    It would be easier if we saw your code so we can understand where the styling is coming from. Then it would be easy to see what can override that styling for the one link you want to appear "as a normal link".
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Basza,
    It would be easier if we saw your code so we can understand where the styling is coming from. Then it would be easy to see what can override that styling for the one link you want to appear "as a normal link".
    Thank you for your reply.
    I will add the css as an attachment due to the size.
    at http://www.nzbytes.com at the bottom of the page you will see a link called " test link back to front page" this link is within the image I need to remove. I need to be able to add normal links at certain times.
    Attached Files Attached Files

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No need to attach CSS. We can see it just fine.

    You are styling all anchors in .indexWrap with this bit of CSS:

    Code:
    .indexWrap a {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        -moz-transition: all 0.3s ease-in-out 0s;
        background-color: #FFFFFF;
        background-image: url("images/shared/btn-1.png");
        background-repeat: repeat-x;
        border-color: #E6E6E6 #F4F4F4 #F4F4F4;
        border-radius: 5px 5px 5px 5px;
        border-right: 1px solid #F4F4F4;
        border-style: solid;
        border-width: 1px;
        box-shadow: 2px 3px 3px #999999;
        color: #000000;
        display: block;
        font-size: 11px;
        height: 90px;
        margin: 0 10px 15px 0;
        max-width: 70px;
        min-width: 70px;
        padding: 10px;
        text-align: center;
        text-shadow: 0 1px 0 #FFFFFF;
        width: 70px;
    }

    To target an anchor in .indexWrap with different styling, give that anchor an id or class... like this:

    Code:
    rning how to code , it's going to take a couple of months to get something going.</p> 
    This is just a test link.<a href="http://www.nzbytes.com/index.php" target="_blank" id="testLink"> test link back to front page</a>
    </div>
    
    
    <center>Copyright
    And give it different styling with some CSS like this -
    Code:
    #testLink {
    border: none;
    background: none;
    box-shadow: none;
    text-decoration: underline;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    No need to attach CSS. We can see it just fine.

    You are styling all anchors in .indexWrap with this bit of CSS:

    Code:
    .indexWrap a {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        -moz-transition: all 0.3s ease-in-out 0s;
        background-color: #FFFFFF;
        background-image: url("images/shared/btn-1.png");
        background-repeat: repeat-x;
        border-color: #E6E6E6 #F4F4F4 #F4F4F4;
        border-radius: 5px 5px 5px 5px;
        border-right: 1px solid #F4F4F4;
        border-style: solid;
        border-width: 1px;
        box-shadow: 2px 3px 3px #999999;
        color: #000000;
        display: block;
        font-size: 11px;
        height: 90px;
        margin: 0 10px 15px 0;
        max-width: 70px;
        min-width: 70px;
        padding: 10px;
        text-align: center;
        text-shadow: 0 1px 0 #FFFFFF;
        width: 70px;
    }

    To target an anchor in .indexWrap with different styling, give that anchor an id or class... like this:

    Code:
    rning how to code , it's going to take a couple of months to get something going.</p> 
    This is just a test link.<a href="http://www.nzbytes.com/index.php" target="_blank" id="testLink"> test link back to front page</a>
    </div>
    
    
    <center>Copyright
    And give it different styling with some CSS like this -
    Code:
    #testLink {
    border: none;
    background: none;
    box-shadow: none;
    text-decoration: underline;
    }
    Thanks for your reply.

    That has kinda worked. There is still a transparent border / image in the background as it is not showing up as a normal text link. But you have pointed / shown me in the direction that I should be looking at. A little bit more searching and hopefully I can get rid of it.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Basza View Post
    Thanks for your reply.

    That has kinda worked. There is still a transparent border / image in the background as it is not showing up as a normal text link. But you have pointed / shown me in the direction that I should be looking at. A little bit more searching and hopefully I can get rid of it.
    It might be easier to put a class on the links you're actually putting all that extra styling on, rather than putting it on all links in .indexWrap and working to remove it.

    It's all about specificity.

    Maybe this would be easiest:
    Code:
    .indexWrap ul li a {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
    ...
    That would target only anchors in a ul contained in .indexWrap
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It might be easier to put a class on the links you're actually putting all that extra styling on, rather than putting it on all links in .indexWrap and working to remove it.

    It's all about specificity.

    Maybe this would be easiest:
    Code:
    .indexWrap ul li a {
        -moz-border-bottom-colors: none;
        -moz-border-image: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
    ...
    That would target only anchors in a ul contained in .indexWrap
    Thank so much for your help.

    That has fixed it a treat.

    I am still learning and at my age lol it takes time for new things to set in. It just that over the years I have seen so many people being ripped off over the net, that I have decided to try a setup a no crap system. I know its going to be a mission for me.


  •  

    Posting Permissions

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