Im having a problem to determine how to manipulate the Borders for some Tabs
You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#
You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.
The problem that Im having has to do with the Borders for onClick:
The border-bottom should change from the grey color to white.
The border-left and the border-right should change to the grey color.
Likewise when a Tab is not selected:
The border-bottom should change to the grey color from white.
The border-left and border-right should not have a border.
In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.
Here is my Fiddle- if someone could help It would be great
http://jsfiddle.net/NinjaSk8ter/ZSeFA/
I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:
border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;
Additionally, to get the bottom border to go away, you have one of two options, you could do one of either
remove the bottom border from the .common-heading-tabs a class and add it to the .blue class
add border-bottom-color:white !important; to the .white class
The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color, and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important
Hope that helps!
Edit:
You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:
.left-col
{
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.
Let me know if I can help any more
For an example to make bottom border white look this
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
You have some inheritance going on. Adding explicit values to the .blue class and important to the one in .white worked.
.blue {
background-color: #D7DFEA;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
}
.white {
border-bottom: 1px solid #fff !important;
border-top: 1px solid #A0AFC3;
border-left: 1px solid #A0AFC3;
border-right: 1px solid #A0AFC3;
background-color: white;
}
The problem, as far as I can see, is that while both .common-heading-tabs a and .white are applied to the link, the former is the "more specific" CSS class, which means the browser gives it precedence while determining which styles to apply.
If you want to make sure the .white style overrides the border, you can either add !important to the border style:
.white {
background-color: white !important;
border-bottom-color: #FFFFFF !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
...
}
or redesign the appliance of your classes in such a way that conflicting border styles aren't applied to begin with, which in your case could for example mean moving the blue border style from .common-heading-tabs a to .blue.
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I have issue with border-color. It didn't work. I'm new to css here is the fiddle.
http://jsfiddle.net/zeburrehman/aFzKy/151/
<div id="box">
Hello! The color of box border should be red!!
</div>
#box {
border-color: red;
}
By default the border-width is 0 and border-style is none
So you need to set them to border-width:1px and border-style:solid. You can combine all the border properties into one as below:
#box {
border:1px solid red
}
I had an issue where it seemed that border-color was not being respected, confusingly it even showed having the right color in the style inspector in Chrome (possibly a Chrome bug). The key thing for me was that if the shorthand border style is specified, it sets all three aspects of the border style, regardless of if they are included or not so:
border-left: 1px;
Actually overwrites both the border-left-style and border-left-color properties even though they weren't included. This can for example cause an inherited style to be overridden and appear not to work.
#box{
border:3px solid #aacfac;
}
I hope this helps!
You need to add the border style:
#box {
border: 1px solid red;
}
You can use hex color code for red as well, which is #ff0000 (RGB). 100% Red, 0% Green and 0% Blue if you want pure red color.
#box {
border: 2px solid #ff0000;
}
Try this :
border: 5px solid red;
Can someone help me, please?. I want to add a border style in the link:hover, to a component of primefaces.
I add like this:
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border-style: solid;
border-width: thin;
}
In a file calling pfcrud.css.
The problem is that, the border style is not working/showing.
Thanks!.
Use the shorthand method: border: thin solid black;
CSS
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border: thin solid black;
}
Note that this will change the box-model of the element in question, so when you hover over it this border will effectively increase the element size. You may need to consider accommodating for that change by declaring a rule for the element's natural/default state as well, usually a border with the same width, but transparent works in most cases.
May be this you want to try :
.ui-contextmenu .ui-menuitem-link:hover{
font-weight: bold;
border: 1px solid #a32ddf
}
Updated fiddle of bucurvad: https://jsfiddle.net/upq3045g/3/
More info about border at : http://www.w3schools.com/css/css_border.asp
Have you tried using
.ui-contextmenu .ui-menuitem-link:hover {
border-style: solid black 2px;
}
Is this example ok?
https://jsfiddle.net/upq3045g/2/
I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.
I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.
Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?
It's not working because 1px solid inherit is an invalid value:
According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:
Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
Which means that you would need to use the longhand border-color property in order to inherit the border-color value:
Example Here
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Secondarily, I would like to know how to prevent the text from jumping.
If you don't want the inherited border color, simply use a transparent border to displace the added border:
Example Here
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:
Updated Example
a:hover {
outline: 1px solid red;
}
You need to tell the initial position about the border too. So initially, give transparent border, giving the space.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
<p>
Hello This is a link and here is more text, <b>which doesn't move</b>.
</p>
Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)
instead of using inherit , try
transparent
Then your css class will look like the one below
a:link, a:visited {
border: 1px solid transparent;
}
This will make sure the border space is already taken and when you hover it doesn't hurt
I'm styling the page which has consecutive boxes with bottom border except for the last box. I applied class .box for all the boxes and added .box_last to hide the border only for the last box.
.box {
border-bottom-style: solid;
}
.box_last {
border-bottom-style: transparent;
}
However, I realized that the browser is still applying my .box styling. But when I changed the .box_last from transparent to none, the browser overrode the first style and the border is disappeared.
I have searched for a few CSS specificity articles but hasn't got the answer yet. Can anyone explain for me? Thanks in advances.
The reason border-bottom-style: transparent; is not working is because transparent is a color, not a style. This should work fine:
.box_last {
border-bottom-color: transparent;
}
Or without an extra class:
.box:last-child {
border-bottom-color: transparent;
}