their transparency in IE In many it is known that IE does not work well transparency of PNG files containing them, this is one of the many flaws of IE, but because everything has a solution and this is something easy to implement and correct, there are PNG's that we can use images within the page or as funds, in both cases have the same options
Use GIF's but lost quality
- Use another browser like Mozilla Firefox and IE throwing away
- Implement a small script to fix this flaw
- For option 1 it would have bear in mind that the GIF file will not give you the quality of PNG's, besides that they only support a transparency channel, so you could not do transparent gradients.
For the second for that but would like the designers could be taken as an option, there are actually many people who use the browser that comes with your operating system and does not want to try some other for the best you can be, so at soon we will choose the third option.
making this script is that if the IE browser is automatically applied to a filter PNG Alpha transparency, as commented above, there is more to do but hit it, the script does it all alone:-D
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + Img.id + "'": ""
was imgClass = (img.className)? "Class = '" + img.className + "'": ""
was imgTitle = (img.title)? 'Title =' "+ img.title +" '"' title = '" + img.alt + "'"
was imgStyle = "display: inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float: left;" + imgStyle
if (img.align == "right") imgStyle = "float: right;" + imgStyle
if ( img.parentElement.href) imgStyle = "cursor: hand;" + imgStyle
was strNewHTML = "\u0026lt;span" + + imgID imgClass + imgTitle
+ "style = \\" "+" width: "+ img.width +" px, height: "+ img.height +" px , "+ imgStyle +"; "
+ 'filter: progid: DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src = \\'" + img.src + "\\ '); \\"> \u0026lt; / span> "
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent ("onload", correctPNG)
\u0026lt;/ script>
\u0026lt;! [endif] ->
Another option is to use a PNG for funds this can be solved with the following between the head tags
:
\u0026lt;style type="text/css"> \u0026lt;! -
# background {background-image: url (
logoGDE.png
)}
* html # bottom {background-image: none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ' logoGDE.png
', sizingMethod = 'crop') background:;}
->
\u0026lt;/ style>
* html This makes set up a fund for some browsers and the same with a filter to IE
must change
logoGDE.png
the background image you'll use Table put id = "bottom"
I put in a table, if you put on the label \u0026lt;table> and overtake the table has the image edges to edges, if set to the \u0026lt;td> not.
Tested on:
Firefox 1.5 
Opera 8.54 IE 6 
From this we can see an example in
www.cristovivo.com / test.html
that maybe is not the most aesthetic, but shows this hope
serve them well besides that I hope your comments, this is one of the big questions that always hover in the forums.
