How To: Create the clearest transparent Images

In all my 8 years of web development, I've always wrestled with transparent images. For the longest time, I was under the assumption that transparent .gifs were the best thing out there. And, I was wrong.

The trick: Use png's
PNG is by far, the most crisp, clear result you can find. The problem is that PNG is NOT SUPPORTED BY INTERNET EXPLORER! However, thanks to some serious research, google, and a beautiful code snippet by the folks at youngpup.net, we have a graceful, standards compliant workaround for the ugly duckling, or rather, Internet Explorer.

How to implement your transparent png
1. First, create your transparent png (using photoshop, or any image editing software)

2. Include your png on your page. Just like any other image:
<img src="images/my-trans-header.png" />

3. Grab youngpups beautiful transparent png script, and include it on your page.

4. You may want to rewrite the onload handler using your method of choice. (I use the prototype library which comes with a wonderful event handler.

5. IMPORTANT: You will need a 1px by 1px transparent gif named: x.gif located in the same directory as the file that is executing this script.

You're done!

More Resources
Young Pup's transparent png example
http://allinthehead.com/retro/69/

CSS TRICK: vertical scrollbar ie internet explorer

Another gem thanks to IE. It seems that Internet explorer automatically places a vertical scrollbar on the page even when it isn't needed. It serves no purpose other than to force us as developers to lose hair from the back and sides of our heads.

If you would like the scrollbar to appear ONLY when it is needed:
Add this bit of css to your style sheet:

html{overflow:auto}

And your done!

special thanks to the guys at trap17.com for their solution:
Css trick: Hide disabled Internet Explorer vertical scrollbar

CSS Z index with relative positioning

Q. How do I position items relatively and still be able to set their Z-index?

A. Don't!

Many of you probably already know this, but you don't have to position an element with position:absolute by hand anyways. When you set your css, simply set position:absolute - don't define the top or left positioning - and the element will lie where it normally would within the document flow.

Mysterious Padding Bug in IE????

Internet Explorer is the worst browser ever!! This browser makes my life hell every day! I'm considering changing professions because of it!

Anyways, I can't even begin to describe this one. I don't know what the cause is, but I can tell you what is happening:

If Internet Explorer (only) is inserting mysterious padding after the end of a <div> or <a>, than you are encountering this problem. For some reason, it seems to be carrying over a width, or padding from the previous line, and dropping it down. The only solution I have found is that you have to either define a padding on your line above or a 1px border.

To read more about this:
Mysterious Padding Bug in IE (scroll down to the very bottom)

Rich web-accessible fonts without downloading fonts locally

I couldn't believe this until I saw it in action on Good Creative's site. Using this flash & javascript based snippet, the page can display ANY FONT you would like, without being limited to the fonts on the user's machine! And all the while, without sacrificing accessibility, search engine friendliness, or markup semantics. Unbelievable, if it works, I have yet to test it, but I can't wait.

Check it out: sIFR 2.0: Rich Accessible Typography for the Masses

Links and Transparent PNGs

If you've ever created a link and realized that, for some reason, you can only click the text within the link??? Even though you have everything within standards, and the link is being 'displayed' (using css: display:block) as a block level element, it STILL ONLY ALLOWS YOU TO ACTUALLY CLICK THE TEXT?! (Side note- this AS USUAL is only an issue with Internet Explorer.)

I have come across this a few times, and this time I had no choice but to find a solution. Thankfully, i found the magic search words (this i find is the hardest part of all - usually when you encounter an issue, the solution is posted somewhere, the true mastery is nailing down the exact search phrase that will yield the answer to your problem, almost a game of aiming your words perfectly. This time the solution was "Transparent png links" thanks to google, and of course the author of that page).

Anyways The solution:

All you need to do is define a position:relative on your link! then, magically, it works:
Html Code:

<ul>
<li><a href="website-design.php">
<div class="divAsLink" id="website_design"> </div>
</a>
</li>
</ul>

CSS:

.subnav a{
display:block;
position:relative;}

CSS IE Doubled Float-margin bug

The things we have to put up with as web developers just doesn't seem to end sometimes. I simply cannot stand IE, in just 3 days of solid development I've encountered 3 defined bugs in the browser. Ridiculus!

Anyways:

If IE is giving a bigger (doubled) side margin than it should
(e.g. - You have a margin of 100px on both the top and bottom of an element and it is obviously not the same..)