Long URLs Causing Overflow In Chrome

PROBLEM
I’ve run into this issue a lot in Chrome since our site likes to use URLs for link text. Not a good practice in my opinion but whatever. The issue is when the URL is so long, the text cannot be broken.

Long URL Causing Overflow

This issue also happens on mobile devices. It will cause an overflow which makes the text run over causing a horizontal scroll, which is never good.

SOLUTION
Using just word-wrap: break-word sometimes doesn’t work in Chrome for some reason. I found that adding a max-width in whatever the container the long text is in will work. For example, my new CSS is:

ul.material_content_list li ul.blank_list li {
max-width:                    470px;
word-wrap:                    break-word;
}

Now the page looks fine:

URL Properly Broken & Not Overflowing

Google Reader Not Working

PROBLEM
Google updated Google Reader about two to three weeks ago. The interface is a lot different than what it used to be. Even on google.com/reader, they have a screen shot of the old interface which was a lot nicer and easier.

Anyway, I noticed that I couldn’t read any of my new feeds. If I had a feed that had more than one new posting, I was unable to scroll down to see them. I had tried everything with the new Google Reader. What’s more is that when I tried the new “Sort” feature from the dropdown, it would freeze and not do anything. Here is a screen shots:

Google Reader only showing one result, no scroll option

SOLUTION
After a few weeks and tweets about this issue I was running out of ideas and patience. It had never occured to me that it might be my browser. I’m still running FF 3.6 since I have a bunch of add-ons that still aren’t supported by the new FF 292834.

Switching to Chrome, I get a nice little custom scroll bar on the right and all my feeds are able to be read again. And I can even sort!

SPECIAL COMMENT
WTF, Google? Really? You didn’t test the new Google Reader in FF 3.6 which is still used by 8% of the population. And no warning or anything either that I may be using an out of date browser that can’t support your new flashy Reader. So now I’m going to have to view my feeds in Chrome. Does your IE7 crowd (3.5% of the population) get the same respect?

Come on, man!

Creating Favicons

ISSUE
For a while now I’ve wondered how to get a web navigation/web icon/toolbar icon to display on my website. Most major sites now have them:

Favicon Screen Shot

FIX
After googling things like “web navigation icon”, “web toolbar icon”, “browser website icon”, I finally came across what it’s really called, a “Favicon”. Read all about them at wikipedia.

I created a small image (32×32 px) using Flash. I then uploaded it to my websites (longlivethemonkey.com, Quotes, and Jeepers) and added the following code in the htmlhead.inc (inside the <head></head> of your xHTML) file:

<link rel="icon" type="image/png" href="images/lltm_icon.png" />

So now I get a pretty little icon at the top. When you read about the Favicons in wiki, it states that since Microsoft’s IE isn’t standards complient, if you name your icon differently than what Microsoft expects it to be, it won’t show up in IE >=7 (not sure about 8). The line of code above works in Firefox, Opera, and Safari. I guess Chrome hasn’t caught up with it yet.

UPDATE 1
I figured out how to make it so IE gets it. The file needs to be a .ico file and it must go before your code for your other icon. The code is:

<link rel="shortcut icon" href="/images/lltm_icon.ico" type="image/vnd.microsoft.icon">

You can convert your PNG to a ICO here. No software necessary.

UPDATE 2
With WordPress it’s easy. In your Dashboard under Appearance go to Editor. Click on your Header file (should be header.php). Put the code as you would in a regular file, in the head. Works like a charm.