Grow your CSS skills. Land your dream job.

border bottom?

  • # January 1, 2013 at 12:54 am

    For some reason I am getting a border-bottom: 2px solid transparent; at the bottom of some buttons i’ve created. Any idea why?

    btns {
    list-style: none;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;

    li {
    display: inline;
    }
    a {
    background: white;
    color: #e05f5a;
    display: inline-block;
    padding: 6px;
    font-size: 15px;
    @include box-shadow(inset 0 0 10px rgba(0, 0, 0, 0.5));
    }
    @include breakpoint(baby-bear) {
    margin-bottom: 8px;
    a {
    font-size: 10px;
    }
    }

    a:hover {

    }
    }

    # January 1, 2013 at 1:29 am

    How are you implementing this via HTML? Use CodePen to show an example.

    # January 1, 2013 at 12:42 pm

    Ok, codepen here. If you click on the h1′s and the buy / pdf buttons – you can see the border-bottom slightly. It seems the display: inline-block is causing it. Any suggestions here?

    http://codepen.io/wragen22/full/sqrlD

    # January 1, 2013 at 12:53 pm

    Your standard A styling has the 2px border bottom;


    a {

    text-decoration: none;
    color: #101010;
    border-bottom: 2px solid transparent;
    }

    Just set a border/border-bottom of none on your button class to opt out of that part of the default A styling.

    # January 1, 2013 at 1:19 pm

    Give the buy/pdf buttons a class or ID tag and this will apply any SCSS/CSS to that specific button. @andy_unleash is right, you’re applying the properties to every “a” element in your document (you have an “a” style that is global with border-bottom: 2px solid transparent;).

    I can see you have actually set a SCSS selector called “.font-btns {“

    Check this for the updated SCSS. All I did was apply:


    border:0;

    to


    .font-btns {
    list-style: none;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;

    li {
    display: inline;
    }

    a {
    background: white;
    color: #e05f5a;
    display: inline-block;
    padding: 6px;
    font-size: 15px;
    border:0; /* Added the property here */
    @include box-shadow(inset 0 0 10px rgba(0, 0, 0, 0.5));
    }
    }

    and this removed the border directly.

    The global property will cause every “a” link to display that transparent border.

    Change the “a” property at the top of your CSS to this (remove the border):


    a {
    text-decoration: none;
    color: #101010;
    }

    And place the border back in to the “nav” with this (adding the border only in the menu):


    //
    NAV
    .main-nav {
    font-weight: 500;
    list-style: none;
    margin: 0 auto 80px auto;
    padding: 0;
    text-align: center;

    a {
    display: inline-block;
    padding: 5px;
    position: relative;
    border-bottom: 2px solid transparent; /* Added the property here */
    }

    a:active {
    border-bottom: 2px solid;
    }
    a:hover {
    border-bottom: 2px solid;
    position: relative;
    }

    }

    Hope this helps!

    # January 1, 2013 at 5:13 pm

    Perfect. I’m still learning and overlooking things like this.

    Thank you.

    # January 1, 2013 at 5:57 pm

    @wragen – Dude, don’t worry about it – this is an issue that will always happen – even long time developers still make these mistakes, it’s all part of the problem solving fun!

    # January 1, 2013 at 6:47 pm

    @wragen – No worries buddy. We all do it, no matter how many times we go at a slice of code. We miss something somewhere – in fact I’m prone to mistakes like these a lot when not writing in Dreamweaver, You become deluded easily by their “autocomplete” jargon.

    @andy_unleash – It’s true, you should of seen how many edits I had on this alone earlier!

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