Fixing PNGs in IE 6

Blog

by Bobby Whitman

close twitter facebook

Ok, to get a PNG showing up in IE 6 (without that horrid grey background) you need to specify a CSS filter.
This filter is essentially a Microsoft IE plugin that loads a PNG into the background of any HTML element, however
it will lack most properties of normal CSS background images.

#logo {
width: 230px;
height: 73px;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/logo.png’);
}

This code will make <div id=”logo”></div> show our PNG logo in IE 6. However, in Firefox the <div> is empty.
That is why we need to use IE conditional comments. That is, specify one general
style and then if we are in IE 6 have a style to override it.

<!–[if lt IE 7]>
<style type=”text/css”>
#logo {
width: 230px;
height: 73px;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/logo.png’);
}
</style>
<![endif]–>

Now, our PNG show up properly in both Firefox and IE 6 (as well as other popular browsers–IE 7, Opera, Safari). It is that easy.

Suppose now that we to fix all PNG images on a page without necessarily knowing where they are or specifiying each one individually by id.
For this we will need JavaScript and for simplicity we will do our PNG fix with jQuery as it will let us easily grab every image
whose src attribute ends with .png ($(“img[src$='.png']“)).

<!–[if lt IE 7]>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function() {

$(“img[src$='.png']“).each(function() {

var src = $(this).attr(‘src’);
$(this).attr(“src”, “img/spacer.gif”).attr(“style”, “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + src + “‘);”);

});

</script>
<![endif]–>

Place this snippet of JavaScript in your and your PNG should be fixed in IE 6. Of course, do not forget to download a copy of jquery.js.

Twitter

an oldie, but a goodie // Death to design by committee // via @Boagworld http://t.co/6Mo1Vxyl

Posted on Mon, Feb 6
by pomajp

Twitter

The Myth Of The Sophisticated User http://t.co/Mlr7M20r (via Instapaper)

Posted on Mon, Feb 6
by pomajp

Blog

Web/Graphic Designer Position Available

by Gary Moneysmith

close twitter facebook

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
Have a Strong Portfolio: We’d like to see much more web work than print.
Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

Competitive salary (compensation will be based on skills and experience)
Fully paid medical/dental insurance for employees
Paid parking
Unlimited vacation time (within reason)
Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.

dynamit

Blog