Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Browser check or problems  >  Thread
Search  
  
  Advanced Search
   
 
Table background PNG not transparent in IE6!
 
Wildflower
Posted: 29 January 2008 03:12 AM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2008-01-29

I’ve read all the posts on this topic, but none of the solutions seem to work for me. I’ve been troubleshooting this for hours now.

My table background image has a transparent background; however, it refuses to display without the light blue background in IE6. I’m at my wits end and going into the kitchen to make a martini.

My code can be found on this page:

Wildflower :mad:

Profile
 
 
ifohdesigns
Posted: 29 January 2008 02:01 PM   [ Ignore ]   [ # 1 ]
Jr. Member
RankRank
Total Posts:  36
Joined  2008-01-11

IE 6 does not fully support transparency, or the alpha channel that png’s allow. There are many hacks and tricks to achieve this, but the best I have come across yet is to quarantine your IE fixes within a conditional statement, like such:

<!-- ************** png fix for browsers older than ie 7 **************  -->
<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="css/ie-png.css" />
<![endif]-->
<!-- ******************************************************************* --> 

Then for the css file (in this case “ie-png.css”)

/* IE7 does not support the star-html hack anymore, so this is ignored by IE7: */
* html #yourElement{
    background: transparent none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/logo.png',sizingMethod='scale');
    } 
Profile
 
 
Wildflower
Posted: 30 January 2008 12:07 AM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2008-01-29

Thanx, it worked!

I’m having one other problem and that’s with the positioning of my navigation. It’s positioned absolutely 795px from the left, which looks fine on everything I’ve tested so far except IE6 on my computer at work - it’s too far to the right. The thing is, it renders properly in IE6 in my Windows OS on my Mac at home. How could it render differently in the same browser, same versions?

Laura

Website

Profile
 
 
ifohdesigns
Posted: 30 January 2008 02:08 AM   [ Ignore ]   [ # 3 ]
Jr. Member
RankRank
Total Posts:  36
Joined  2008-01-11

Glad it worked, and that I could be of some assistance.

As far as the positioning part, since it is absolutely positioned it is going to be different looking from screen to screen (resolution).

Try this out:

.navigation {
position: relative;
left: 500px;
} 

This is positioning the nav relative to the object it is contained by, so you should achieve the desired results.

Feel free to change the value (500) to whatever works best or looks right.

Profile
 
 
   
 
 
‹‹ IE problems - content box not expanding      Problem With Menu in IE6 Only URGENT HELP NEEDED ››