Msg#: 4455542 posted 11:52 am on May 20, 2012 (gmt 0)
Hello All -
I've been all over the web to solve this problem - and have tried nearly everything I've found - but still can't get one fixed-position div to center inside the other.
This is for an ajax "loading" animation.
So, I've got two divs: 1 full viewport opacity "mask" div and 1 container div which holds the animated .gif and a <p></p> tag pair.
The "container" div (the one with the animation and the <p> pair) IS NOT a child of the "opacity mask" div because, if it is, the "container" will pick up the opacity from the parent which I don't want.
With the code and css shown below, I've come close... but I've got to use top and left MARGIN percentages which kinda works but isn't perfect.
Maybe (hopefully) somebody can find the error of my ways.
Msg#: 4455542 posted 4:25 pm on May 20, 2012 (gmt 0)
The best way I know of to avoid opacity inheritance issues is to use rgba() colors for text and background colors rather than relying on CSS opacity. You lose compatibility with IE8 and lower, but that's a quickly shrinking percentage of the audience and you can often work around them by using transparent .png background images.
That lets you nest your <div>s and makes your positioning issues much simpler.