Opacity css affecting children elements - html

I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an another one on top of that to show the warning message, but the opacity settings affects for the cover layer affects the warning message also. I have tried using the techniques from previous questions but I could not make it work. Can anyone help me?
http://jsfiddle.net/xcPcv/

Just move the message outside of the faded container ...
From:
<div id="fadeMe">
<div id="center">You have javascript disabled.</div>
</div>
To:
<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>
http://jsfiddle.net/xcPcv/7/

Instead of opacity, use rgba(0,0,0,.75) for the background:
http://jsfiddle.net/xcPcv/9/

The issue is that opacity applies to all contained (child) elements, not just the element you are applying
opacity
to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.
In your case you need to do nothing else but move the popup div outside the fadeMe div
<div id="fadeMe"></div>
<div id="center">You have javascript disabled.</div>

Related

Why does opacity property carry over to an "irrelevant" element? [duplicate]

I'm coding a "popup window" in JavaScript and I've come across an interesting thing:
The navy square under the popup window is visible even though I would expect it to be hidden. The popup was added after the square, so it should be on the top.
CSS opacity property of the navy square is 0.3. From what I've tried, it seems that every number from the interval (0,1) would yield the same result. If I change it to 1, then it behaves as expected (i.e. the part of the square under the popup is hidden).
I've tried to set the z-index property to 10 for the square and 100 for the popup, but it doesn't change anything.
What am I missing? Why is part of square displayed?
Tested browsers:
Firefox 3.6.x
Chrome 4
This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):
Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).
It's not a problem of opacity being more important than z-index, rather than z-index being relative to their stacking context (see z-index in the CSS2 specification).
In other words, z-index are only significant within the context of a positioned ancestor (whether its relative, absolute or fixed). What you need to do to fix your problem is add a position: relative; to the element that contain both your popup and your navy square, and probably add it a z-index: 1; . Seeing your screenshot it will probably be a top element such as a wrapper div.
Workaround for two elements, like divs: add a 0.99 opacity to your top element, and the order of both is reestablished.
opacity: 0.99;
An alternative to using opacity, is to use a transparent colour (with an alpha value)
So, rather than using
{
background: gray;
opacity: 0.5;
}
You could try
{
background: rgba(128,128,128,0.5);
}
It isn't identical, but I was encountering the same issue you were having, and the above fixed it.
Example code might be needed to debug this problem.
You might put overflow: hidden and possibly position: relative in a DIV which surrounds all the editor objects to try to force the elements to only be drawn within that DIV, e.g:
<div style="overflow: hidden; position: relative">
(Editor object buttons go here)
</div>
As a last resort, you could also try a iframe in between the two elements to try to stop them seeping through.
You might try to set the popup window's DIV like this using !important so the style doesn't change on applying new style or class:
background-color: white !important;
z-index: 100 !important;
opacity: 1.0 !important;
Then, make new CSS class:
.PopupElement
{
z-index: inherited;
opacity: inherited;
}
And add class to all elements in the window, like this for example:
<input value="posx" class="some_class PopupElement"/>
My guess is that this would work, since there is no priority in applying CSS attributes... as far as I know. =)
I had the same issue. Using rgba instead of color/opacity solved my problem. Working with LESS (in the Bootstrap framework), the fade() function did the conversion for me.
Although #Guillaume Esquevin already gave a great answer, I will try to expand on it in case someone ignores what a stacking context is (like I did).
As you can read here, there is something called stacking context, which refers to a group of elements sharing a parent that move together in the stack. An example could be a div and all its children.
There are three ways to create a stacking context: in the root of the document (the html element), by positioning the parent element, and by changing the opacity of the parent to something lower than 1.
Then, if you have a div with opacity lower than 1 and you want some sibling element of this div to appear behind it (and its children), you can create a new stacking context on such sibling by setting its position to relative or by changing its opacity as well.

Why does id not override class in bootstrap?

I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.
Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.
It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.
Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.
They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.
#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.

set a default div (CSS transitions)

My goal is to create a page with 3 absolutely positioned, overlapping divs. Only 1 div should be visible at a time. 3 buttons at the bottom of the page are used to "select" each div with a fade-in/out using CSS transitions.
I'm close but I have a small issue.
Currently, upon initialization the page is blank with 3 buttons.
My question is, how do I have the first div (with id="#1") appear by default upon initialization without the need to press a button. I still want div #1 to follow the normal fade-in/fade-out rules, with the exception of upon initialization.
HTML:
<div id="1" class="inner">One</div>
<div id="2" class="inner">Two</div>
<div id="3" class="inner">Three</div>
Toggle One
Toggle Two
Toggle Three
SOME CSS:
.inner{
position:absolute;
visibility:hidden;
opacity:0;
transition:visibility 0s linear .5s, opacity .5s linear;
}
.inner:target{
visibility:visible;
opacity:1;
transition-delay:0s;
}
I would prefer a solution that doesn't use javascript/jQuery but I'm not against it if necessary.
Most likely you will need to use JavaScript/jQuery at a minimum to set the visibility of the #1 div on load. You can do this with CSS via:
.inner:first-of-type {
visibility: visible;
opacity: 1;
}
http://jsfiddle.net/74qYY/
The restriction there is that a background is required to obscure the other divs. If you can't live with that, you can always use JS: http://jsfiddle.net/74qYY/1/
For those interested, I found a round-about way to preserve the CSS transitions without requiring a background. Specifically I used the url fragments set by the buttons.
In the question, I wanted div "#1" to show as default. Another way to look at this is that I wanted a GET request of "/" to redirect to "/#1".
I used some jQuery to check for the absence of a URL fragment and then redirect to www.url.com/#1, which in turn triggers the CSS transition.

Hovering not working when in a table

I put a Div box in a table cell that should slide up once its hovered over. When I hover over it, it doesn't do anything. I have tried the code below without success.
I also tried the Javascript way which didn't work either.
<td>
Product 1
<div id="p1" class="bottombox"></div></td>
.bodytable td #p1{
bottom:-10px;
}
.bodytable td #p1:hover{
bottom:-130px;
width: 50%
}
Hovering is actually working. Try to give background color to the div and you will see it.
Also if you haven't specified div position as absolute than bottom property will not work like this. Perhaps you wanted to have margin-bottom or padding-bottom?
EXAMPLE HERE
you can´t see what happens on hover because your p1 class is empty.
Try:
<div id="p1" class="bottombox">Product 1</div>
Is this what you're looking for? It uses the height property. http://jsfiddle.net/vBdne/
If you want the hidden to stick, you're gonna want to use javascript.

set different opacity for nested elements

I want to make a win7 file exporlor-like effect: the title bar have a opacity less than 1, while the content have no opacity.
Then I tried to combine two elements together to make it:
<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
<div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>
I want to make the div#outer have a opacity of 0.8,then make the div#inner have no opacity(with opacity=1).
However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.
Any ideas?
However it seems that this does not work. Since the opacity of div#outer will affect that of the div#inner.
Correct.
But if what you want is just a translucent background, setting RGBA color as background-color would meet the needs. Like this:
<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
<div id="inner" style="background-color:gray;height:100%;"></div>
</div>
For more infomation, read MDN documents here: https://developer.mozilla.org/en-US/docs/CSS/color
For IE 7 support, I believe this(using generated background image files) is an acceptable solution.
The inner div will inherit the opacity of its container.
A cross-browser workaround is to avoid nested elements and use absolute positioning instead. You can see an example here where opacity is applied to the background but the text has an opacity of 1:
http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010
Code sample (two span elements are placed side by side within the main span, the second one is the background that gets the opacity):
<span style="position:relative;display:inline-block;width:100%;height:100%;">
<span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;">
11:00 AM Image Capture & ECM Using SharePoint
</span>
<span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;">
11:00 AM Image Capture & ECM Using SharePoint
</span>
</span>