Opacity Attribute

Is there a CSS hack for getting the opacity attribute to work with
inline divs or am I missing the obvious?

Todd


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

Hey Todd – what’s eating you specifically?

Here’s a link from W3Schools that discusses transparency methods:

Of course it helps to know what your specific beef is :slight_smile:

On 10/27/07, Todd wrote:

Is there a CSS hack for getting the opacity attribute to work with
inline divs or am I missing the obvious?


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/


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

Note: the transparency @ W3Schools does not display in Safari 3.03

On 28 Oct 2007, at 2:58 am, Ernie Simpson wrote:

Hey Todd – what’s eating you specifically?

Here’s a link from W3Schools that discusses transparency methods:
http://www.w3schools.com/css/css_image_transparency.asp

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

Hi Ernie,

Sorry for the brief post, I was in a rush to get outta here. I’ll
take a look at the link you sent as the answer may be there but
here’s where it’s at.

The idea is to make inline form elements semi-transparent so a CSS-
applied background image to the container div will show through them.
I can make images and html elements transparent all the live-long
day, the problem is specifically when placed inline; the trans. goes
missing. For example, if I place the form stuff in a table then set
the opacity to the table then place that table inline the opacity
breaks. Note that when placing the form elements above (not inline)
the container div all is fine, which is what I settled on but I would
like to keep it inline if possible.

Thanks,

Todd

On Oct 27, 2007, at 9:58 PM, Ernie Simpson wrote:

Hey Todd – what’s eating you specifically?

Here’s a link from W3Schools that discusses transparency methods:
CSS Image Opacity / Transparency

Of course it helps to know what your specific beef is :slight_smile:

On 10/27/07, Todd wrote:

Is there a CSS hack for getting the opacity attribute to work with
inline divs or am I missing the obvious?


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/
freeway/


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

Hi Ernie,

Sorry for the brief post, I was in a rush to get outta here. I’ll take a look at the link you sent as the answer may be there but here’s where it’s at.

The idea is to make inline form elements semi-transparent so a CSS- applied background image to the container div will show through them. I can make images and html elements transparent all the live-long day, the problem is specifically when placed inline; the trans. goes missing. For example, if I place the form stuff in a table then set the opacity to the table then place that table inline the opacity breaks. Note that when placing the form elements above (not inline) the container div all is fine, which is what I settled on but I would like to keep it inline if possible.

Thanks,

Todd

On Oct 27, 2007, at 9:58 PM, Ernie Simpson wrote:

Hey Todd – what’s eating you specifically?

Here’s a link from W3Schools that discusses transparency methods:
http://www.w3schools.com/css/css_image_transparency.asp

Of course it helps to know what your specific beef is :slight_smile:

Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/

Not even Example 3? Safari 2 recognizes at least that method because
it includes the CSS3 opacity attribute. Safari rightly ignores the
first two methods as they are geared specifically toward mozilla and
IE browsers. The point again being that opacity as a CSS3 attribute is
still not fully implemented.

Am I the only one left not using Safari 3? Is it still beta or is it
part of the current OS release?

On 10/28/07, David Owen wrote:

Note: the transparency @ W3Schools does not display in Safari 3.03

On 28 Oct 2007, at 2:58 am, Ernie Simpson wrote:
Here’s a link from W3Schools that discusses transparency methods:
CSS Image Opacity / Transparency


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/


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

Sometime around 28/10/07 (at 09:13 -0700) Ernie Simpson said:

Am I the only one left not using Safari 3?

I’m still using Safari 2! I’ll start using whatever finished version
of Safari comes with Leopard (I hope later this coming week), but I
don’t fancy going beta with it right now.

k


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

Good point, what is the Safari version with the current OS release? anybody been shopping yet?

I’m just checking it out on my machine at home. All the machines at work don’t have it.

On 28 Oct 2007, at 4:13 pm, Ernie Simpson wrote:

Am I the only one left not using Safari 3? Is it still beta or is it

part of the current OS release?

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

Yes, Example 3 does display correctly in Safari 3.0.3.

Todd

On Oct 28, 2007, at 11:13 AM, Ernie Simpson wrote:

Not even Example 3? Safari 2 recognizes at least that method because

it includes the CSS3 opacity attribute.

Good point, what is the Safari version with the current OS release?

Latest version of Safari is 3.0.4, installs with Leopard


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

Mmm… I wonder if Apple will let others have that, even though they have not upgraded yet? Probably not.

I dare not leap in and upgrade just yet, need to see what, if any, problems arise!!

On 28 Oct 2007, at 7:30 pm, Marcel wrote:

Latest version of Safari is 3.0.4, installs with Leopard

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

On 28 Oct 2007, at 19:37, David Owen wrote:

Mmm… I wonder if Apple will let others have that, even though they
have not upgraded yet? Probably not.

Well, since they’re now supporting Safari on Windows XP I would expect
a major publicy outcry if they didn’t support it on Tiger as well…

– Finlay


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

Looks like it will be available in the future
http://discussions.apple.com/thread.jspa?threadID=1197266&tstart=0


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

Todd – I just had a thought… remember that Freeway Pro treats
floating tables differently than inline tables – enveloping floating
tables in a separate div element – one that is nearly impossible to
distinguish in the FW work environment. How are you applying the
attribute to the tables?


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/


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

I have 10.5 installed on my G4 Macbook as a test install. It installs Safari 3.0.4. The first two examples at W3 definately do not work with 3.0.4.

On 28 Oct. 2007, 12:13 pm, The Big Erns wrote:

Am I the only one left not using Safari 3? Is it still beta or is it part of the current OS release?


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

As I have it currently - floating above the inline layout - I added
the opacity by selecting the table and using the DIV Style tab of the
Item > Extended menu which works fine. However, when I tried placing
it inline with the rest of the layout I first tried both the above
approach (didn’t work) then tried creating a #table style instead
that targeted the table:

Name: opacity
Value: .7

which didn’t work either. I also tried targeting the individual form
elements with the attribute which didn’t work either. I’m double-
checking my work since I may have very well made a mistake but so far
at least the opacity doesn’t work with the inline form elements.

Todd

On Oct 28, 2007, at 4:05 PM, Ernie Simpson wrote:

Todd – I just had a thought… remember that Freeway Pro treats
floating tables differently than inline tables – enveloping floating
tables in a separate div element – one that is nearly impossible to
distinguish in the FW work environment. How are you applying the
attribute to the tables?


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

I think that somehow the difference in how Freeway targets the table
is where your problem lies. When you extend the inline div, you should
select the table – not the div/style. In an inline object, the
enveloping div IS the div it is inline. Floating tables get an
enveloping div from Freeway automatically.

Here’s a link to a quick example that has the opacity set by a class
style applied to the table tags. There is an example of :hover with
opacity and an example that sets opacity for IE and Mozilla. Verified
with Mac Safari 2, Mac Firefox 2, and Win IE 6 & 7.
http://www.thebigerns.com/freeway/workbench/todd-trans/

Update: It seems that the W3C’s CSS Validator has some problems with
the property values, so maybe it’s not perfect yet. File available for
download.

On 10/28/07, Todd wrote:

As I have it currently - floating above the inline layout - I added
the opacity by selecting the table and using the DIV Style tab of the
Item > Extended menu which works fine. However, when I tried placing
it inline with the rest of the layout I first tried both the above
approach (didn’t work) then tried creating a #table style instead
that targeted the table:

Name: opacity
Value: .7

which didn’t work either. I also tried targeting the individual form
elements with the attribute which didn’t work either. I’m double-
checking my work since I may have very well made a mistake but so far
at least the opacity doesn’t work with the inline form elements.


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/


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

[Slaps forehead repeatedly]

So simple. Yep, the Extended table/div thing was the problem. So
close. Thanks for taking the time. Great example file too.

[A grateful] Todd

On Oct 28, 2007, at 6:20 PM, Ernie Simpson wrote:

I think that somehow the difference in how Freeway targets the table
is where your problem lies. When you extend the inline div, you should
select the table – not the div/style. In an inline object, the
enveloping div IS the div it is inline. Floating tables get an
enveloping div from Freeway automatically.


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

Glad I could help, Todd. This was an interesting dilemma to take a poke at.

I still am not sure if there is a way to achieve CSS validation with
the attribute – I’m not sure even what to make of the rejection
message the validator gave me… whether it objects to the attribute
or if the property value is listed improperly.

Here’s an interesting discussion of the rgba color description, which
combines rgb color values with an alpha value:
http://www.css3.info/a-brief-introduction-to-opacity-and-rgba/

On 10/28/07, Todd wrote:

So simple. Yep, the Extended table/div thing was the problem. So
close. Thanks for taking the time. Great example file too.


Ernie Simpson – Freeway 4 Pro User – http://www.thebigerns.com/freeway/


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

My thought was not to worry about it. The CSS validator throws up some odd warnings so this may just be another case. I get a mess of warnings (CSS 3) about the same color and background color for dozens of styles yet all of the ones I checked so far are good. The text-shadow attribute throws up the same “does not exist” in version 2.1 but not in 3. Go figure. It’s like chasing your tail at times.

The rgba article is interesting. I found it recently as I had been wondering about just this sort of thing.

Todd

On Oct 28, 2007, at 10:09 PM, Ernie Simpson wrote:

I still am not sure if there is a way to achieve CSS validation with

the attribute – I’m not sure even what to make of the rejection

message the validator gave me… whether it objects to the attribute

or if the property value is listed improperly.