CSS transparency

Not sure if I should put this in off-topic?..

Still, using FW3.5.15 Pro and writing some CSS styling into the head of the document. Problem with transparency…

I’m taking a cell and giving it both an id# and a class - the id to style the cell background, and the class to style the text within it. As this cell is overlaying a page background graphic, I want the grey fill of the cell to have a transparency of 50%. This will just work very well with the page design. However, i don’t want the the text within the cell to have transparency - that should be just plain white.

I have applied a CSS transparency to the cell ID, but not to the text class.

The result is I get my background transparency, but the text is also transparent.

Just wondering how I can apply transparency to the background only, and NOT to the text? I have no transparency syntax applied to the text class.

Hugh


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You are applying the classname directly to the text inside the cell,
right? Otherwise, applying an ID and a Class to the same TD will merge
the properties of the two styles, giving the ID the preference over
the class in case of clashes.

Try setting the opacity on the class to 1.0, and also add an !
important keyword to it:

.yourClass { opacity: 1.0 !important; }

Or, try ganging up the selectors, like this:

#yourId p.yourClass { opacity: 1.0; }

IDs “trump” classnames, all other things being equal. So you have to
be more specific in order to compensate.

Walter

On Jul 3, 2009, at 5:58 PM, hugh wrote:

I’m taking a cell and giving it both an id# and a class - the id to
style the cell background, and the class to style the text within
it. As this cell is overlaying a page background graphic, I want the
grey fill of the cell to have a transparency of 50%. This will just
work very well with the page design. However, i don’t want the the
text within the cell to have transparency - that should be just
plain white.

I have applied a CSS transparency to the cell ID, but not to the
text class.

The result is I get my background transparency, but the text is also
transparent.

Just wondering how I can apply transparency to the background only,
and NOT to the text? I have no transparency syntax applied to the
text class.

Hugh


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

I’m not sure I understand you when you say :“You are applying the classname directly to the text inside the cell, right?”…

I’m not using the freeway styles palette to apply any text formatting. I just have the class and the id attached to the cell via the ‘extended’ option, and then the id and class CSS syntax written (rightly or wrongly) in the of the page markup. And the syntax is as follows:

#textbox {
background:#888;
filter:alpha(opacity=50);
opacity:0.5;
}

.text {
font-family:trebuchet ms,verdana,arial,sans-serif;
font-size:15px;
font-weight:normal;
line-height:18px;
color:white;
padding: 4 20 4 20;
}

If I add your {opacity:1.0 !important;} selector to the class, it makes the text good and white as desired but also makes the background opaque (ie. opacity 1.0).

This may be the wrong way to go about things, but I’ve never liked the freeway styles palette so tend to leave well alone and whenever doing any CSS stuff (mainly menus) syle them through CSS declarations in the - it’s mostly seemed to work ok, too…even if it is the wrong method!

regards
Hugh


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, no matter how you add the styles, what I meant by “applying it to the text” was that your style selector is specifically targeting the text inside the cell, rather than the cell itself.

If you have applied a style to the TD, whether you use an ID or a Class to do that, that style will apply to the TD, and it will cascade down to the contents of that TD.

Freeway cannot make text in a table cell without wrapping that text in a P tag, so if you wanted to apply one style to the TD, and another to the text inside it, you could take advantage of that to create a CSS selector that targets the P tag separately.

#textbox { 
        background:#888; 
        filter:alpha(opacity=50); 
        opacity:0.5; 
    }
#textbox p {
        font-family:trebuchet ms,verdana,arial,sans-serif; 
        font-size:15px; 
        font-weight:normal; 
        line-height:18px; 
        color:white; 
        padding: 4px 20px;
        opacity: 1.0;
    }

Now every P tag (and its contents) within the TD will have opaque white text, not ghostly 50% strength text.

Also note, your padding needs to have a unit like px or em in it, you can’t just use the numbers.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually, never mind. This won’t work at all. I just tried it, and no matter what I add in the way of importance, the opacity cascades down and can’t be overridden. As long as the text is a child of the semi-opaque TD, it will inherit that opacity.

What you will need to do is use a semi-transparent PNG for the background, rather that using CSS opacity to do this for you. Either that, or get the text out of the cell and position it over the cell using a separate CSS layer. And that’s probably going to break in some browser somewhere. Best thing I can think of is to use a PNG background, and of course tell the IE users to upgrade their browsers.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, here’s an interesting discourse on the subject - see the entry by ‘Guy’ on page 1 of the thread.

http://forums.techguy.org/t175123.html

regards
Hugh


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I wish that worked, it could be cool. It doesn’t work in Safari 4 or Firefox 2.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The only option other than using a transparent PNG is to set the
background colour using rgba(r,g,b,a) where r,g,b are 0-255 and a is
0-1. For a slightly transparent black for instance you could use:

background-color:rgba(0,0,0,0.7);

Note that this will only work on modern browsers (list here, along
with a workaround for IE: http://css-tricks.com/rgba-browser-support/)

Using opacity will, as Walter says, affect the element and all its
children.

Hope this helps,

Joe

On 5 Jul 2009, at 06:49, waltd wrote:

I wish that worked, it could be cool. It doesn’t work in Safari 4 or
Firefox 2.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, the RGBa thing looks interesting…until you see how few browsers really support it. And of course the big player is nowhere near on it!! Nice idea, though.

Anyway, enough faffing around looking for elegancy! I kind of got a result by putting the text in a separate layer and fiddling around with the position in Freeway. There’s now no text in the table cell, just a background colour with CSS opacity. And slapped on top is a layer with the text. It works, in a fashion, although push and pull the browser size and the layer takes a while to catch up with its new position!

http://www.mulucaves.org/mulu3/background.php
http://www.mulucaves.org/mulu3/expeditions.php

Hugh


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options