Results 1 to 6 of 6

Thread: Incorrect PNG image visualization with IE

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #5
    Triple Platinum Member
    Join Date
    Aug 2004
    Posts
    805
    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 12:47 PM.

Posting Permissions

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