Forums

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

Home Forums CSS border bottom?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41698
    wragen22
    Member

    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 {

    }
    }

    #119530
    James
    Participant

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

    #119557
    wragen22
    Member

    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

    #119559
    Andy Howells
    Participant

    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.

    #119564
    James
    Participant

    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!

    #119579
    wragen22
    Member

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

    Thank you.

    #119582
    Andy Howells
    Participant

    @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!

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