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.

What do you install in your Ubuntu?

I’ve been keeping lists for a few years of the applications that I install every time I do a fresh install of Ubuntu. I recently made a new list for Ubuntu 11.10

  • Cheese
  • Chromium Web Browser
  • CompizConfig Settings Manager
  • Dropbox
  • EasyTAG
  • Enable Commercial DVD Playback
  • FileZilla
  • Geany
  • Opera Web Browser
  • RapidSVN
  • Spotify
  • The GIMP
  • Ubuntu Restricted Extras
  • VLC
  • Wakoopa

The applications that I install haven’t changed a whole lot over the years, but it leaves me wondering what applications make the cut for others!

 

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/

Google Chrome OS

google-chrome-os-cartoon

We’ve all heard the rumors about Google secretly building an operating system…or was it just my imagination? ;)

Now that the news about Google Chrome OS is out, I’d like to be the first to start a few new names for the operating system.

From the Unix side of the naming ideas I come up with Google ChrOS which would be pronounces Google Crow-S (similar to the idea of BeOS). It could be shortened to read GOS, making it “short and cool” like Mac, but it just doesn’t have the same cool ring to it. Or how about Google COS? Or GhrOS?

I’m not a big fan of the current name Google Chrome OS. Some would say that this is a very Mac naming system, but I think Google OS 1 would have been perfectly fine. Even if Chrome is later evolved to a point in the operating system that later barely resembles Chrome as we know it today it could still continue with this naming system as Mac OS did with 8/9 and then X which was completely different.

News of Google Chrome OS has been spreading like wild fire through my Google Reader feeds and even via Twitter reaching at least 6th place on Trending Topics.

With Google’s experimental project called Native Client (NaCl) in the works, it appears that Google is attempting to do something similar to what Microsoft attempted to do ages ago with ActiveX. Where Microsoft has (in my opinion) failed, it appears that Google’s Native Client may succeed at allowing support for web browsers to natively execute code for a deeper integrated position with…Google Chrome OS.

With all of this news about Google finally graduating their entire suite of web apps (from what seemed like and eternal Beta stage to what is now considered final and safe for public usage) it seems all too clear that they have an evil plot to take over and dominant the PC world.

The general idea of Google Chrome OS is similar to what I have been want to create for nearly two years now. Don’t get me wrong, I didn’t originate this idea, but then again neither did Google. ;)

Basically, Google will be using the Linux kernel to start up and run in the background and to handle hardware and software interactions. That is all in the background, things you won’t see all that much of.

What you will see is that when you turn on your computer, instead of seeing the dominance of applications in the sense of executables, your applications will be web based applications that integrate nicely with the rest of the system.

In fact, if Google is able to implement this operating system as I would love to have been able to do myself (had I of been able to of found the time) then it will integrate so tightly with the web applications that you will (hopefully) not notice a difference between the two.

This is important for any operating system. The sense of integration is clearly important. Take a look at Mac OS X for example and their strict code of proper layout and design with a balance of clean and elegant user interfaces. If Google Chrome OS is able to bring this level of integration from the web and merge it with the general set of tools and applications provided then it just may be a success.

With so much of our time being spent on the web already, will it really be that difficult to make a move to a web based operating system?

Several tools are also available straight from the web, just proof that the web is the future! Take this web based screen recorded for screencasts provided by Screenjelly!

You can watch most anything video-wise from the web already! The one thing that I’m really waiting for is for large amounts of storage in the clouds for a super cheap price!

Just a neat little cartoon to leave you pondering. :)

google-chrome-os-cartoon

Google Chrome: First Look at a First Release

Details regarding Google Chrome, which if you haven’t heard yet is Google’s new web browser, were recently leaked through a comic that Google released to a selected crowd of people and then the the world when it was leaked online.

The comic images show many different features of the Google Chrome browser and help to explain what’s different about Google’s browser compared to other browsers that are already available. It’s worth a read and you can read it here.

After refreshing my browser for nearly an hour, Google’s Chrome web site finally became live and I jumped at the chance to download this brand new product and give it a review.

Well the review will come shortly, however, I will go a head and reveal some screenshots of the browser and a first look response: shockingly impressive, simple and very stable!

If you want to download Google Chrome and try it for yourself then just navigate over to http://www.google.com/chrome and download and install away. Google Chrome is currently only available for the Windows platform, but Macintosh and Linux should be available soon!

Google makes a web browser: Google Chrome

Although it was rumored for a long while, there were plenty of people doubting that anything would ever pan out.

Google has released a few details to the new browser in their official blog. Many people have given the rumored browser the name gBrowser, however, Google seems to think the official name should be Google Chrome. Regardless of the name, I think we are all excited to see what this browser will have to offer!

According to Jeff at the Big Blue Ball, Google will be releasing Google Chrome for the Windows platform today!

Google is getting their fingers into everything these days, and the latest foray is a new web browser called Chrome. According to the official Google Blog, Chrome will be available for download on the Windows platform beginning sometime Tuesday, September 2.

Google Chrome is built on top of the Webkit project so standards support and compatibility should be rock solid from the start.

After the initial release in Windows, Google Chrome will be released in versions for Macintosh and Linux.

I’m excited about more competition coming to the table to push and progress the web! I hope everyone understands what this will change!

Stay tuned for my thoughts and a review of Google Chrome. Until then you can read the comic strip that Google posted a link to in the Google Chrome blog post. I’ve taken the time to post the comic here, however, all work done in these images has been done by Google and I am only posting the comic here.

UPDATE:
To keep an eye on Google Chrome and test it as soon as it is released, point your browser to the following address and refresh as frequently as you wish. The link should become live and switch from the current 404 to the product page with a Windows download link. ;)

http://www.google.com/chrome

In the meantime, if you’d like to learn more about Google Chrome before it is released you should head over to the entry that is already in place at Wikipedia.

UPDATE 2:
Google Chrome is now available! Download it now! I’ll be posting some screen shots shortly. Screen shots are posted here:
http://www.kyleabaker.com/2008/09/02/google-chrome-first-look-at-a-first-release/