The z-index CSS property doesn't work on Internet Explorer 7, 8 and 9. How can I workaround this problem?
HTML:
<div>
<input type="text">
<span>label</span>
</div>
CSS:
body{background:#ddd;}
div{
position:relative;
width:250px;
height:30px;
line-height:30px;
background:#fff;
border:1px solid #666;
z-index:0;
}
input{
background:none;
border:0;
position:absolute;
top:0px;
left:0px;
width:242px;
height:22px;
padding:4px;
z-index:2;
*line-height:30px; /* ie7 needs this */
line-height /*\**/: 30px\9; /* ie8 needs this */
}
span{
position:absolute;
top:0px;
left:4px;
z-index:1;
}
input:focus + span{
filter: alpha(opacity=50);
-khtml-opacity: 0.50;
-moz-opacity: 0.50;
opacity: 0.50;
}
If you click on the label, the input doesn't focus
You can see what happens here: http://jsfiddle.net/YKFuZ/2/
I've updated your code a bit - http://jsfiddle.net/YKFuZ/6/
IE doesn't render z-index properly. So set your div's Position to absolute. And IE doesn't support the :focus pseudo-selector. I would stick to javascript whenever IE is concerned.
EDIT: The input's parent is set to relative whereas the input element itself is set to absolute. Z-index will not be properly rendered in such a case.
Related
I have a button in HTML and I have to add opacity to it. I want to use CSS to do that. Here is my existing CSS code for button:
.btn_nav{
position:fixed;
width:100%;
height:68px;
background-color:#323232;
border-bottom:2px solid #777777;
}
There are few different ways to apply opacity to a button. Here is one of them.
.btn_nav{
position:fixed;
width:100%;
height:68px;
background-color:#323232;
border-bottom:2px solid #777777;
/*Below are two new line which enable opacity*/
opacity: 0.9;
filter: alpha(opacity=90);
}
add this css property
opacity:0.2; // change values as you like
I have a asp.net solution that uses ajax. One of the features using update progress panel is that the contents are only revealed when an ajax request is going on in the background.
So I want to basically show a black transparent background which stops the user from doing anything, and also display a box in the center of the screen that says please wait, and has a loading gif.
I was able to get the black background using this:
<asp:UpdateProgress ID="AjaxAnimation" runat="server">
<ProgressTemplate>
<center>
<%-- <asp:Image ID="loadingImage" runat="server" src="/_layouts/images/PDFLibrary/ajax-loader.gif"/> --%>
<div class="dim"></div>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
Css
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
But how can I have a box in the center of the screen?
Something as following?:
<div class="dim" runat="server">
<span class="msg">Please wait...</span>
</div>
.dim
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:100 !important;
background-color:black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
.dim .msg {
display:inline-block;
position: absolute;
width: 200px
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
You need to use position:absolute and negative margin.
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
Please have a look my code here
I am trying to hide a progress bar after a certain amount of seconds and show a div.
I have coded this jsFiddle but does not seem to be working.
jsFiddle
you can do this easly in css
.blue{
width: 200px;
background-color: blue;
height:30px;
left:40px;
top:30px;
padding:5px;
}
.blue>div{
background-color:red;
height:25px;
width:50px;
top:10px;
}
<div class="blue" ><div>20%</div></div>
You need browser prefixes:
#keyframes bubbly
{...}
#-moz-keyframes bubbly /* Firefox */
{...}
#-webkit-keyframes bubbly /* Safari and Chrome */
{...}mymove
#-o-keyframes bubbly /* Opera */
{...}
So it works in almost all browsers.
Update: The original phrasing of this question was vague so i've modified it to better express what i'm asking.
Lets say I have two divs
<div class='button'>A</div>
<div class='button green-button'>A</div>
with the following styles:
div.button {
/* define position, size, etc ...*/
color:#FBB
background-color:#F00
}
div.button.green-button{
color:#BFB
background-color:#0F0
}
In this example it was easy to shift the hue of the first button from red to green by simply changing shifting the values of color and background-color by 1 digit. If I wanted to make a blue button I could do the same shift again for a 3rd button.
However, in the case where I don't want to shift completely from one color to the next its a bit trickier.
Additionally I want to color shift everything in the div, not just the background-color and color properties. So if I were to place and image in the div the colors of the image would get shifted as well.
Is this possible in CSS? If not can you do it in Javascript?
Since everyone is posting wild guesses, I'll jump right into it.
You could achieve something using CSS filters (in your case hue-rotate)
Or the same using a CSS preprocessor like LESS.
Do you mean like this:
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
background-color:red;
}
Or are you looking for something that figures out the color offset on it's own?
If you are there is CSS3's filter: hue-rotate(angle);
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
-webkit-filter:hue-rotate(250deg);
-moz-filter:hue-rotate(250deg);
-ms-filter:hue-rotate(250deg);
filter:hue-rotate(250deg);
}
Yeah, you'll need multiple elements though.
HTML:
<div>
<span class="over-bg"></span>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }
http://jsfiddle.net/TeCvr/1/
Another approach using pseudo-elements:
HTML:
<div>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
top:0; height:100%; width:100%; background-color:#22FF00; }
http://jsfiddle.net/TeCvr/2/
Well you could use CSS3 supported transition style rules like:
.button:hover {
background-color: #F0F0F0;
-webkit-transition: background-color 1ms linear;
-moz-transition: background-color 1ms linear;
-o-transition: background-color 1ms linear;
-ms-transition: background-color 1ms linear;
transition: background-color 1ms linear;
}
Is there any specific reason as to why you would like to achieve this..? I can't think of any application as such; unless you came across this while reverse engineering a design and couldn't find the CSS that caused this behaviour..?
Reference:
http://www.css3.info/preview/css3-transitions/
I don't know if i understand you. You can change the class of the div. For example .button to .buttongreen with diferent properties.
Without using color and background-color properties, you can still use:
background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)
That's a gradient from a given color to the same color but the whole gradient is not a color in CSS.
Transition rotate causes chrome to flash black screen. Is it a Chrome bug (works fine in Safari) or it can be fixed with some clever css.
div {
width:200px;
height:200px;
position:relative;
background:#ddd;
}
span {
display:inline-block;
position:absolute;
top:40px;
left:40px;
width:20px;
background:#007;
height:10px;
-webkit-transition: all .5s;
}
div:hover > span {
-webkit-transform: rotate(180deg);
}
<div>
<span></span>
</div>
Example fiddle here.
The problem with this problem is that it doesn't occur every time so you'll have to hover the gray square several times and you should see the screen blinking in black.
Tested in:
Chrome 16.0.912.75
Chrome Canary 18.0.1010.0
Works fine on:
Safari 5.1.2 (6534.52.7)
All test on Snow Leopard
You can fix this by forcing compositing to stay on by giving -webkit-transform: translate3D(0, 0, 0) to the parent of the transformed element.
div { width:200px; height:200px; position:relative; background:#ddd; -webkit-transform: translate3D(0, 0, 0)}
span { display:inline-block; position:absolute; top:40px; left:40px; width:20px; background:#007; height:10px; -webkit-transition: -webkit-transform .5s; }
div:hover > span { -webkit-transform: rotate(180deg); }
<div>
<span></span>
</div>
Check out the fiddle: http://jsfiddle.net/UHLFF/