remove transparency on child elements

[cerr]

Hi,

I want to remove the transparency of my images within content, how do I do this. Limk to the website: http://quaaoutlodge.com/

Thanks,
Ron

[Beauregard T. Shagnasty]

cerr wrote:

> I want to remove the transparency of my images within content, how do I
> do this. Limk to the website: http://quaaoutlodge.com/

Well, I'd suspect it is one or more of the 13 occurrences of "transparent"
in your multitudinous style sheets.

Since there is about 4,800 lines in the CSS, I decided not to dig any
deeper. I think a much bigger problem is your use of overly small dull off-
white text on top of that huge background image, thus rendering it nearly
unreadable. This comment seems to apply to all your pages. You must have
spectacular vision.

--
-bts
-This space for rent, but the price is high

[Thomas 'PointedEars' Lahn]

cerr wrote:

> I want to remove the transparency of my images within content, how do I do
> this. Limk to the website: http://quaaoutlodge.com/

The “opacity” property is toxic: once _translucent_, always translucent
(transparency is the effect of *colorless* glass instead, opacity = 0). If
a parent element has opacity < 1, you can only make the child at least as
translucent as the parent (the minimum value is opacity = 0).

In general, you need to use “background-color” (and “color”) with rgba(…) or
hsla(…) instead of “opacity” for the parent element. For example, instead
of

background-color: white;
opacity: 0.7;

use

background-color: white;
background-color: rgba(255, 255, 255, 0.7);

The first declaration makes sure that there still is a background-color if
rgba(…) is not supported. This is important for accessibility, as there
should be also

color: black;

and the like in the same rule. See also: <http://www.w3.org/QA/Tips/color>.

In your case, you need to adapt the *linear-gradient parameters in
#contentWrapper to use an alpha channel value of 0.7 for each color stop
(RGBA values should be supported by all gradient-supporting UAs except older
MSHTML). If you used a background-image, you would need to use a
translucent PNGA.

Please get a real name.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[Evertjan.]

Thomas 'PointedEars' Lahn wrote on 14 apr 2013 in
comp.infosystems.www.authoring.stylesheets:

> [..] For example, instead of

>
> background-color: white;
> opacity: 0.7;
>
> use
>
> background-color: white;
> background-color: rgba(255, 255, 255, 0.7);
>
> The first declaration makes sure that there still is a
> background-color if rgba(� �) is not supported. This is important for

> accessibility, [..]>

I read somewhere:

"Opacity sets the opacity value for an element and all of its children.
RGBA sets the opacity value only for a single element."

Chrome tested true.

I this [./still/yet] true cross-browser-wize?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[James Moe]

On 04/14/2013 02:38 PM, Thomas 'PointedEars' Lahn wrote:
>
> In general, you need to use “background-color” (and “color”) with rgba(…) or
> hsla(…) instead of “opacity” for the parent element.
>

Sadly, rgba() does not work in Internet Explorer v8 (and earlier). IE8
is still widely used.

--
James Moe
jmm-list at sohnen-moe dot com

[James Moe]

On 04/14/2013 12:14 PM, Beauregard T. Shagnasty wrote:
> [...] I think a much bigger problem is your use of overly small dull off-

> white text on top of that huge background image, thus rendering it nearly
> unreadable. This comment seems to apply to all your pages. You must have
> spectacular vision.
>

I agree. The text is very difficult to read. The main menu items are
almost invisible even when hovering. And there is an odd phrase at the
right of the menu: "ok Now". Possibly because I have a minimum font size
set.
My first thought about the website was: I hope this is not a live
site, the layout and presentation suck; it will not be attracting customers.

[Thomas 'PointedEars' Lahn]

James Moe wrote:

> On 04/14/2013 02:38 PM, Thomas 'PointedEars' Lahn wrote:
>> In general, you need to use “background-color” (and “color”) with rgba(…)
>> or hsla(…) instead of “opacity” for the parent element.
>>
> Sadly, rgba() does not work in Internet Explorer v8 (and earlier). IE8
> is still widely used.

AISB. You would need to use Conditional Comments to work around that if you
wanted to.


PointedEars
--
When all you know is jQuery, every problem looks $(olvable).

[Thomas 'PointedEars' Lahn]

James Moe wrote:

> On 04/14/2013 12:14 PM, Beauregard T. Shagnasty wrote:
>> [...] I think a much bigger problem is your use of overly small dull off-
>> white text on top of that huge background image, thus rendering it nearly
>> unreadable. This comment seems to apply to all your pages. You must have
>> spectacular vision.
>>
> I agree. The text is very difficult to read.

The text as it is is rather difficult to read because it is *translucent*,
which in turn is due to “opacity: 0.7”. Getting rid of the “opacity”
property solves this problem as well.

> The main menu items are
> almost invisible even when hovering.

Not here, although I am explicitly using low brightness and contrast, and it
would not be correct to call my vision spectacular. Maybe your screen's
contrast and brightness is set too high?

> And there is an odd phrase at the
> right of the menu: "ok Now". Possibly because I have a minimum font size
> set.

I can read there „Book now“ just fine. However, it would probably be better
if such important information was not located on the far right-hand side in
a left-to-right writing system.

> My first thought about the website was: I hope this is not a live
> site, the layout and presentation suck; it will not be attracting
> customers.

IBTD. If the “opacity” issue and some minor other issues would be fixed, it
would be looking great. An inviting background image, warm colors; a place
where you think you could feel at home. BTDT (with Chromium DevTools).

And sorry to say that, but by contrast sohnen-moe.com sort of repels me as a
customer, because it does not use my wide-screen real estate, I get an
information overload in the remaining space, in rather unpersonal white
(though the color contrast is better, and may be I am just not the kind of
customer you are looking for), and the elements of the document do not align
in a way that I could reasonably tell that they constitute a unit of
information.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300...@news.demon.co.uk>

[Thomas 'PointedEars' Lahn]

Michael Vilain wrote:

> cerr <ron.e...@gmail.com> wrote:
>> I want to remove the transparency of my images within content, how do I
>> do this. Limk to the website: http://quaaoutlodge.com/
>

> I think transparency is a function of the image itself. No attribute of
> any tag is going to change that. Check whatever image editor you're
> using to generate the image and fix it there.

That image is obviously a *JPEG* image; JPEG does not support an alpha
channel, so this is – again – the wrong answer.

The translucence of the image *and* the text (which makes the latter that
hard to read) comes from the “opacity” property of the ancestor element.
And no amount of image editing is going to fix it.


PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286...@94.75.214.39>