Archive for December, 2007

December 17

Saving a Transparent GIF Image

Saving for the web is always a tricky business, specially when it comes to transparent images. At one point or another we have all been there, wondering why our GIF image has rugged edges and does not seem to be all that transparent.

The Problem

Because IE6 does not handle PNG images very well, GIF images are your best option for a transparent logo background or image. But your image has rugged edges, why?

The Solution

One thing that nobody seems to tell you when saving a GIF image is that you need a matte color. In simple English, the matte color is the color of the background where the GIF image will be placed. So, lets say I am placing a logo with a transparent background on something with a white background, then my matte color would be white.

How To

Once you have your PSD file is open in Photoshop do the following:

  1. Go to File > Save for Web
  2. Under the Preset menu you will see a drop down menu which contains different file formats, select GIF
  3. Make sure the Transparency box is checked.
  4. Click on the Matte box and select the color of the background on which the image will be placed.
  5. Save.

This should have done the trick.

Photoshop Expert?

By no means am I the best Photoshop user out there. However, I can tell you this works. I have been using this method for all my web work for quite a while now. If you have any problems or a better solution, please let me know. Hope this was of some help.

Posted in Photoshop, Tutorial, Web Design | No Comments »

December 10

Using jQuery with WordPress

This is going to be a short post but an important one nonetheless.

Firstly, you may want to know that WordPress 2.2 “switched to jQuery for core JS, which is lighter and faster” (WordPress.org). In order, to include jQuery in your pages, simply add the following HTML to the <head> of your document:

<script type=”text/javascript” src=”/wp-includes/js/jquery/jquery.js”></script>

Secondly, you want to make sure that all your declarations starting with the “$” symbol are replaced by “jQuery”. It has to do with other JavaScript libraries coexisting in WordPress. In other words:

Don’t do this:

$(”p”).css(”color”, “#fff”);

Do this:

jQuery(”p”).css(”color”, “#fff”);

Hopefully this helps those of you out there trying to incorporate jQuery into your WordPress pages. Comments and/or question are always welcome.

Posted in Tutorial, WordPress, jQuery | No Comments »

December 02

Taming IE6

Since 2001, IE6 has been a nightmare for all web designers and more recently IE7 is taking that spot. Although, as of last October, more people were recorded using Firefox to surf the web, the market share of the Internet Explorer family is still bigger than Mozilla’s browser and far greater than Apple’s Safari.

The Box Model Problem

This is the most widely known, and hated bug in IE6. In a few words, unlike Firefox (or other standards compliant browsers), IE6 disregards an element’s specified width and/or height for its content and adds padding, margin, and border to it. This means that in Firefox an item with a width of 200px and a padding of 10px equals 220px in width. The padding is added to the the element after the the content area’s width is determined by the CSS rules. On the other hand, IE6 will render an element with a total 0f 200px. This happens because the padding is included in the content area’s width of the element.

A few solutions

* html: There is a huge debate about this method within Web Designing circle. People claim this is a hack, and well I think it is. Nevertheless, it is one of the much “cleaner” hacks (if used sparingly) and I personally use it from time to time. All you have to do in order to use this hack is add * html before any of your CSS rules. This will make the rule only be applied to IE6 and no other browser.

JavaScript: This method is also a very clean one. How does it work? I think that is a topic for another post (leave a comment if you wish me to write about it). But in a few words, it uses JavaScript to detect which browser a person may be using and inserts a given piece of CSS to that specific browser. The downside to this method is that it requires JavaScript to be enable in your browser, something that is not always true.

Conditional Comments: Yet another way to deal with IE6, and send this browser specific rules. The only downside to this method is that it messes with the mark-up of your web page. All you have to is add the following to your source: <!–[if IE 6]>And add specific mark-up, stylesheets, or JavaScript toIE6 <![endif]–>.

Final Thoughts

When dealing with IE6, no method is perfect. And for the most part, even if you don’t, somebody is going to consider your method of choice a hack. I personally think that anything you do, as long as you do it sparingly and with reasoning, is fair play. Let me know if you want any tutorials or post to appear on my blog by leaving a comment.

Posted in CSS, Cross-Browser, JavaScript, Tutorial, Web Design, Web Standards | No Comments »