eXTReMe Tracker

Tuesday, March 21, 2006

Getting Alpha-Channeled PNG's to Work in Internet Explorer

Many people have discovered the use of alpha-channeled .PNG files to be a thing of beauty. Unlike the traditional .GIF format which supports total transparency, .PNG's allow for varying shades of transparency. Which is all well and good, until you try to get them to work in Internet Explorer 6 (or any IE < 7). So here's a tip on making them work across browsers:

1. Make your alpha-channeled PNG in Photoshop or other image editor of choice. Save it as a 24-bit .PNG (yes, a 24-bit PNG!) with alpha channeling enabled.

2. Since IE < 7 requires that alpha channeled .PNG's be used with a filter, that's what we'll do in the css. So say we assign the image in your html an id of #foo. You'll want to apply this rule to #foo:

#foo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/foo.png', sizingMethod='crop');}

And that's it... None of the other current browsers that support PNG transparency (Safari, Firefox/Mozilla, Opera, etc) will require any extra rules/instructions on how to treat the alpha-channeled PNG. Your transparecy works and you're done!

posted by cyclona23 at 1:22 PM 2 comments

Thursday, March 02, 2006

Some Basic (X)HTML Tags

Here's a primer on some simple basic html (and xhtml tags) at the request of my web pupils. The main difference (that's what we'll say for now) between html and xhtml is that xhtml uses self closing tags, which means that in many cases tags that normally have no closing tag in html such as <img> or <br>
(as opposed to link tags which are wrapped around content and include an opening <a> tag and a closing </a> tag) look like this <img /> or <br /> and are called "self-closing". Blogger templates, for example, use xhtml. You can tell if you are using html or xhtml by going to the very tip top of your page's source code. If you see something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

... then your page is using XHTML... if you dont see "XHTML" in the doctype (or if there is no doctype at all) then most likely your page is in HTML.

So here's some basic (x)html tags. Easy!


Image Tag
<img src="http://gougeyoureyesout/img/whatever.jpg" border="1" width="100" height="50" title="My Image" >

So if you're writing xhtml in your blogger template, the last part would look like this ...title="My Image" />



Links
<a href="http://gougeyoureyesout.com/mylink.html">My Text</a>

To open your your link up in a new window for those of you who hate losing traffic (ahem), you can add this simple trick to your tag:

<a href="http://gougeyoureyesout.com/mylink.html" target="_blank">My Text</a>



Line Breaks
You can create a line-break by adding <br> (or that's <br /> if you're in XHTML world).



Code Comments
To hide pieces of code from the browser but still leave it intact and present in the code, you can do what's called commenting code out. So say you go to your Blogger template and see something in the template that you want to hide, but would also like to keep around in case you ever want to bring it back. You can just slap this <!--    --> around it, like so:

<!--
<$BloggerVariableIWantToHide>
-->

... and that's it... whatever is between the two bolded brackets the browser will ignore. So if you did a View > Source on your code, you would see the commented-out code in it, but the browser will ignore it as if it wasnt there. Yay!

posted by cyclona23 at 4:15 PM 0 comments