- This topic is empty.
-
AuthorPosts
-
January 1, 2013 at 12:54 am #41698wragen22Member
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 #119530January 1, 2013 at 12:42 pm #119557wragen22MemberOk, 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?
January 1, 2013 at 12:53 pm #119559Andy HowellsParticipantYour 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 #119564JamesParticipantGive 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 #119579wragen22MemberPerfect. I’m still learning and overlooking things like this.
Thank you.
January 1, 2013 at 5:57 pm #119582Andy HowellsParticipant@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!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.