Productivedreams.com ProductiveDreams - Everything that web designers need, owned by Gopal Raju

A blog to keep you updated on the latest design trends.
RSS

IE CSS hack without using any hacks!

Filed Under
04 Oct 2008

A few days back while working for a MAJOR client (sorry, can’t mention their name), I discovered something new (I hope it’s new ) – A pure CSS based image replacement solution for IE. This method is helpful especially to solve the PNG issue in IE6. I know there are many CSS hacks available out there to solve the PNG transparency issue, but this method doesn’t need any hacks!! Interesting isn’t it?

Step-1: Let’s review the HTML part first.

HTML
01
02
<html>

03
 
04
<head>

05
<title>ProductiveDreams</title>

06
<link href=”style.css” rel=”stylesheet” type=”text/css”/>

07
</head>

08
 
09
<body>

10
<div class=”bg-image”></div>

11
</body>

12
 
13
</html>

14

The following are the images that I've used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

PNG Image
Colorful PNG Image


Desaturated GIF Image
Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet
CSS
01
body{

02
background:#000;

03
text-align:center;

04
}

05
 
06
div.bg-image{

07
background:transparent url(images/pd.png) no-repeat center !important;

08
width:134px;

09
height:134px;

10
}

Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I've specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?
Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome.... isn't it? In all other browsers except IE you will see the colorful png image.
Consolidating the entire thing

So. the final css would look like:
CSS
01
body{

02
background:#000;

03
text-align:center;

04
}

05
 
06
div.bg-image{

07
background:transparent url(images/pd.png) no-repeat center !important;

08
background-image:url(images/pd.gif);

09
width:134px;

10
height:134px;

11
margin:0px auto;

12
}


For your ease, I have attached the sample files as a zip. Feel free to download it  :)  and do let me know your feedbacks.

Download CSS Solution for image replacement 				


				

				  23 Comments				

				
			


		
			

			
			
			

				
				

					
					Free PSD Avatar Icon Set					
				

				
				
				

				Filed Under 
								
				

				
				
				

   					01
   					Oct 2008
 				

				
			

			
				
				

				

					
I am glad to release the Free PD-Avatar 1.0 Icon set. The set contains five avatars which could be used as icons as well. The icons are available in PSD format. Feel free to use them for corporate or personal projects and do let me know your feedbacks. You can use the icons for private and commercial projects, blogs and web-sites for free, without any restrictions whatsoever.



However, you are not allowed to sell or redistribute the icons.
Thanks and Enjoy!


Download PD Avatar Icon Set Version 1.0
				


				

				  73 Comments				

				
			


		
			

			
			
			

				
				

					
					ProductiveDreams- Wallpaper for Mobile & iPhone					
				

				
				
				

				Filed Under 
								
				

				
				
				

   					27
   					Sep 2008
 				

				
			

			
				
				

				

					
I had been thinking of providing ‘mobile’ wallpapers for my visitors and here it goes…The wallpapers are based on the current look and feel of ProductiveDreams.com

Free Iphone Wallpaper

Download ProductiveDreams Wallpaper Version 1
				


				

				  2 Comments				

				
			


		
			

			
			
			

				
				

					
					Min-width issue in IE6					
				

				
				
				

				Filed Under 
								
				

				
				
				

   					23
   					Sep 2008
 				

				
			

			
				
				

				

					This is something for those who care for IE6 and not W3C Standards. Recently I worked on a project, for which the layout was liquid and one of the requirements was to use a minimum width of 1000px. Is that a problem? Not at all.

The problem was to make it compatible on all major browsers, including IE6 !!!!!. I wonder why people still use IE.

As usual, I started searching for the solution on the right top of my Firefox window (yes, google!) and found a few websites which had discussions on the same topic. Most of them had lengthy posts and not the real solution. After going through a couple of sites, I concluded with the following solution. I hope this would help those who come across the same problem.
CSS
1
.div_class_name{

2
width: expression(document.body.clientWidth < 1002? "1000px" : "auto");

3
}

Just add the above line in your CSS. Replace 1000px with the min-width value and replace 1002 with a value slightly greater than the min-width. To define the max-width, just replace the "<" with ">".

Known Issues:
  • Only works with JavaScript enabled browsers
  • Not W3C valid
    • 



That's all! I don't want this post to be lengthy like the others I went through  :) 				


				

				  5 Comments				

				
			


		
		
		 
Pages (12) « First « 8  9  10 11 12 »
 		

	
	

















	



 Copyright 2006-2010 ProductiveDreams. All Rights Reserved. About Gopal Raju. Hosted by MediaTemple