Making CSS UL Menu’s Browser-Consistent

If you’ve ever made a web site and wanted it to look consistent from one browser to the next, then you’re well away of the difficulties that are involved. Fixing these sorts of styling issues can be a major annoyance, however, I like to hunt down issues on my own pages from time to time and stand up to the challenge.

One issue that I can across today was dealing with horizontal menu positioning using unordered lists (<UL>) and some positioning. The positioning wasn’t consistent between browsers or even operating systems.

The bad

I started by opening the affected page in multiple browsers (Internet Explorer, Safari, Chrome, Opera & Firefox) on multiple computers (Mac, Linux & Windows) and getting some initial comparisons. There were 3 different variations and (oddly enough) the same browser didn’t necessarily render the same on a different operating system. So there I was. A puzzle… and I like puzzles.

Some of the first things that I inspected were font sizes and families. It occurred to me that different operating systems may differ in fonts, so it seemed like a good starting point. I tested this by forcing a common font: Arial. That wasn’t the problem. The inconsistencies remained consistent.

I also checked into the possibility that the <UL> or <A> elements were applying different heights. Typically anchor elements, <A>, use a display style of inline. If you’re implementing a menu similar to mine then you’re likely applying a block style, which permits better dimension definition of the element. Forcing height on these elements also did not resolve the issue.

I was running out of ideas, but then it hit me. Line-Height. While the other styles appeared to be consistent between browsers and operating systems, there was one style that I’d previously worked with and knew was certainly NOT consistent: line-height.

The good

After forcing a consistent line-height in my CSS, all browsers suddenly began respecting my intended styling. Sigh of relief.

On that note, its worth bringing up the success that browser competition has brought to HTML and CSS rendering standards over the past few years. The push for the fastest and most capable browser has brought a scattered group of browsers a little closer and the result is that we get to enjoy dealing with fewer and fewer bugs.

While your average Joe web developer may have dug around for hours for this issue to no avail, I must say… I thought it was nice to face such a subtle issue rather than being forced to use some crazy IE specific hacks like for legacy IE.

Opera 11 in OS X

mac-browser-comparisons

This is a post that I started a couple of months ago, but finally just got around to revising (since Opera 11 has since been released) and finishing. Hopefully its all in tact. ;)

Being fairly new to Mac OS X, I was excited to install Opera and see how it compares to the default browser Safari as well as others such as Firefox and Google Chrome in terms usability and appearance.

While I hadn’t used Mac OS much since version 9 and then briefly OS X (with my old iBook before it died), I did remember that Opera didn’t exactly have the most elegant user interface. Nor did most other third party web browsers that I tested at the time. Then again, OS X wasn’t as refined then as it is now either. Keep in mind, these are my opinions and you are free to have your own. ;)

I was happy to find that Opera seems to have the most natural feeling user interface when compared to Firefox and Google Chrome, using Safari as the standard since most die-hard Mac users are likely familiar with it the most.

While I didn’t capture Safari in a view where the tabs are visible, the image above is a decent comparison of the browsers’ default address bars and navigation buttons.

As you can see, the buttons, address box and search box in Opera mimic those found in Safari quite well and are not much of a change at all for any ex-Safari user. The tabs used in Opera are also very similar to those found in Safari (pictured below), with the most significant exception being that they are flipped vertically and placed above the address bar (in Opera) rather than below (like in Safari).

While some people may prefer Firefox or Google Chrome over both Opera and Safari, the point remains that their designs are inconsistent with the overall look and feel of the OS in general. That’s not to say that Opera doesn’t have some inconsistencies of its own. There are a few of them, but most of what I’ve found are minor detail tweaks that are needed to perfect the skin.

Just to mention a few things that are stand out to me, the “New tab” icon size should be decreased slightly, retaining the Opera style while removing the unnecessary bold touch. If you compare this button to the same button found in Safari you’ll notice that Opera’s approach is a bit too bold and that changing this makes it more elegant looking (in my opinion of course).

The borders for the navigation buttons, address box and search box should all be slightly adjusted to match the colors used for these in Safari. There are slight inconsistencies among these, with disabled button borders being darker than enabled button borders.

Another inconsistency with Opera is that text boxes in the address bar are not highlighted with a blue glowing border when they are focused…as they are in Safari, Firefox and Google Chrome. Its difficult for me to see if this is advantageous or simply an oversight, however, the “pro-integration” side of me certainly thinks this should be fixed to match the behavior of other browsers in OS X.

Various icons throughout the user interface need to be desaturated to remove color for consistency. An example of this can be found in the address box with the drop down icon. If you look close, the drop down icon is actually blue whereas other similar icons, like the drop down icon in the search box, are gray scaled. This is also a bug I’ve seen in the Windows and Linux skins, but the OS that demands attention to detail is likely the one that this is most noticeable on.

The Speed Dial page, though it was “invented” before the other spin-offs, now uses a darker background that makes it feel a bit more familiar to Safari’s implementation. I find this to add to the integration effect, whereas previous Speed Dial background images felt out of place. On the other hand, Opera doesn’t boast comparatively appealing 3D thumbnails or features to those found in Safari. Instead, the Opera Speed Dial packs in a redundant search box and no immediate method of searching through your history (visually at that!) or displaying your top visited sites automatically.

With a default Speed Dial tab open, knowingly or not, you’re looking at three different ways of searching the Internet…all with the same available list of search engines. You can search from the address bar by simply prepending your search terms with a specific search engine “keyword”, from the dedicated search box in the address box or from the additional search box in the Speed Dial. If I had any influence on this design, I would remove both dedicated search boxes and make the address box smarter and more visually suggestive of performing a search when it is in use.

While I’m suggesting changes to the Speed Dial tab, why not take advantage of Opera’s ability to generate thumbnails of pages to give the user a visual of the pages they are searching through just like Safari is capable of? With the ability to generate these thumbnails already, there is no reason why Opera shouldn’t implement a similarly more appealing visual search of previously visited sites.

As I said before, all browsers have their problems with UI design and integration, especially in Mac OS X. Of the available browsers for this platform, the one with the most features and the best OS X integration is far and away Opera 11. The performance improvement isn’t bad either, with my test results showing Opera 11 beating out Safari 5.0.3 easily in the SunSpider benchmark. You can take my opinions with a grain of salt if you wish, but you should undoubtedly give Opera 11 a spin if you haven’t already!

UbuntuForums.org Site Makeover via UserJS

40915_before

A while back there was a neat little styling script being passed around that tuned the Ubuntu Forums to match the new official designs a little more closely. While its not official and no where near a perfect solution, it does dramatically improve the appearance of the forums overall.

Before

After

To use this, all you have to do is download and install the Stylesheet or UserJS file and configure it in your browser! I’m using the UserJS version, but you may prefer the other. Either way, enjoy!

Sputnik: ECMAScript 3 conformance test suite

An experimental plot to illustrate how the latest stable browsers compare.

Today, The Chromium Blog has officially released their ECMAScript 3 conformance test suite in a form that is more friendly to test in your browser. The test contains over 5,000 tests (currently 5,246) and continues to grow!

The Chromium Blog has also posted some initial results among the top web browsers for Windows (emphasis is mine).

In this example, when running Sputnik on a Windows machine, we saw the following results: Opera 10.50: 78 failures, Safari 4: 159 failures, Chrome 4: 218 failures, Firefox 3.6: 259 failures and Internet Explorer 8: 463 failures.

An experimental plot to illustrate how the latest stable browsers compare.

Putting that into terms of 100% conformance rates: Opera 10.50: 98.5% successful, Safari 4: 97.0% successful, Chrome 4: 95.9% successful, Firefox 3.6: 95.1% successful and Internet Explorer 8: 91.2% successful.

Running the test myself in the latest Opera 10.50 snapshot for Linux (Build 6242 ) I’m seeing a solid 77, proof that Opera 10.50 is progressing still!

As explained in their post, the goal of this test is not related to Javascript performance in terms of speed, but in terms of conformance to the spec. Ideally all browsers would be in the center of the bullseye, meaning they all conform and behave (nearly) identically.

The Sputnik tests have been released as an open source project, so if you’re interested in providing conformance test cases to improve the future web..now is a perfect chance to get involved. ;)

To run the test yourself or learn more about it, visit: http://sputnik.googlelabs.com/

Pandora Internet Radio + Last.fm Scrobbling

pandora

Recently I started using Pandora Internet Radio again (I hadn’t used it in ages) to stream various genres of free radio tunes online. Pandora has a wide selection of genres to choose from and comes as a free and a premium service.

pandora

The free service is all I’m looking for and I’m willing to wait for short advertisement breaks from time to time. If you aren’t patient enough for the short pauses in your tunes or just utterly hate advertisements then you can get the premium service for just $36 a year. This is actually a very affordable deal when you break it down to only $3 a month or just $0.75 per week, especially if you use it regularly.

There are plenty of other free or pay for Internet Radio services or services that just let you pick tracks specifically to listen to. If you interested in those then take a look at Slacker, Dora.fm, Deezer, Napster Web Radio, AccuRadio, iLike, Blip.fm or even streaming from the select tracks that are available at Last.fm! There are many others available as well, but for now I’ll only get into Pandora. ;)

I’ve been using Last.fm for nearly two years now scrobbling tracks from my computer via Windows Media Player and Rhythmbox in Ubuntu. The list of audio players that now support scrobbling to Last.fm is far to long to post here, but if you find one that won’t scrobble by default then chances are someone’s written a plug-in to do just that.

One plug-in, or add-on/extension rather, that I recently came across is called LastFM Firefox Extension. This is a nifty little extension that allows you to scrobble tracks from various listed services with Pandora being one of them.

last-fm-firefox-extension

After installing the LastFM Firefox Extension you’ll notice that it ties in nicely with the other extension icons you may use frequently (pictured above is Firebug, Greasemonkey, LastFM Firefox Extension).

You can get a quick glance at the currently playing song without ever leaving your current tab or having to scroll through tabs to find it in the tab title. Right from the icons you can Favorite or Heart the tracks you like. This will favorite them automatically on Last.fm for you rather than making you manually go to Last.fm to do this. You can also tag songs with any tags that you feel fit that specific song using the Tag icon (I personally haven’t found a good reason to use this yet, but you may know of one!).

To get started with this extension, it currently comes in two flavors: Stable and Beta. I don’t typically promote Beta software, but in this case, you’re far better off using the Beta rather than testing your hit or miss luck with the current Stable.

The steps to get this extension aren’t drawn out very well without a bit of digging, but I’ll guide you through:

  • Login to your Last.fm account and join the LastFM Firefox Extension group (this is mandatory).
  • Depending on your luck you may be forced to wait up to 24 hours before you’re granted permission to install the Beta version. It’s well worth the wait (1 day isn’t that big of a deal is it?).
  • After joining the LastFM Firefox Extension group on Last.fm you will need to download the Beta version from the official extension page. It may ask you to verify that you are authorized. This just means you must be in the group on Last.fm and you probably need to of been in the group for 24 hours or more.
  • Once you get the extension installed simply go to Tools -> LastFM and enter you credentials so it can scrobble your tunes!

Depending on when you come across this post, LastFM Firefox Extension may or may not still be in Beta. Feel free to use the current stable version if you prefer to avoid Beta software. Enjoy scrobbling those tunes!

Flickr: Backing up my photos

You know me. I’m always up to something on the computer. I can’t remember if I blogged about this a long long time ago or not, but I had a hard drive go bad. ;)

I had to “undelete” about 300GB of data ranging from several years of irreplaceable family photos to website backups and database backups to my music collection to VHS family videos that I had been in the process of converting to DVD, etc.

To say the very least, it was a horrible nightmare. I thought I had lost all of the family photos that I had been archiving for so long and even had organized by picture dates in folders and such.

Well, fortunately I was able to get about 80% of the data back off of the hard drive that went bad and store it all on another hard drive that I had at the time. The other 20% was basically expendable data that I could replace or was honestly just wasting space and wasn’t worth the effort of spending more time to recover.

I did manage to get most all of my photos back, however, I was not about to go through and try to date each and every photo again. Luckily for me, I had already done this and tagged them in Flickr and as it turns out you can use a Firefox extension to download all of the photos in your Flickr account (this may be limited for non-pro users) and it stores them in the appropriate folders based on the albums and tags that you apply. :D

This great extension is called Firefox Universal Uploader (fireuploader). I’ve actually used it in the past to verify that it worked as I needed it to, but I hadn’t actually used it dependently until now. It’s been around for a while and I’m sure that if you Google it you will find plenty of reviews and how-to articles.

I won’t cover how to use it, because it’s actually very simple. If you do need help then just Google it or see if it’s mentioned on the extension page. :P

I’m well on my way to backing up all of my old photos again and even organize my new ones into the collect. For a while I had just been uploading to Flickr and didn’t really store the pictures I had taken since I knew I was going to eventually just download them all into an organized group of folders.

If you have a large collection of important family photos then you should also invest in storing your photos online in places like Flickr (free 100mb/month but only the last ~200 photos are accessible..or..Unlimited Pro account for $25/year) or even just using Gmail to store them with GPhotoSpace for free.

Another thing that I’m doing now is using two separate storage devices to backup my photos and other valuables and synchronize them across machines so if I lose one then I still have the other.

If there is one thing that I’ve learned about storage, it’s that hard drives can and will go bad and typically with bad timing so it’s best to stay on top of your game and keep everything backed up all along the way. ;)

Pushup: Pushing Up The Web

1up

Today I came across an interesting web site with the goal of keeping people notified when their web browsers are out dated. It’s called Pushup.

It’s a simple project and it’s something that you install on your website so you yourself can make a difference online.

In short, Pushup is a simple javascript file (images and css included) that detects the browser bring used when you visit a web site using it. After detecting the browser and browser version it does one of two things:

  1. If the browser is outdated: It will display a simple and elegant message notifying the user that there is an update available to the browser they are using and even include a link to the download page.
  2. If the browser is not outdated: It will stop the script and the visitor will see nothing.

You can download a compressed file containing the javascript, images and css from the Pushup homepage. After that it’s as easy as adding these lines to the header of your web site:

<link rel=’stylesheet’ type=’text/css’ href=’css/pushup.css’ />
<script type=’text/javascript’ src=’js/pushup.js’></script>

Depending on your directory names you may need to slightly adjust those paths. Other than that it works immediately (clear your header cache if you’re serving cached files if you want to see it immediately).

Gmail: Server Error 502

gmail-502

Well, Gmail has been down for a while today. I’m hoping it will come back up pretty soon, but if you’re also getting an Error 502 message then you may be waiting for a while as well.

I did a little research (google is your friend..unless it’s Gmail with a 502 message, haha) and it looks like it happens fairly often to people. One person reported not being able to login for up to 4 days!

I also read that sometimes logging in with a different browser will temporarily fix the problem, but it didn’t work for me with Opera, Firefox or Internet Explorer.

Hopefully everyone else is having better luck.

UPDATE: It appears that the Gmail outages were indeed as wide spread as I had assumed. Webmonkey.com even covered the issue in their blog (hours after I released a post about it, haha) and got the following statement from Google on the issue:

Since about 2 p.m. Pacific Time today, many Gmail users have been unable to access their email. We are very sorry for this interruption in service. The issue is being caused by a temporary outage in the contacts system used by Gmail which is preventing Gmail from loading properly. We are starting to roll out a fix now and hope to have the problem resolved as quickly as possible. Even though you may not be able to get to your inbox right now, your mail is safe, including new incoming messages.

We will post an update in the Gmail Help Center ( http://mail.google.com/support/ ) when more information is available.

Gmail seems to be back in order now and apparently came back online around 8pm EST. Hopefully no one is still affected by the outages.

CSS: More on Acid Testing…Acid3 Test!

acid2A while back I blogged a piece on Internet Explorer and Web Standards. Well, I’m back at it! Only this time I have some good news and some disappointing news.

irst off, the good news is that Internet Explorer 8 is rumored to have passed the Acid2 Test, however, Internet Explorer 8 has not yet been release to the public in any form and this rumor is based on internal testing. No actual proof is available to the public until we get to test this future release ourselves. There is, however, a screenshot posted online to further support the statement, but I would still like to see Internet Explorer 8 perform. ;)

On to the on-topic content, which also contains the bad news. :P WebStandards.org recently officially release the Acid3 Test to the public! The test has been available all along the way (the test itself took some time to develop) and I checked it out from time to time while I was waiting, but testing an incomplete test isn’t really testing at all.

I was surprised when I first saw the Acid3 Test that it didn’t have anything really comparable to the smilie face as seen in the Acid2 Test when rendered properly. However, a lot of work and code has been put into this third Acid project and it is an intensive test for all browsers! I was glad to see that Opera was the leading browser when it comes to the Acid3 Test. Although Opera currently fails the test, they achieve a score of 60/100. I ran the test in several other browsers to compare the results and here is what I found thus far:

  1. Opera 9.5x (weekly build): 60/100
  2. Firefox Minefield (nightly build): 59/100
  3. Firefox 3.0b3pre: 57/100
  4. Firefox 2.0.0.10: 50/100
  5. Opera 9.25: 47/100
  6. Safari 3.0.4 (523.15): 40/100
  7. Internet Explorer 7: 13/100
  8. Opera 8.54: 2/100

It’s a neat test (not as visually cool as the Acid2 Test)! I recommend that you test your browsers with the various Acid Tests every now and then to keep track of how well they are actually doing their job and following web standards! Please let me know if you see any different results or if you have results for versions that I wasn’t able to test!