...

View Full Version : is this an ok method....



jussa
01-23-2007, 10:01 AM
i found this article that will allow me do a transparent background...what im looking for is the lightbox type effect...with the transparent background..then the content in the center...

here is the link...

http://www.daltonlp.com/view/217

what i want to know if this is as 'standards compliant' that i am going to get, while maintaining maximum cross-browser allowances...

if anyone knows a better method, could you please share.

Thanks, Justin

butlins
01-23-2007, 10:47 AM
I'm assuming that you're talking about the method on the page that don't use any scripting. It's not something I can claim any real experience of, as I haven't spent any time researching it, but at the risk of becoming the 'conditional comments' guy, I'd put the nasty MS image filter in a separate CSS file and use conditional comments to keep it away from browsers that play nice. That way if IE ever does the ability to recognise styles with [attributes] you can limit the image filter to being served only to older IE browsers.

ahallicks
01-23-2007, 10:51 AM
I don't see why it wouldn't work. The CSS element 'filter' is not standards compliant and will validate as an error in your stylesheet, but if you used a conditional statement and created a separate stylesheet for IE then this method could well work... won't know until I've tested it tho.

ahallicks
01-23-2007, 11:03 AM
OKay, tested and yes it works and yes it validates! Thank you so much for finding this you are a God :p

If you need any help implementing let me know

jussa
01-23-2007, 11:13 PM
OKay, tested and yes it works and yes it validates! Thank you so much for finding this you are a God :p

If you need any help implementing let me know

i couldnt get the above method to work...so i had to settle for this one...


#ui_policy_box {
width:100%;
height:100%;
position:absolute;
background-color:#111111;
float:left;
z-index:50;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
display:none;
}

i get errors on the opacity, -moz-opacity & filter option, saying that there not valid properties...when i validate...but, as far as im concerned, they work fine, so i dont get while they wont validate...so i dont really care to much...

thanks for the replies, Justin

Arbitrator
01-24-2007, 12:08 AM
i couldnt get the above method to work...so i had to settle for this one...Conditional comments are described here: http://www.quirksmode.org/css/condcom.html.


i get errors on the opacity, -moz-opacity & filter option, saying that there not valid properties...when i validate...but, as far as im concerned, they work fine, so i dont get while they wont validate...so i dont really care to much...-moz-opacity and filter are not properties defined in the CSS specifications, thus they don’t validate as valid CSS. However, unlike HTML, CSS has built‐in error handling capabilities, so using proprietary (and invalid) CSS declarations should be fine since declarations that the browser doesn’t understand will just be ignored as per CSS rules.

The opacity property is part of the CSS3 Colors Module specification and will validate as long as you change the settings so that it validates against CSS3 instead of CSS2. CSS2 is the default setting.

-moz-opacity is replaced by the CSS3 opacity property in modern Mozilla (Firefox), so there’s no need to use that unless you plan to take the time to make your site compatible with older versions of Mozilla‐based browsers.

The filter property should only be necessary for Internet Explorer 6. Internet Explorer 7 added support for PNG alpha transparency.


… I'd put the nasty MS image filter in a separate CSS file and use conditional comments to keep it away from browsers that play nice.Proper browsers will ignore the entirety of the unrecognized declarations, so conditional comments (CCs) are not necessary in this case. But, if you want to keep the “hacks” separate from the proper code, then there’s nothing wrong with that. It does mean less code sent to proper browsers anyway.


That way if IE ever does the ability to recognise styles with [attributes] you can limit the image filter to being served only to older IE browsers.If you mean attribute selectors like input[type="submit"], Internet Explorer 7 already added support for that.

jussa
01-24-2007, 02:49 AM
Conditional comments are described here: http://www.quirksmode.org/css/condcom.html.

-moz-opacity and filter are not properties defined in the CSS specifications, thus they don’t validate as valid CSS. However, unlike HTML, CSS has built‐in error handling capabilities, so using proprietary (and invalid) CSS declarations should be fine since declarations that the browser doesn’t understand will just be ignored as per CSS rules.

The opacity property is part of the CSS3 Colors Module specification and will validate as long as you change the settings so that it validates against CSS3 instead of CSS2. CSS2 is the default setting.

-moz-opacity is replaced by the CSS3 opacity property in modern Mozilla (Firefox), so there’s no need to use that unless you plan to take the time to make your site compatible with older versions of Mozilla‐based browsers.

The filter property should only be necessary for Internet Explorer 6. Internet Explorer 7 added support for PNG alpha transparency.

Proper browsers will ignore the entirety of the unrecognized declarations, so conditional comments (CCs) are not necessary in this case. But, if you want to keep the “hacks” separate from the proper code, then there’s nothing wrong with that. It does mean less code sent to proper browsers anyway.

If you mean attribute selectors like input[type="submit"], Internet Explorer 7 already added support for that.

i wasnt aware that css3 was released... Can IE6/7 & firefox 1.5/2 view css3??

also, as i said, i dropped the first mentioned method, so i went without the transparent png, and are just using the three mentioned in my last post, on a background color. is working exactly how i want...

thanks for clarifying why there return errors when validating.

Cheers, Justin

Arbitrator
01-24-2007, 10:19 PM
i wasnt aware that css3 was released... Can IE6/7 & firefox 1.5/2 view css3??Unlike previous versions of CSS, CSS3 is divided into modules so that implementors can pick which modules they want instead of implementing a single, massive specification. There are at least twenty five modules; some modules are in W3C Working Draft status while others are in the W3C Candidate Recommendation (CR) status. Suffice it to say, in CR status, implementors (browsers) can begin implementing the specs. The CSS3 Color Module (http://www.w3.org/TR/css3-color/), which contains the opacity property, is in CR status.

Firefox 1.5+ and Opera 9 understand the opacity property. So far as I know, Internet Explorer doesn’t support any CSS3 yet though besides non‐standard technologies that were later adopted into the standard, such as the overflow-x and overflow-y properties and the X11 colors; since Internet Explorer still has yet to implement all of CSS1, that doesn’t surprise me though.

gsnedders
01-24-2007, 10:26 PM
Unlike previous versions of CSS, CSS3 is divided into modules so that implementors can pick which modules they want instead of implementing a single, massive specification. There are at least twenty five modules; some modules are in W3C Working Draft status while others are in the W3C Candidate Recommendation (CR) status. Suffice it to say, in CR status, implementors (browsers) can begin implementing the specs. The CSS3 Color Module (http://www.w3.org/TR/css3-color/), which contains the opacity property, is in CR status.It's worth noting that a spec cannot become a REC before it is implemented: there MUST be implementations to move beyond CR.


Firefox 1.5+ and Opera 9 understand the opacity property. So far as I know, Internet Explorer doesn’t support any CSS3 yet though besides non?standard technologies that were later adopted into the standard, such as the overflow-x and overflow-y properties and the X11 colors; since Internet Explorer still has yet to implement all of CSS1, that doesn’t surprise me though.
IE7 supports a lot of the CSS3 selector module, among other parts. Also, no browser implements all of CSS1 (IE5/Mac was the first to have a near-complete implementation, FYI, with IE3/Win the first to support any CSS). It's impossible to be compatible with (the obsolete) CSS1 and CSS2 at once.

Arbitrator
01-24-2007, 11:47 PM
IE7 supports a lot of the CSS3 selector module, among other parts.I didn’t realize that Internet Explorer supported four CSS3 selectors, but according to this table (http://www.webdevout.net/browser_support_css.php?#css3selectors), I wouldn’t consider its CSS3 selector support “a lot”. It’s interesting that they actually went out and implemented something new from CSS3 though.


Also, no browser implements all of CSS1I’m curious which part of CSS1 that Firefox and Opera haven’t implemented. There are bugs of course, but nothing killer. I only see three bugs in CSS1 code listed (http://www.webdevout.net/browser_support_css.php#support-css2propsbasic-float) for Firefox anyway. On the other hand, Internet Explorer has outright not implemented part of CSS1: declarations involving the inherit keyword.


(IE5/Mac was the first to have a near-complete implementation, FYI, with IE3/Win the first to support any CSS).I wasn’t aware of the first, though that doesn’t surprise me considering that there was a time when Internet Explorer was considered the best. However, I don’t think that past innovation justifies present poor support for the CSS standards, especially for CSS1, which is more than eight years old.


It's impossible to be compatible with (the obsolete) CSS1 and CSS2 at once.This is a technicality. Just because parts of it have been superseded, doesn’t mean that browsers that support the superseding specifications aren’t compliant.

gsnedders
01-25-2007, 03:18 PM
This is a technicality. Just because parts of it have been superseded, doesn’t mean that browsers that support the superseding specifications aren’t compliant.

For the sake of an example, if you comply with !important under the CSS2 definition you are doing the absolute reverse of the CSS1 definition, thereby not being compliant with it (Appendix B (IIRC) of CSS2 lists all the changes from CSS1).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum