My asp.net website uses one CSS file with two groups of selectors ".Tab" and ".TabLower". On my development machine the CSS loads with all selectors and is applied correctly, when I deploy the website to production server (IIS 7) only the first selector ".Tab" is loaded if I inspect the page.
What is the cause of this issue?
CSS file
/* ############################################
Tab - default tab
############################################### */
/*Body*/
.Tab .ajax__tab_body
{
border: 5px solid #B6C9D4;
padding: 15px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #000000;
padding: 7px;
background-color: #B6C9D4;
font-weight: bold;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
background-color: #B6C9D4;
padding: 7px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #B6C9D4;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background-color: #F2F2F2;
padding: 7px;
font-weight: bold;
}
.Tab .ajax__tab_inner
{
color: #666666;
background-color: #F2F2F2;
padding: 7px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
/* ############################################
TabLower
############################################### */
/*Body*/
.TabLower .ajax__tab_body
{
border: 5px solid #B6C9D4;
padding: 15px;
}
/*Tab Active*/
.TabLower .ajax__tab_active .ajax__tab_tab
{
color: #000000;
padding: 4px;
background-color: #B6C9D4;
font-weight: bold;
}
.TabLower .ajax__tab_active .ajax__tab_inner
{
background-color: #B6C9D4;
padding: 4px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #B6C9D4;
}
/*Tab Inactive*/
.TabLower .ajax__tab_tab
{
color: #666666;
background-color: #F2F2F2;
padding: 4px;
font-weight: bold;
}
.TabLower .ajax__tab_inner
{
color: #666666;
background-color: #F2F2F2;
padding: 4px;
font-weight: bold;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
Related
.class-action:hover, .class-action.activeOne {
color: black;
font-weight: bold;
}
.class-action.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover"
other option is below, but it repeats the css
.class-action:hover {
color: black;
font-weight: bold;
}
.class-action.activeOne {
color: black;
font-weight: bold;
margin: 3px 0px;
border-bottom: 2px solid black;
}
Simply nest your selectors:
.class-action {
&:hover,
&.activeOne {
color: black;
font-weight: bold;
}
&.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
}
I am using AngularJS and I wonder if there are any features that can help me. I have the following button CSS:
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
This looks good but I would like to have an effect that appears when I hover over and click on a button without yet releasing the click.
Is there any way that I can catch this with angular and have the class changed for the period when I am holding down the button?
Please note that I am looking for a CSS only or a CSS/AngularJS solution. I am not using jQuery.
Thanks
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/sel_active.asp
button:hover button:active
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
button:hover
{
background: red;
}
button:active
{
background: green;
}
<button>button</button>
you can put the following css:
button:active{
background-color: red;
}
for more information: http://www.w3schools.com/cssref/sel_active.asp
I used a Master Page and on separate page, I used ajax tab control but unable to change selected tab color..
Thanx in Advance
You can use this css.
.MyTabStyle .ajax__tab_header
{
font-family: "Helvetica Neue" , Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
display: block;
margin-left:20px;
z-index:-1000;
}
.MyTabStyle .ajax__tab_header .ajax__tab_outer
{
border-color: #222;
color: #222;
padding-left: 10px; /*margin-right: 3px;*/
border: solid 1px #999;
border-bottom-color: #d7d7d7;
-webkit-margin-before: 1em;
-webkit-margin-after: -1px;
-webkit-margin-start: 0px;
-webkit-margin-end: -1px;
}
.MyTabStyle .ajax__tab_header .ajax__tab_inner
{
border-color: #666;
color: #000;
padding: 0px 5px 0px 5px;
}
.MyTabStyle .ajax__tab_hover .ajax__tab_outer
{
border-color: #BBB; /*color #1*/
background: white;
color: Black;
}
.MyTabStyle .ajax__tab_hover .ajax__tab_inner
{
color: Black;
cursor: pointer;
}
.MyTabStyle .ajax__tab_outer
{
padding: 0 16px; /* edit 16px for different tab width */
display: inline-block;
font: normal 12px Verdana;
line-height: 25px; /* height #1 */
text-decoration: none;
color: #333;
border: 1px solid #999; /*This color can be different from color #2 */
border-bottom: none;
background: #F6F6F9;
outline: none;
border-radius: 5px 5px 0 0;
position: relative;
margin: 0 -1px -1px 0;
text-align: -webkit-match-parent;
}
.MyTabStyle .ajax__tab_active .ajax__tab_outer
{
color: white;
font-weight: bold;
border-color: #BBB; /*color #1*/
background: #0099CC; /*color #2*/
/*z-index: 3;*/
padding: 1px 10px 0px 10px;
border-bottom-width: 0px;
}
.MyTabStyle .ajax__tab_active .ajax__tab_inner
{
color: white;
border-color: #333;
padding: 0px 10px 0px 10px;
}
.MyTabStyle .ajax__tab_body
{
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
/*background-color: #fff;*/ /*border-top-width: 0;*/
border: solid 1px #d7d7d7; /*border-top-color: #ffffff;*/
padding: 10px 10px;
border-radius: 4px;
box-shadow: 0 0 8px #CCC;
background-color: white;
}
HTML
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="100%"
CssClass="MyTabStyle" OnClientActiveTabChanged="SaveActiveTabIndex">
<asp:TabPanel HeaderText="Personal Details" runat="server" ID="TabPanel1">
<ContentTemplate>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
I know it's an old question, but if anyone will need this, a working answer is:
.MyTabStyle .ajax__tab_tab /*inactive tab*/
{
outline: 0;
}
.MyTabStyle .ajax__tab_active .ajax__tab_tab /*active tab*/
{
color: #d13f31;
outline: 0;
}
The button I want:
I have tried this, but it doesn't work:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 3px double #f26700;
background: #f26700;
}
How can i display this white line with CSS?
Write:
button{
border: 3px double white;
}
DEMO here.
OR:
button{
border: 1px double white;
outline: 1px solid #f26700;
}
DEMO here.
OR:
button{
border: 2px solid white;
box-shadow:0 0 0 0px white, 0 0 0 2px #F26700;
}
DEMO here.
as commented, 2 easy options :
box-shadow and outline:
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline:solid #f26700 1px;
padding:0.25em 1em;
}
button + button {
box-shadow: 0 0 0 1px #f26700;
outline:none;
}
demo : http://codepen.io/anon/pen/InDqa
button {
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
border: 1px solid white;
background: #f26700;
outline: solid #f26700 1px;
padding: 0.25em 1em;
}
button+button {
box-shadow: 0 0 0 1px #f26700;
outline: none;
}
<button>outlined</button> <button>shadowed</button>
Use the outline property:
CSS
.button {
font-family:'Ubuntu', sans-serif;
font-size: 1em;
font-weight: bold;
color: white;
line-height: 1.8em;
border: 1px solid white;
background: #f26700;
width: 100px;
height: 30px;
text-align: center;
outline: 1px solid #f26700;
}
Here's the JSFiddle: http://jsfiddle.net/2kgGF/
You can do this just with an outline.
button {
width: 8rem;
font-size: 1rem;
line-height: 2.4rem;
color: white;
background: darkorange;
border: none;
outline: .1rem solid white;
outline-offset: -.3rem;
}
http://jsfiddle.net/lrsbck/7Zp6X/
For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.
The .paginate_button rule should come first:
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.
If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.
The best solution is to hide any unnecessary button.
use the following :
.paginate_button_disabled {
display: none;
}
in this case previous, next, first and last buttons will be shown only when they are needed.