Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    is this an ok method....

    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

  • #2
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    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.
    If anyone asks my boss, this counts as work, okay?

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    OKay, tested and yes it works and yes it validates! Thank you so much for finding this you are a God

    If you need any help implementing let me know
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    OKay, tested and yes it works and yes it validates! Thank you so much for finding this you are a God

    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...

    Code:
    #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

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by jussa View Post
    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.

    Quote Originally Posted by jussa View Post
    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.

    Quote Originally Posted by butlins View Post
    … 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.

    Quote Originally Posted by butlins View Post
    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.
    Last edited by Arbitrator; 01-24-2007 at 12:10 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Mar 2006
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by jussa View Post
    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, 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Arbitrator View Post
    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, 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.

    Quote Originally Posted by Arbitrator View Post
    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.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by Error 404 View Post
    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, 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.

    Quote Originally Posted by Error 404 View Post
    Also, no browser implements all of CSS1
    I’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 for Firefox anyway. On the other hand, Internet Explorer has outright not implemented part of CSS1: declarations involving the inherit keyword.

    Quote Originally Posted by Error 404 View Post
    (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.

    Quote Originally Posted by Error 404 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Arbitrator View Post
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •