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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Opacity in different browsers

    How can I have Opacity work with different kinds of browsers?

    So far I have :

    Code:
    #lightboxOverlay {
      z-index: 9999;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.80;
      display: none;
    But opacity only works in Chrome, not IE.

    Please help.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Perhaps if you changed Opacity to lowercase? Syntactically this looks alright to me.

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Perhaps if you changed Opacity to lowercase? Syntactically this looks alright to me.
    Thank you, I just made the change. But the problem still remains.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Well, do you want us to guess every step now? Please post your entire code, nobody here is psychic.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    @lixiao:
    I assume the display:none is not the culprit, but your code is missing the closing curly bracket. If that doesn't cure, try adding zoom: 1. This has to do with IE's HasLayout bug.
    Last edited by Frankie; 05-07-2013 at 02:41 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you. I've tried adding zoom: 1 and it still doesn't work.

    The following is the entire code for my lightbox.css
    I'm basically using the script from Lightbox version 2.51 (http://lokeshdhakar.com/projects/lightbox2/)


    Code:
    /* line 6, ../sass/lightbox.sass */
    #lightboxOverlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: RGB(161,151,114);
      opacity:0.8;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      display: none;
      }
    
    
    /* line 15, ../sass/lightbox.sass */
    #lightbox {
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 10000;
      text-align: center;
      line-height: 0;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: normal;
    }
    /* line 24, ../sass/lightbox.sass */
    #lightbox img {
      width: auto;
      height: auto;
    }
    /* line 27, ../sass/lightbox.sass */
    #lightbox a img {
      border: none;
    }
    
    /* line 30, ../sass/lightbox.sass */
    .lb-outerContainer {
      position: relative;
      background-color: white;
      *zoom: 1;
      width: 250px;
      height: 250px;
      margin: 0 auto;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
    }
    /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
    .lb-outerContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* line 39, ../sass/lightbox.sass */
    .lb-container {
      padding: 3px;
    }
    
    /* line 42, ../sass/lightbox.sass */
    .lb-loader {
      position: absolute;
      top: 40%;
      left: 0%;
      height: 25%;
      width: 100%;
      text-align: center;
      line-height: 0;
    }
    
    /* line 51, ../sass/lightbox.sass */
    .lb-nav {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
    }
    
    /* line 59, ../sass/lightbox.sass */
    .lb-container > .nav {
      left: 0;
    }
    
    /* line 62, ../sass/lightbox.sass */
    .lb-nav a {
      outline: none;
    }
    
    /* line 65, ../sass/lightbox.sass */
    .lb-prev, .lb-next {
      width: 49%;
      height: 100%;
      background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
      /* Trick IE into showing hover */
      display: block;
    }
    
    /* line 72, ../sass/lightbox.sass */
    .lb-prev {
      left: 0;
      float: left;
    }
    
    /* line 76, ../sass/lightbox.sass */
    .lb-next {
      right: 0;
      float: right;
    }
    
    /* line 81, ../sass/lightbox.sass */
    .lb-prev:hover {
      background: url(../images/prev.png) left 48% no-repeat;
    }
    
    /* line 85, ../sass/lightbox.sass */
    .lb-next:hover {
      background: url(../images/next.png) right 48% no-repeat;
    }
    
    /* line 88, ../sass/lightbox.sass */
    .lb-dataContainer {
      margin: 0 auto;
      padding-top: 5px;
      *zoom: 1;
      width: 100%;
      -moz-border-radius-bottomleft: 4px;
      -webkit-border-bottom-left-radius: 4px;
      -ms-border-bottom-left-radius: 4px;
      -o-border-bottom-left-radius: 4px;
      border-bottom-left-radius: 4px;
      -moz-border-radius-bottomright: 4px;
      -webkit-border-bottom-right-radius: 4px;
      -ms-border-bottom-right-radius: 4px;
      -o-border-bottom-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
    .lb-dataContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* line 95, ../sass/lightbox.sass */
    .lb-data {
      padding: 0 10px;
      color: #bbbbbb;
    }
    /* line 98, ../sass/lightbox.sass */
    .lb-data .lb-details {
      width: 85%;
      float: left;
      text-align: left;
      line-height: 1.1em;
    }
    /* line 103, ../sass/lightbox.sass */
    .lb-data .lb-caption {
      font-size: 13px;
      font-weight: bold;
      line-height: 1em;
    }
    /* line 107, ../sass/lightbox.sass */
    .lb-data .lb-number {
      display: block;
      clear: left;
      padding-bottom: 1em;
      font-size: 11px;
    }
    /* line 112, ../sass/lightbox.sass */
    .lb-data .lb-close {
      width: 35px;lotos
      float: right;
      padding-bottom: 0.7em;
      outline: none;
    }
    /* line 117, ../sass/lightbox.sass */
    .lb-data .lb-close:hover {
      cursor: pointer;
    }


  •  

    Posting Permissions

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