SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transaprent div - how would you code this?

    Hi Guys,

    Can you advise on the best way to code this transparent div (not the brown pattern background)?

    tester.jpg

    I'd like to have the images in the top left and bottom right of the div, and get it working in the most browsers where possible.

    Thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd use rgba for modern browsers (ie9+) and an opacity fix for ie8 and under.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body { background:red }
    .wrap {
    	background-color:#fff;/* fallback */
    	background-color: rgba(255, 255, 255, 0.50);
    	width:300px;
    	padding:20px;
    	margin:auto;
    }
    </style>
    
    <!-- fix for ie8 and under -->
    <!--[if lte IE 8]>
    <style type="text/css">
    .wrap{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    }
    .inner{position:relative}/* stops opacity from reaching text in IE*/
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="wrap">
    		<div class="inner">
    				<p>Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.</p>
    		</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your reply.

    I've tried your code, but cant get trans in IE.

    Can you help?

    http://www.vhairandbeauty.co.uk/beauty/

    Many thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems to be working in IE7 - 9 for me. What are you seeing? Or am I looking at the wrong thing

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for the reply:

    I get this in IE 7:

    screen.jpg

    The background of the div doesn't appear, I would like to see a grey/ white transparent colour, like in FF

    Thanks again

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    It's working in IE8 ok but I can see that IE7 has failed and so did my original.

    I've moved the fallback rule into the IE only styles and added a haslayout trigger for the inner and my code is working in IE7 and 8 now ok (even works in IE6).

    You can see it here.

    Copy my new code and try again.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body { background:red }
    .wrap {
    	background-color: rgba(255, 255, 255, 0.50);
    	width:300px;
    	padding:20px;
    	margin:auto;
    }
    </style>
    
    <!-- fix for ie8 and under -->
    <!--[if lte IE 8]>
    <style type="text/css">
    .wrap{
    	filter:Alpha(Opacity=50);
    	background-color:#fff;/* fallback */
    }
    .inner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="wrap">
    		<div class="inner">
    				<p>Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.</p>
    		</div>
    </div>
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again for your reply:

    I get a solid white background with IE7.

    http://www.vhairandbeauty.co.uk/beauty/

    I can live with that though!

    Thanks you so much for your help really appreciate it.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Did you add the second part of the IE style? I don't see it.

    Code:
    .inner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Actually you copied the rules incorrectly.

    They should be this:

    Code:
    <!-- fix for ie8 trans and under -->
    <!--[if lte IE 8]>
    <style type="text/css">
    #colLeft{
    	filter:Alpha(Opacity=50);
    	background-color:#fff;/* fallback */
    }
    .contentinner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
    </style>
    <![endif]-->

  10. #10
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul really apreciate it.

    I've copied that exactly, I've changed the class name but its exactly the same.

    Can't get a background in IE 7 still, the fallback doesnt seem to work.

    Thanks again

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,378
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The conditional comments are still broken in your live site

    You have this:

    Code:
    <!-- fix for trans ie8 and under -->
    <!--[if lte IE 8]>
    <style type="text/css">
    .contentinner{	
    #colLeft{
    	filter:Alpha(Opacity=50);
    	background-color:#fff;/* fallback */
    }
    .contentinner{position:relative;zoom:1.0;}/* stops opacity from reaching text in IE*/
    </style>
    <![endif]-->
    It should be this:

    Code:
    <!-- fix for ie8 trans and under -->
    <!--[if lte IE 8]>
    <style type="text/css">
    #colLeft{
    	filter:Alpha(Opacity=50);
    	background-color:#fff;/* fallback */
    }
    .contentinner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
    </style>
    <![endif]-->
    It should be possible to make it work in ie7 and under as my demo is working ok.


Bookmarks

Posting Permissions

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