SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Transparency in IE

    I'm working on some new designs for my site, and so on www.bluevolume.com/v3 I used the code from SitePoint's web design site. If you check out my site in Firebird the transparency works, but doesn't in IE because I left out the hack that Sitepoint used (the mask div) because I could not figure out how to tailor it to my site. The biggest problem with the sitepoint code is that my paragraphs change height, but their box doesn't. Does anyone know how to apply the "mask" to the paragraphs in my site for IE, or a better method for transparency in IE?

    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,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I usually just settle for a transparent gif (made up of 2 blocks of color and 2 transparent colors) but then I never was that fussy

    I've seen this used for IE6 but it's proprietary code and won't validate (but you could hide it in ie's conditional comments if you're desparate to validate the css - i know that's cheating!) :
    Code:
    *html #Content #text p {
    border: 1px solid #fff; 
    font: 11px Arial; 
    padding: 5px;
    filter: alpha(opacity=65);
    background-color:#fff;
    height:1%;
    color:#000;
    }
    I'm not really up on opacity etc but give it a whirl it might be of some use.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I've seen this used for IE6 but it's proprietary code and won't validate (but you could hide it in ie's conditional comments if you're desparate to validate the css - i know that's cheating!) :
    Code:
    *html #Content #text p {
    border: 1px solid #fff; 
    font: 11px Arial; 
    padding: 5px;
    filter: alpha(opacity=65);
    background-color:#fff;
    height:1%;
    color:#000;
    }
    Thanks for the help Paul. The code does work and look like it should in IE5.5 and 6, except for the 1px white border which doesn't show up (probably b/c the whole box is set to the certain opacity). What about the code that SitePoint used for IE? Here's the full transparency code from their site:
    Code:
    html>body #intro {  /* This CSS is for the classy browsers */
    	background-image: url(/graphics/50percent.png);
    	border-left: 1px solid #fff;
    	border-right: 1px solid #fff;
    	}
    	
    #mask {  /* This CSS is for IE */
    	background-color: #F3DFBD;  /* ...for IE5 */
    	background-color/* */:/**/transparent;  /* ...for IE5.5 & 6 */
    	background-color: /**/transparent;  /* ...for IE6   (not actually required in this situation */
    	position: absolute;
    	z-index: 4;
    	padding: 20px;
    	border-left: 1px solid #fff;
    	border-right: 1px solid #fff;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/graphics/50percent.png', sizingMethod='scale');
    	}
    
    /* Box model hack */
    #mask  { 
    	height: 300px;  /* incorrect height for IE5.0 and IE5.5*/
    	width: 44%;  /* incorrect width for IE5.0 and IE5.5*/
    	voice-family: "\"}\""; 
    	voice-family: inherit;
    	height: 260px;  /* correct height for IE6 */
    	width: 34%;  /* correct width for IE6 */
    }
    
    html>body #mask {  /* This CSS is to hide the IE6 hack from the classy browsers */
    	display: none;
    	}
    As you can see I used the top part, but I couldn't work the #mask into my site b/c of the height issue...so do you know a way that I could maybe use their code to get the 1px border? If not I guess I could use some kind of extra div around p for the border...
    Off Topic:

    Paul, you've answered many tuff questions for me (which I really really appreciate ), but I'v always wondered, how do you always have time to help everyone here??

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

    Using the code I gave you above just put a mask div around all the necessary p's and add this code:
    Code:
    *html #mask {border: 1px solid #fff; }
    Code:
    <div id="mask">
    <p>bluevolume LLC is a dynamic web design company which specializes in developing creative and innovative websites.  Our goal is to help our clients realize their unique ideas and communicate those ideas to their clients or prospective customers.</p>
    </div>
    (Even with your other code you would still need to wrap the elements in the mask div.)

    This will give you your border. It shouldn't interfere with the other browsers.
    but I've always wondered, how do you always have time to help everyone here
    I know I spend too much time here - I'll have to get back to doing some real work soon .

    Paul

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been trying to implement this transparency code, but am having a few problems which I hope someone will be able to help me with?

    Basically - all the transparency works fine. However, no links within Divs or table cells that use this style class seem to function anymore? Their Hover states don't appear either?

    Has anyone experienced this before or know of a solution?

    Any help would be most appreaciated.

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

    Tempus had the same problem in this thread here:

    http://www.sitepoint.com/forums/showthread.php?t=149579

    It has to do with the size of the png graphic used.

    Have a look at that thread and if it doesn't solve your problem then post your code and I'll take a look.

    Paul

  7. #7
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oooo...paul, you're a mentor now! congrats, you deserved it!

  8. #8
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I replied in the wrong post! Doh!

    Thanks Paul, that solved my problem - much appreciated.


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
  •