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 7 of 7
  1. #1
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Opacity & Transparency

    so the site I'm working on is at http://shiznit.no-ip.info/rjnall

    if you'll notice on the left side I'm trying to create a transparent bg for the menu so that the gradient shows through from the main bg

    when I run the page through the css validator it fails on those 3 lines where the opacity is in left-col-nav and the left-col-nav ul li:hover

    is there a better way to do what I'm trying to do? did I just implement it incorrectly?

    any help is greatly appreciated!

    Code:
    body{
    font-family: verdana,arial,helvetica,sans-serif;
    text-align:center;
    color:#000000;
    font-size: 12px;
    background-color:#efefef;
    text-align:center;
    }
    
    #main-wrap{
    background-image:url(../img/mainbg.jpg);
    background-repeat:repeat-y;
    width:760px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    font-family: verdana,arial,helvetica,sans-serif;
    text-align:center;
    color:#000000;
    font-size: 12px;
    
    }
    
    h1 {
    font-size:16px;
    }
    
    h2 {
    font-size:14px;
    }
    
    * html #main-wrap{
    height:600px;
    }
    
    #header{
    width:760px;
    height:119px;
    background-image:url(../img/rjnallbanner2.jpg);
    background-repeat:no-repeat;
    background-color:#114076;
    }
    
    #col-wrap {
    width:760px;
    text-align:center;
    background-image:url(../img/colbg2.jpg);
    background-repeat:repeat-x;
    min-height:600px;
    }
    
    #left-col-nav{
    width:200px;
    float:left;
    margin:0;
    padding:0;
    text-align:center;
    }
    
    #left-col-nav ul {
    padding:10px;
    width:150px;
    margin:10px auto 0 auto;
    background-color:#ffffff;
    text-align:left;
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
    min-height:600px;
    }
    
    #left-col-nav li {
    list-style-type:none;
    text-indent:10px;
    line-height:18px;
    margin-top:10px;
    }
    
    #left-col-nav ul li a:link {
    text-decoration:none;
    color:#114076;
    font-weight:bold;
    }
    
    #left-col-nav ul li a:visited {
    text-decoration:none;
    color:#114076;
    font-weight:bold;
    }
    
    #left-col-nav ul li a:hover {
    text-decoration:none;
    background-color:#114076;
    color:#ffffff;
    font-weight:bold;
    display:block;
    width:150px;
    
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
    
    }
    
    #left-col-nav ul li a:active {
    text-decoration:none;
    background-color:#114076;
    color:#ffffff;
    font-weight:bold;
    }
    
    #left-col-nav ul li a:focus {
    text-decoration:none;
    background-color:#114076;
    color:#ffffff;
    font-weight:bold;
    }
    
    #content-container {
    width:410px;
    margin:10px auto 0 auto;
    text-align:left;
    float:left;
    text-align:justify;
    background-color:#ffffff;
    min-height:600px;
    }
    
    #content {
    margin:10px;
    }
    
    #right-col-nav{
    width:150px;
    float:right;
    margin:0;
    padding:0;
    text-align:center;
    min-height:600px;
    }
    
    #footer{
    width:750px;
    background-color:#114076;
    padding:5px;
    color:#ffffff;
    text-align:center;
    }
    
    .clearfix{
    clear:both;
    }
    
    .imageleft {
    float:left;
    margin:10px;
    }
    
    .imageright {
    float:right;
    margin:0 10px 10px 10px;
    }
    
    
    #right-col-nav .navtitle {
    background-color:#ffffe8;
    text-align:center;
    margin:10px auto 0 auto;
    
    padding:0;
    width:130px;
    }
    
    #footer li {
    display:inline;
    padding:10px;
    }
    
    #footer li a:link{
    color:#ffffff;
    font-weight:bold;
    }
    
    #footer li a:visited{
    color:#ffffff;
    font-weight:bold;
    }
    
    #footer li a:hover{
    background-color:#ffffff;
    color:#114076;
    font-weight:bold;
    }
    
    #footer a:link{
    color:#ffffff;
    font-weight:bold;
    }
    
    #footer a:visited{
    color:#ffffff;
    font-weight:bold;
    }
    
    #footer a:hover{
    background-color:#ffffff;
    color:#114076;
    font-weight:bold;
    }
    
    .imgcontainerright {
    padding:10px;
    margin: 0 10px 10px 10px;
    float:right;
    border: 1px solid #114076;
    text-align:center;
    }
    
    #formcontainer {
    clear:left;
    margin:10px;
    background-color:#eeeeee;
    border: 1px solid #114076;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Hi thee, long time no see!

    Yeah, it fails because -moz-opacity and filter are proprietary properties (to Mozilla and Microsoft, respectively), and have never been part of the standards after which the validator is validating, and the opacity property isn’t yet a standard. It’s going to be in CSS 3. However, a few modern browsers already support that. There’s no way to work around that validation issue except with JavaScript but in this case I really think it doesn’t matter whether it validates or not as long as you can prove that the rest of your code is good.

  • #3
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    fantastic! this is why I get so nervous about trying to be more creative - as soon as something doesn't validate I think it's no good lol

    thank you stephan!

  • #4
    New Coder
    Join Date
    May 2007
    Location
    NW USA
    Posts
    63
    Thanks
    0
    Thanked 2 Times in 1 Post
    Hurray! Have been hoping that would become a standard; it adds such a nice touch to a page if used well.

    When can we expect CSS 3 to appear on the scene? And do you know whether it will support the Shadow filter that is currently only an IE property? I really hope so! (It is a soft blurred drop shadow; looks very cool if done sparingly on a tooltip, for example...)

    lorie

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I do believe the shadow feature was CSS1 which is probably why IE still supports it. I think it was dropped in CSS2. As fro CSS3 fully coming out, probably not for a while. Opera and Firefox already implement some CSS3. Not sure about IE7 though.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    IE7 is yet to implement a lot of CSS2.1 Microsoft have promised that IE8 will properly support CSS2.1 and then subsequently stated that they don't guarantee it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I’m still wondering how hard it can be… since all the others have done it already. Or are they stumbling about their own hasLayout crap?


  •  

    Posting Permissions

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