• Removing and Re-adding the exchange account
• Changing my Google password
• Resetting my account using https://www.google.com/accounts/UnlockCaptcha and https://www.google.com/accounts/DisplayUnlockCaptcha
• Checking every Google forum and that contained any of the words I could think of to find a fix

Every time I saw a new post that guaranteed a fix, my hopes were raised then crushed when it failed to work for me. So I am writing this post to get YOUR hopes up with a fix that finally worked for my situation.

Right before I began experiencing the issues I made some updates to what  I was syncing and one them was adding my Remember the Milk (RTM) calendar subscription t o my http://m.google.com/sync page. This was apparently the culprit. I didn’t use the public address the iPhone needed, I was using the main private feed with my username. Once I went into the sync page and disabled all the calendars except the main one, the account started syncing mail, contacts and calendars again. After reactivating the other calendars I noticed it was the RTM calendar that was causing the issue.

I ended up needing to subscribe to the RTM calendar via the iPhone directly in order for it finally work. So if you are experiencing issues with the Google Exchange account on your iPhone, try removing some calendar subscriptions and see if helps you.

WordPress.Fun

It’s hard to pinpoint what attracted me to this particular design. Was it the grungy look, the colors, the new style footer or its overall uniqueness? Whatever it was, I decided to begin my long theme development journey with WordPress.Fun. One great feature about the smashing magazine theme is that all of the source materials were provided. Armed with the psd and my limited design skills I decided that I first wanted to pick colors that were more to my liking. With the help of a designer friend, the colors you see were updated in the file and the development could begin.

Sandbox

I have been using the sandbox theme as starter wordpress code for sometime with client work, so I decided to begin my masterpiece there. After modifying the code and adding all the hook’s and divs that I like to use, the design started to take shape. I cropped, copied and rotated the textured backgrounds in order for them to repeat correctly (as this is a scaling layout) and used as many advanced CSS3 techniques as I could to produce front-end code I could be proud of. The only images used in the design are the four or so textured backgrounds and the colored footer transparencies. For the rest I used the border-radius, box-shadow, text-shadow and other advanced CSS.

That’s the overall gist of how we got here. I could go into more detail but I think that would be too much excitement for one post. I will now let you peruse the site and check out some of the new features. As always comments and suggestions are welcome and encouraged. One of the things I always wonder about blogs sites I visit is ‘what plugins the site is using’ so I will now leave you with a  list of the ones I have used on this site. Many hours of research went into picking them and I encourage you to check them out for your site.

Note: This list is current as of the day of this post. The list may change over time. I may keep an updated list on the site somewhere, but for now, this will do.

Plugins

• Art Direction – Per post styles for new age art direction
• CSS Naked Day – Automatically strips off stylesheets without editing themes during the Annual CSS Naked Day
• Domain Theme – Allows you to specify more than one domain name with your WordPress installation and associate a specific theme for each domain
• Easy Contact – Easy Contact is a simple, semantic contact form that utilizes the Sandbox design patterns
• Google Analytics for WordPress – Makes it simple to add Google Analytics
• Google XML Sitemaps – Generates a sitemaps.org compatible sitemap of your WordPress blog
• IM Online – Displays status for MSN, Yahoo!, AOL, Jabber and ICQ via onlinestatus.org
• Lifestream – Displays your activity from various social networks
• MobilePress – Turn your WordPress blog into a mobile website/blog
• Raw HTML capability – Lets you enter raw HTML in your posts. You can also enable/disable smart quotes and other automatic formatting on a per-post basis
• Sociable – Automatically add links on your posts, pages and RSS feed to your favorite social bookmarking sites
• SyntaxHighlighter Evolved – Easily post syntax-highlighted code to your site without having to modify the code at all
• Theme Switch – Use different wordpress theme for logged in user
• WP-MostCommentedPosts – The name says it all

I hope this will serve as a reference for people to get all of the the info they need in one place and not have to visit two or three sites. Without further adieu let us begin.

I want to start off by saying that I think retrofitting for older browsers (yes IE 6 and below are too old) is a bad idea. We should be moving forward with our development in CSS3 etc... while making sure the older browser are still readable. They do not necessarily need to look the same. Now, with that said, I work as a web developer and know that this idea is rarely accepted by designers and clients alike. I just wanted to get my feelings out there because that is the whole point of this blog. On to the method already.

Wait for it...

The CSS

* html #id {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}

yep! That's all it is. No fancy javascript, no special image name with transparency behind it, nothing. Throw that in your IE style sheet or right below your 'good browser' statement in your screen style sheet and you will be good to go. Remember: the path is relative to the page you are on, not the CSS file. So absolute path to the image is probably the best way to go.

Notes

As always there are some things to be aware of when using the filter method. If you make sure to follow this rule, you will save yourself a lot of headache. On the element your are using the filter. DO NOT set a position. On any element inside of the element with the filter, DO set position to relative.

(eg.) If your transparency is on your wrap div, do not set a position. Set position relative on your content div and all items within content will be OK.

Now your links and text will be clickable and selectable.

<div id="wrap">
<div id="content">
<h1>Site Title</h1>
<h2>Tagline</h2>
<p>Some <a>long-winded</a> content with a link</p>
</div><!--end #content-->
</div><!--end #wrap-->

#wrap {background: url(../images/image_name.png);}
* html #wrap {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image_name.png',sizingMethod='scale');}
#content {postion: relative;}

As with all other posts you have read about the filter method. The background image will stretch to fit the element, so there is no background-position usage etc...

If you are unable to use a separate (slightly modified) design to handle your transparency needs for IE then the above method will save you a lot of pain when dealing with them.

Below is the code for a snippet to add the above CSS to your style sheet easily with Textmate or e text editor

create a new snippet
add:

background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/${1:image_name}.png',sizingMethod='scale');$0

to the big block
Activation: tab trigger > iepng
Scope Selector: source.css

Further Reading

• http://www.hrunting.org/csstests/iealpha.html

As I have found with the twitter app, this should help to bring a more consistent schedule to my blogging.

Maybe this will get me to work on that design I have not worked on yet.

White Vinegar

So I decided to make the switch and produce my own cleaning products. With my main cleaning item running out, I decided to wait until it was finished. That day came about a two weeks ago. Off to the store I went to gather some supplies (baking soda, white vinegar and a spray bottle). I could have used the empty bottle from my just finished product in order to make my home brew, but I decided to buy one with measurements across the side. My main recipe came from the organizedhome.com site. I mixed equal parts water and white vinegar and away to the bathroom I went.

This homemade cleaner performed well. I was quite surprised to see that it cleaned just as well as my store bought mass-produced cleaner, and it smelled better (I like the smell of vinegar. Who doesn’t?) This smell went away once the cleaner dried but left behind an awesomely clean bathroom.

Baking Soda

My next challenge was something I have been trying to clean for years. The bottom of my tub. I used cleaners on it and scrubbed and scrubbed but I never seemed to come clean. After reading on the Clean & Green site that baking soda works as an all-purpose cleaner I decided to give it a try. I tossed some white powder out of the familiar orange box, added some water and went to scrubbing with a sponge. In about 10 seconds, I noticed the once white powder was beginning to become darker. The bottom of the tub was actually becoming clean. After rinsing with the shower head, I had to take a step back and admire a job well done.

From now on, I will be checking the above two sites for more natural cleaning recipes to conquer my household product needs.

Further Reading

• Vinegar Works Wonders
• Clean & Green
• organizedhome.com

So, what makes this year’s Macker festival special? Well…it is the first one in which I got to partake. About a month ago I answered an unexpected phone call (we each have our own cell phones) from Kami’s sister. To my surprise, it was not Kami’s sister on the other end, but her brother-in-law. He proceeded to ask me the question I had waited to hear for 6 long years. Now I am paraphrasing here but I think you will find it fairly accurate, “Matt, you are the coolest guy I know, will you play basketball on my Gus Macker team and raise our skill level by a ton?” When he put it like that, how could I say no.

So off to Walmart I went to buy a basketball (even though I am good, a guy has to practice), a five dollar one will do. And do it did. Ball in hand, all I needed was a place to practice. What better place than a city park. Outdoor basketball, I should practice outside right? On the City of Belleville website I went in search of basketball courts. I thought my options were going to abundant, but no luck, only one court to choose from. Although it was a short distance from my house, it really sucked. I woke up bright an early one morning to go play, went and played, came home and decided to look for other options. Lady luck was shining on me though. My next-door neighbor decided to move out and left his spectacular basketball hoop collecting dust in his driveway. It was just the thing I needed. Daily 3 to 4 hour practices were made and I began to feel ready for the big day.

The schedules came out and May 24, 9am became brightly circled on my calendar (well, an event was added to my Google calendar) as my time to shine. Shine I did. Team Gooding (we were too lazy to pick a real name so we went with our team captains last name) won its first game 15-9. I pitched in with several big rebounds and about 5 points. Not bad for not having played competitively since 8th grade.

Spirits we high going into our second game but it was not meant to be. Mr. TwoPoint McTwoPointerson from the other team decided to have the best game of his life. Of the six two point shots he tried, he made 5 of them and we were quickly dispensed 15-6 in about 10 min. All I can say about that game is, at least he wasn’t my man to guard.

So we were done for Saturday and after the annual Gus Macker weekend party at Kami’s sister’s house we were ready to salvage the weekend in the loser’s bracket. Someone forgot to tell the third team we played that it was street ball. The losers decided to call every touch (and some phantom touches, its true) as a foul. They called so many fouls that they were shooting free throws for them about 5 min into the game. We were not deterred though, we battled hard and after being up 10-9 we fell in a heart-breaker 15-12. After two loses, we were out.

Surprisingly though, we were not down. We had won a game, played some pretty good basketball and a good time was had by all. I guess we will just have to practice a little harder for next year. Maybe 5 hour practice sessions are needed (if that unexpected phone call comes again next year).

Update: A new neighbor moved in and offered me his basketball hoop. Let the 5 hour sessions begin.

1. When a user resizes the text, the box will not expand.
2. You will need a new image for each different size of input you need.
3. Absolute positioning (and the resulting extra CSS lines will need to be added) is the only sure way to line up the inputs inside the image

In order to work through these issues and out clean scalable rounded corner form elements we will first begin by creating the HTML code for the input elements.

• <strong>
• <em>
• <span>
• <span>

These will provide the hooks our CSS will need in order to create the rounded corners. You can use any HTML tags you would like to surround the code as long as you can add a style to it.

The strong and the em tag will receive longer images that will account for and size changes on the input fields and text size increases. The other two images will just be images of the corners. The two longer images will need to have a transparent background for the color inside the lines. If you have a non-solid color background just make the bottom left image have the background and the top right image transparent.

The CSS

strong {background: url(/images/input-bottom-left.gif) no-repeat 0 100%; display: block; float: left;}/*longer sides*/
strong em {background: url(/images/input-top-right.gif) no-repeat 100% 0; display: block; float: left;}/*longer sides*/
strong em span {background: url(/images/input-bottom-right.gif) no-repeat 100% 100%; display: block; float: left;}
strong em span span {background: url(/images/input-top-left.gif) no-repeat; display: block; float: left;}
input, select, textarea {margin: 1px 3px; border: 1px solid #fff;}

The HTML

<form>
<fieldset>
<legend>Rounded Corner Form Elements</legend>
<label for="txtFirstName">First Name:</label>
<strong><em><span><span><input id="txtFirstName" maxlength="50" name="FirstName" size="25" type="text" /></span></span></em></strong><br />
<label for="txtLastName">Last Name:</label>
<strong><em><span><span><input id="txtLastName" maxlength="50" name="LastName" size="15" type="text" /></span></span></em></strong><br />
<label for="txtaraComment">Comment</label>
<strong><em><span><span><textarea id="txtaraComment" cols="50" rows="10" name="Comment"></textarea></span></span></em></strong><br />
</fieldset>
</form>