Results 1 to 6 of 6

Thread: Incorrect PNG image visualization with IE

  1. #1
    Bronze Member carloc's Avatar
    Join Date
    Sep 2004
    Location
    Italy
    Posts
    166

    Question Incorrect PNG image visualization with IE

    I've noticed that IE (sometimes???) doesn't show correctly PNG images with transparent background.
    With Firefox and Mozilla they're showed fine!!!
    Example:

    Is it (another) bug or what?

  2. #2
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    yep, i think it is.

    im not too sure abt the technicalities, but i was inspecting the .css coding for a wordpress blog template called 'One Road' (at http://alexking.org) which used lots of transparent images.

    it had a special tag in the code to correct this error of transparent images not showing properly when viewed in ie.

  3. #3
    Bronze Member carloc's Avatar
    Join Date
    Sep 2004
    Location
    Italy
    Posts
    166
    Quote Originally Posted by rohitkumar
    it had a special tag in the code to correct this error of transparent images not showing properly when viewed in ie.
    Rohit, what special tag?
    Can you post the link of the .css file you're talking about?

  4. #4
    Head Honcho Administrator Reverend's Avatar
    Join Date
    Apr 2002
    Location
    England
    Posts
    14,044

    =========== Please Read The Forum Rules ===========

  5. #5
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    883
    yep, i sure can...here is the link. You have to scroll down and search for the template titled 'one road'. Use firefox's page search- ctrl+f- for faster results

    and below is the code. for the bit abt transaparency et al, read the part in bold:

    Code:
    /*----
    CSS Done by Paul Hoch - http://www.thehochhouse.com/wp/
    Using TopStyle Pro 3.10
    Small portions copied from the 'buddha' style available at Alex King's site
    Background Image courtesy of Stock Exchange available here: 
    http://www.sxc.hu/browse.phtml?f=view&id=175119
    Photo Taken by: kazer a.k.a Tyler Kellen	 
    
    IE doesn't support Alpha Transparency for PNG files so 
    I'm using a filter setting for IE that sets the transparency
    FireFox and Opera ignore that setting as they display the inherent
    transparency of the PNG files.
    
    I created the PNG Files using Paint Shop Pro.  They are 50px X 50px with 60% opacity
    
    ----*/
    /* Main Styles */
    
    body {
    	background-image: url('images/bg.jpg');
    	background-attachment: fixed;
    	background-position:  left bottom;
    	background-repeat: no-repeat;
    	font-family: "Georgia", Verdana, serif;
    	font-size: 100%
    
    }
    	
    p, td, th, li {
    	font-size: 1em;
    	line-height: 1.65em;
    	color: white;
    }
    
    a:link, a:visited {
    	color: white;
    	border: 1px none white;
    }
    
    a:hover {
    	background-color: #EFD16B;
    }
    acronym, abbr {
    border-bottom: 1px dashed #333;
    }
    acronym, abbr, span.caps {
    cursor: help;
    font-size: 90%;
    letter-spacing: .07em;
    }
    blockquote {
    background-image: url('images/lquote.gif');
    color: white;
    padding-left: 40px;
     background-repeat: no-repeat;
     background-position:  left top; 
    }
    
    cite {
    font-size: 90%;
    font-style: normal;
    }
    
    ins  {
    background-color: navy;
    text-decoration: none;
      }
      
    del  {
    background-color: #ccc;
      }
    
     /* WP Stuff */
    #rap {
       margin-top: 100px;
    	padding: 0.5em;
    	left: 10%;
    	width: 66%;
    	color: white;
    	background-image: url('images/green.png');
    	filter: Alpha(opacity=80);
    	border: thin solid #99FF66
    }
    
    #header { 
    	position: absolute;
    	top: 10px;
    	left: 10%;
    	color: white;
    }	
    
    #header a {
    	text-decoration: none;
    }
    #header a:hover {
    	text-decoration: underline;
    	background-color: transparent;
    }
    
    /* Menu */
    #menu {
    	position: absolute;
    	top: 0px;
    	right: 1%;
    	width: 15em;
    	border: 1px solid #003399;
    	font-size: 0.85em;
    	padding: 0.5em;
    	background-image: url('images/blue.png'); 
    	filter: Alpha(opacity=80) 
    }
    
    #menu ul {
    	width:100%;
    	margin-top: 0;
    	padding-left: 0;
    	margin-left: 0;
    	margin-bottom: 1em;
    	color: black;
    	list-style: none;
    	font-weight: bold;
    }
    
    #menu ul ul {
    	margin-left: 0;
    	font-weight: normal;
    }
    #menu a:link, #menu a:visited {
    	padding: 1px;
    	color: black;
    	border-width: 1px;
    	border-style: none;
    	display: block;
    	width: 100%;
    	text-decoration: none;
    }
    
    #menu a:hover {
    	background-color: #EFD16B;
    }
    
    
    #menu form{
    	margin: 0 0 1em 0;	 
    }
    
    /* Calendar */
    #wp-calendar {
    	border: 1px solid #ddd;
    	empty-cells: show;
    	font-size: 14px;
    	margin: 0;
    	width: 90%;
    }
    
    #wp-calendar #next a {
    	padding-right: 10px;
    	text-align: right;
    }
    
    #wp-calendar #prev a {
    	padding-left: 10px;
    	text-align: left;
    }
    
    #wp-calendar a {
    	display: block;
    	text-decoration: none;
    }
    
    #wp-calendar a:hover {
    	background: #e0e6e0;
    	color: #333;
    }
    
    #wp-calendar caption {
    	color: #999;
    	font-size: 16px;
    	text-align: left;
    }
    
    #wp-calendar td {
    	color: #444;
    	font: normal 12px  Georgia, Verdana, sans-serif;
    	letter-spacing: normal;
    	padding: 2px 0;
    	text-align: center;
    }
    
    #wp-calendar td.pad:hover {
    
    }
    
    #wp-calendar #today {
    	background: #eee;
    	color: #bbb;
    }
    
    #wp-calendar th {
    	font-style: normal;
    	text-transform: capitalize;
    }
    
    /* Input Forms */
    input {
    	font-family: Verdana, Tahoma, Arial, sans-serif; 
    }
    /* The Date */	 
    #content h2 {
    	float: right;
    	margin: 0;
    	font-size: 0.85em;
    	font-weight: normal;
    	background-color: #FFFFCC;
    	padding: 0.3em;
    	margin-left: 0.4em;
    	border: 1px solid #F8E7B0;
    	color: black;
    }
    
    .storytitle { 
    	margin: 0;
    	color: white;
    }
    
    .post-categories {
    	display: inline;
    	margin: 0;
    	padding: 0;
    	color: white;
    }
    .post-categories li {
    	display: inline;
    	margin-left: 0 3px 0 0;
    	padding: 0;
    	color: white;
    }
    
    .post .meta {
    	font-family: Verdana, Tahoma, sans-serif;
    	margin-top: 0;
    	font-size: 0.75em;
    	color: white;
    
    }
    .post .feedback {
    	margin-bottom: 3em;
    	padding-bottom: 1px;
    	color: white;
    }
    
    p.credit {
    	color: white;
    	background-image: url('images/navy.png'); 
    	border: thin solid Black;
    	filter: Alpha(opacity=80);
    	text-align: left;
    	width: 66.5%;
    	left: 12%;
    	padding-left: 10px
    }
    .clear {
    	display:block;
    	clear:both;
    	margin:0;
    	visibility:hidden;
    	}
    
    /* Quick Tags Styles */
    /* 
    	I have an alternate Quick Tags file that uses
    	http://weblogtoolscollection.com/archives/2004/03/24/wordpress-javascript-quicktags/
    	which includes some extra tags and divs required
    */
    .imgleft {
    	float: left;
    	padding: 5px;
    	margin: 4px 14px 4px 2px;
    }	
    .imgright {
    	float: right;
    	padding: 5px;
    	margin: 4px 2px 4px 14px;
    }	
    .imgcenter img {
    	padding:5px;
    	margin:4px;
    }
    .imgcenter {
    	text-align:center;
    }
    
    .img-shadow {
    		clear: both;
    		float:left;
    		background: url('images/shadow.gif') no-repeat bottom right !important;
    		margin-left:8px; margin-right:0; margin-top:20px; margin-bottom:0
    	}
    .img-shadow img {
    	display: block;
    	position: relative;
    	background-color: #fff;
    	border: 1px solid #a9a9a9;
    	margin: -6px 6px 6px -6px;
    	padding: 4px;
    }
    .p-shadow {
    	width: 90%;
    	float:left;
    	background: url('images/shadow.gif') no-repeat bottom right !important;
    	margin-left:15px; margin-right:0; margin-top:30px; margin-bottom:0
    }
    
    .p-shadow div {
    	background: url('images/shadow.gif') no-repeat left top !important;
    	padding-left:0 !important; padding-right:6px !important; padding-top:0 !important; padding-bottom:6px !important
    }
    
    .p-shadow p {
    	color: #777;
    	background-color: #fff;
    	font: italic 1em georgia, serif;
    	border: 1px solid #a9a9a9;
    	padding: 4px;
    	margin: -6px 6px 6px -6px !important;
    	margin: 0;
    }
    Last edited by rohitk89; January 31st, 2005 at 11:47 AM.

  6. #6
    Bronze Member carloc's Avatar
    Join Date
    Sep 2004
    Location
    Italy
    Posts
    166
    The AlphaImageLoader Filter works... but require that ActiveX controls are enabled in IE! Doesn't it?
    I'd like a solution that works for any type of user settings...

    ...and just to add a bit of challenge, I want to put this solution (if it exists...) inside a PHP script.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •