Home/ Questions/Q 8098723
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T22:09:52+00:00

I am working on a website which needs to work across multiple browsers unfortunately

  • 0

I am working on a website which needs to work across multiple browsers unfortunately also including IE6.

I am using the sliding doors technique for buttons which works beautifully in Chrome, Safari and FF but the images are completely invisible in IE6. What’s even stranger is that it’s not all the images, just the button backgrounds. The icons I put into the actual buttons render fine. Any idea why?

HTML:
    <a id="re" href="#" class="button"><span><span class="resolved">Mark as Resolved</span></span></a>


CSS:
  a.button
  {
   background:transparent url(images/normal_end.png) no-repeat scroll top right;
   display:block;
   float:left;
   height: 32px;
   padding:3px;
   padding-right: 5px;
   margin:4px;
   text-decoration:none;
   color:#555;
   font-weight:normal;
   width:100px;
   font-size: 15px;
  }
  a.button span 
  {
   background: url(images/normal.png) no-repeat;
   display:block !important;
   line-height:22px;
   padding:0 5px 0 5px;
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE6 has a problem with png images, but you can put images as background of divs.

    <body>  
<div class="imageyouneed"></div>  
</body>

<style>  
body {background-color:#000}  
div.imageyouneed {background:url(flower-transparent.png) no-repeat; height:100px;width:100px}  
</style>

<!--[if gte IE 5]>  
<style type="text/css">  
  div {  
  background:none;  
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flower.png',sizingMethod='crop');  
  }  
</style>  
<![endif]-->

    Please note that height and width are that of image.

    • 0