So here’s my top three (two are pretty standard and one is a little obscure). I’m sure there are many more, feel free to add yours in the comments.

ie whitespace bug

symptom: you’re making a list and have large amounts of padding between your list items. This frequently occurs when you’re using a list for your navigation.

solution: There are many documented solutions out there. My first line of defense is to add display:inline to the <li>. You can also just remove the spacing in your actual HTML code so that your list looks like so:

<ul>
<li><a>First Item</a></li><li>
<a>Second Item</a></li>
</ul>


I don’t like this method simply because it makes things a little harder to read and can be accidently broken if you make an edit down the road and don’t forget to keep the spacing that way. For this reason I tend to use display:inline whenever possible.

ie double padding on floats

symptom: you’re building a layout and float an element and notice that the padding or margin is double the value you’ve typed.

solution: add display:inline to your element. For this example I’m using a div with an id of “container”.

css:

#container{
    float:left;
    margin:10px;
}

A special note about this bug. It only occurs if you have margin/padding on the same side your float is applied. So if you’re floating left and have padding left you will encounter this issue but if you’re floating left and have padding on the right everything should render as you intended.

button element in ie

This is the obscure one. When I create a form I like to use the HTML &lt button > element for my submit buttons. I tend to do this so I can style all my input elements (fields, checkboxes etc) one way and then have a unique submit button that I can style without overriding all my general input styles.

Anyway, I’m often asked to create graphical submit buttons. In it’s most basic implementation (no rollover effect) I’ll save out an image and place it in the button like so.

<button><img src = "myButton.png"></button>

Unfortunately good old ie has some very odd padding within the button element often making a light grey background and or border appear around the button. The fix is simple and involves adding overflow: visible to the css on the button element.

button{ overflow: visible; }

Explore the Gaia Framework
I’ve never used a Flash framework, in fact this is the first one I’ve heard of.  When I build a Flash site my least favorite part is always sitting down and planning out the loading structure.  Where the data is coming from, when its going to load etc etc. It’s dull, repetitive and takes away from all the fun creative interface creation I enjoy so much BUT it’s very important to consider unless you want to have a crummy sluggish site.  In the past I’ve written my own loading classes and used existing classes (ie: BulkLoader) but after reading about Gaia I’m excited to see how they handle loading and other typical Flash site needs ie:transitions.  Oh, and bonus points because it plays nice with SWFAddress and TweenLite!  Two Flash classes I can’t live without.

Take Flash IK for a Test Run
One of the main reasons I upgraded my computer was so that I could run the new CS4 suite.  My old TIBook just couldn’t handle Adobe anymore.  Now that I have CS4 I’m looking forward to running through a few tutorials on IK and rigging a few objects/characters.

Make a Layout Using CSS Tables
Now this probably won’t happen on any professional work just yet but I’ve put off working with CSS tables for awhile now.  In my 9-5 good old IE6+7 make up over 70% of our users in most cases so using CSS tables for <30% of users doesn’t quite justify it for me just yet. 

Well there’s three of many new techniques/skills/tools I’m hoping to get familiar with this year.  I just hope I can find enough hours in the day for everything!

var contents = new TextField();
contents.width = 300;
contents.multiline = true;
contents.text = myData;


Tested the movie and shocker, the text was not multiline! Confused I read the lines over and over again, changed the order in which I declared the multiline value and then it hit me, word wrap! By default the wordWrap value in Flash is set to false, this forces all the text on one line no matter what the multiline says. By adding a simple wordWrap = true everything displayed as intended.

var contents = new TextField();
contents.width = 300;
contents.wordWrap = true;
contents.multiline = true;
contents.text = myData;


I’m not sure why I always forget the wordWrap but next time I do hopefully I remember I wrote this post!

I was doing a simple two column layout and using my footer to clear the two columns which were floated left. Easy enough.  The problem came in to play when I added some padding to the top of my footer which when displayed in IE7 was doubled.  Right away my mind jumped  to the well documented double float margin bug present in IE6.  The solution to that one is to add “display:inline” to the float container and all is well.  Unfortunately that did not work in this case BUT a small adjustment to “display:inline-block” did the trick.

Before:

#footer{
  clear:both;
  padding:15px 0;
  width:800px;
}


After:

#footerBox{
  clear:both;
  display:inline-block;
  padding:15px 0;
  width:800px;
}


When implementing the solution on actual site files I prefer to apply the “display:inline-block;” rule with conditional commenting. However having the rule in the main CSS does not appear to cause conflicts in any other browsers I test on (Safari, Firefox, IE6) so its a matter of personal preference. Personally I strongly dislike IE and relegate all IE specific fixes etc to their own CSS that is included via conditional comments.

Enter WPLite.

This nifty plugin allows me to login and disable individual menu items as well as specific sections of the post meta, ie: categories, tags or custom fields. It even works with other plugins so you can hide the options/settings menu of a plugin but still allow access to the front end. I do this frequently with the Event Calendar plugin. If you’re looking for an easy way to strip down the WordPress admin area beyond what the predefined roles give you then this might be a lifesaver.

Just for fun I played around with Google Trends this afternoon to see if in fact people are searching for Ruby any more now than they were a year ago. In an effort to ignore searches for “ruby” the gemstone versus Ruby the programming language I formatted searched for the phrase “ruby programming”. I don’t claim these results really show an accurate gauge of programming language popularity (check link for that) but it was a fun experiment. I threw in PHP and Python for a comparison but left out the big guns ie:Java, it just didn’t seem fair to compare Java to Ruby.

Search Trends in the United States

Search Trends in the United States in 2008

Search Trends Worldwide in 2008

I’d describe the graphs as “slow and steady”, while there didn’t seem to be any notable influx of changes I found it interesting how close Ruby and PHP results appeared in the United States. Event more surprising to me was that Python presented considerably higher search popularity than PHP in 2008. Maybe I should have titled the article “Is Python the Next Big Thing?”.

For simplicity’s sake here’s a sample of a very basic small Flash project.

In AS2 I would set the classpath as “classes/” to have access to the MyClass.as file in my project.fla.

In AS3 that doesn’t fly and the classpath must be set as ”../myProject/classes” or “./classes”.  I’m not 100% clear on why “classes/” no longer works as all three paths seem the same to me, but suffice to say this caused a fair share of headaches when I first made the jump to AS3.

These numbers took me by surprise, maybe its the sites that I visit but I had the impression that AJAX was taking the web by storm. It’s this perception that prompted me to cut my time in the AS3 world and spend some time getting more familiar with AJAX techniques and my favorite Javascript Library, JQuery.  I will continue utilizing both technologies but I just found it ironic to say the least that during a time where I’ve been very AJAX-centric that a report comes out showing such a strong flash prevalence.  Then again it could simply be inflated by all those horrid “punch the monkey” banner ads.