I'm trying to add a red 2px border when a customer hovers over one of my three 'service widgets' on my website https://tomnicholls.co on the homepage. I can't figure out where to apply the code as I can't find a container? I can't even seem to add a regular border never mind a border on :hover.
I have tried applying code to .col-link & .col-link .custom-link and have also tried giving the column a class and applying code to that as well as giving the actual content block a class (btn-widget) and applying css to that but nothing seems to be working.
.btn-widget {
width: 328px !important;
margin-left: 72px !important;
border-left: 2px !important;
border-right: 2px !important;
border-top: 2px !important;
border-bottom: 2px !important;
border-color: #c92228 !important;
z-index: 1000;
color: #000000 !important;
}
I would like to solve the problem and have a border on hover
It worked with this :
a.col-link.custom-link:hover {
border: 2px solid red;
}
Related
I'm learning CSS online and the above code was perfectly working when he used it. But when I did the same, browser markedenter code here it as an invalid property value. Moreover the border-bottom makes the hr entirely gray in color(the above mentioned code in rgba is for gray color) overriding the border-top and the default color of hr
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);}
}
Remove one } from the end , it should works perfectly ;
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
Try formatting you css file every moment to not have this problem again.
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
I have this working css but I like to make it into one line, is it possible?
border-radius: 0;
border-color: #ccc;
border-width: 0 0 2px 0;
border-style: none none solid none;
This short article covers the various bits of CSS shorthand you'll encounter in your day to day work.
https://www.w3.org/community/webed/wiki/CSS_shorthand_reference
Border
border allows you to set border width, style and, color.
UPDATE:
As #torazaburo pointed out it actually requires border: 0 none #ccc for it to be correct as well as adding border-radius: 0 as it's not part of the border shorthand.
#example {
border: 0 none #ccc;
border-bottom: 2px solid #ccc;
border-radius: 0;
}
If it's not an issue that the following could take non-bottom border width and style from other rules in the cascade then this should be fine:
#example {
border-bottom: 2px solid #ccc;
}
Produces the same CSS that you're wanting:
https://jsfiddle.net/betg5xue/5/
If you simply try to do
border-bottom: 2px solid #ccc;
it could possibly take non-bottom border width and style from other rules in the cascade. If that's not an issue, then the above would be fine.
The only reliable way that is identical to what you proposed involves three lines, there's no way around it:
#example {
border: 0 none #ccc;
border-bottom: 2px solid #ccc;
border-radius: 0;
}
Unfortunately, it is necessary to repeat the #ccc in the border-bottom property because if omitted it does not take the value from the cascade; instead it takes currentColor. It is necessary to specify border-radius as a separate property because it is not part of the border shorthand.
There is a very strange problem in my website. When opening the homepage on Mozilla the borders of the 2 buttons on my header are missing. You can check the website here: http://www.beautiful-burger.com
Just open it on mozilla and refresh it multiple times to see what I am talking about. The buttons are the ones used on the top right BUT they are also used on the lower part of the homepage (without any problems on the borders). Also, if you check another page, like the Food Blog, you will see that they appear just fine there. Is it a problem with the header? I have been trying to figure this out for the past 2 days but I have no clue what's going on..It runs just fine on other browsers. The css I am using atm is this:
#header-button-container .primary-button,
#header-button-container .secondary-button {
color: #ffffff ;
border: 1px solid #ffffff !important;
vertical-align: baseline;}
.secondary-button {
background-color: transparent ;
border: 1px solid #ffffff !important;
color: #fff !important;}
.secondary-button:hover{
background-color: #D0C274 !important ;
color: #fff ;}
.site-header .secondary-button {
color: #fff; }
Thank you for your time and any help. Feel free to ask if you need any more information since I am very new at this and probably missing something out.
I can't replicate the problem in my firefox. What version and what OS?
In your css your only targeting the border attributes using 'border:' rather than specifying individually. Use something like the following.
#header-button-container-inner .button.secondary-button {
border-color: white;
border-style: solid;
border-width: 1px;
}
if that doesn't work
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
And if that doesn't work
#-moz-document url-prefix() {
#header-button-container-inner .button.secondary-button {
border-color: white !important;
border-style: solid !important;
border-width: 1px !important;
}
}
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)