SitePoint Sponsor

User Tag List

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

    Transparency Issues...

    In a previous post about transparency for this site, Paul gave me the code to use to change the opacity of a div, rather than using the code that www.sitepoint.com.au uses for their transparency in IE. I just realized that the problem with the code I was given is that not only does it change the opacity of the background, but everything in it (which is why I had to make a seperate 1px white border). So the obvious problem is that if I want to set the opacity for 20 in IE, the text will also be barely visible. I tried again to apply sitepoint's code to my layout, but I can't get it to work. Any ideas on how to use their method on my site or fix the current one?

    The CSS for sitepoint's transparency is here (you have to scroll down a bit).

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

    Just had another look at the sitepoint code and managed to get it working in about ten minutes.

    Heres an example that I just tried out.

    http://www.pmob.co.uk/temp/opacity.htm

    It seems simple enough you just use the one routine for mozilla and the other routine for IE.

    If you can't work it out from my example I'll have a look at your site tomorrow afternoon sometime.

    Let me know if you're still stumped by this.

    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
    Just had another look at the sitepoint code and managed to get it working in about ten minutes.

    It seems simple enough you just use the one routine for mozilla and the other routine for IE.
    Paul
    I tried something similar already be just copying and pasting those certain lines into my code. I think the problem is that on your example and their page, it is a fixed size, while on mine it changes with the text. So i'd appreciate if you could figure out a way for it to work on mine.

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

    Just changed my example to fluid size (except for the background image of course) and it worked with no problem.

    http://www.pmob.co.uk/temp/opacity2.htm

    I'll have a look at your page now and see if I can fit it in for you.

    (The key was to give the element a height of 1% just for ie). As IE will expand anyway it makes no difference to the layout but seems to make the background work.

    Paul

  5. #5
    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
    (The key was to give the element a height of 1% just for ie)
    I just uploaded it and it works perfectly now!..and I can finally get rid of that special border div. Thanks for the help.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I think this is what you need (with any luck):

    Just swap the existing style for this:
    Code:
    * html #Content #text div.trans {	  /* 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 */
     height:1%;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bluevolume.com/v3/i/50percent.png', sizingMethod='scale');
     color:#000;
     padding: 5px;
     border: 1px solid #fff;
    }
    (You can then get rid of the .border style.)

    Paul

  7. #7
    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 think this is what you need (with any luck):

    Just swap the existing style for this:
    Code:
    * html #Content #text div.trans {	  /* 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 */
     height:1%;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bluevolume.com/v3/i/50percent.png', sizingMethod='scale');
     color:#000;
     padding: 5px;
     border: 1px solid #fff;
    }
    (You can then get rid of the .border style.)

    Paul
    haha...I guess I got to it first :P

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Have you checked if your links work?

    I've just noticed that they aren't working on my local version!!

    Paul

  9. #9
    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
    Have you checked if your links work?

    I've just noticed that they aren't working on my local version!!

    Paul
    I just checked the site online and all the links seem to be working fine (the samples and email)...

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I've just found some more about the subject. It seems that depending on the size of the png the links won't work.

    Your png's must be ok.

    Heres the info anyway:

    http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217

    Paul
    Edit:


    Just checked your site online and the links didn't seem to be working in IE.
    You need to make your png 2px x 10px (or some other size from the chart in the link above).

  11. #11
    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
    Just checked your site online and the links didn't seem to be working in IE.
    You need to make your png 2px x 10px (or some other size from the chart in the link above).
    I didn't think to check in IE to see if the links worked b/c they work in Firebird...anyways, I cropped the img to 2px x 10px and now the bottom 2 links work, but not the top ones...
    Edit:

    the email link also doesn't work.

    Edit:

    changing the size to 1px by 1px seems to make all of the links work, but the bottom border on the email address does not show up...

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

    The only thing I could see that wasn't working weas the email link.

    Add this:
    Code:
    .float a {position:relative}
    It works locally ok.

    Paul

  13. #13
    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
    .float a {position:relative}
    Thanks, that seems to fix the problem. Any idea why that code fixes it though?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sometimes ie seems to bury objects on the page. It's very similar to the peek a boo bug that I mentioned in another thread. Using position relative seems to force it to display correctly. I think it forces a stacking order and it then seems to sort itself out. However iE has so many little bugs like this that I've given up trying to explain them away. I just find what works and move on.

    You do need to check each time you use it as sometimes having too many position:relatives will cause problems as well. Sometimes position:relative will cause problems in Opera when it's not needed.

    It's a pain but you need to check every step of the way in all the browsers you want to support. It works out easier in the end.

    Paul

  15. #15
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul - that solved my problem!

    Many thanks!


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
  •