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.

Submitting Anonymous Usage Statistics

Banshee Media Player Usage Statistics

Being a software developer myself, I tend to pay attention to application functionality and options a little more than the average end user. I’ve noticed that over the last few years when I encounter an option to ‘submit anonymous usage statistics’ I gladly and immediately enable it.

Knowing that you can gain valuable information about the way your end users are using your product, it makes sense for a software developer to include this option and frankly I’m baffled that its not available in most all applications.

I’d like to use this post for two reasons:

  1. To encourage you and others to consider enabling this option in order for developers to get the accurate information that they need to make their product even better!
  2. To maintain a list of these options in various applications that I stumble upon so others are aware.

As I gradually increase the number of applications, feel free to point out applications that I’ve missed and I’ll add them to the list!

Application List:

 

Adium

 

Banshee Media Player

 

Eclipse

 

Google Chrome

 

Google Drive

 

Google Music Manager

 

Opera

 

Ubuntu Software Sources

 

Google Music Manager

 

 

Unity Opera!

Unity Opera Tab Count

With Unity in the recent spot light and a little free time on my hands, I decided it was time to dabble with the Launcher API. What better combination that my two favorite pieces of software: Unity in Ubuntu and Opera!

With my Unity Opera script, you’ll be able to get extra functionality for Opera by simply downloading a script and adding it to your Startup Applications list. No technical modifications necessary!

The Launcher API provides four features at the moment: Count, Progress, Urgency, Quicklists.

At the moment I’m only able to implement functionality for three of these, with the exception being Progress. In its current implementation, Unity Opera has the following features:

Count

The total number of tabs you have open appears on the Launcher icon and is updated in real time as you open and close tabs.

One item to note here is that Opera’s Private tabs are not included in this tab count. Since information about these tabs and their contents are not stored anywhere on your computer, Unity Opera has no way of discovering them.

Progress

At this point in time, the progress functionality for this script is not available. Until I find a way to programmatically determine download progress in Opera, I will not be able to implement this.

If you have any information regarding a way to implement this feature then please let me know!

Urgency

When browsing the net, not every link you click on is from inside the web browser. Sometimes you click a link from an instant message, mail client, Gwibber, etc. This is where urgency comes into play.

Typically clicking these links automatically opens the tab in your browser, but it doesn’t always pull you’re browser into focus. When this happens, you may not know which browser the link opened in or if clicking it was even successful.

When Opera is not in focus and a new tab is opened, the Opera icon in the Launcher now enters urgency mode and wiggles onces. An urgency highlight is also applied to the icon and a small attention reminder in the upper left corner until you focus Opera again (this clears the urgency setting).

Quicklists

Previously I shared a tip on how to customize your Quicklists for Opera. That method meant that you had to manually open and edit the desktop file.

This is no longer the case, as these features are already built into Unity Opera.

On top of that, your Speed Dial items are also appended to the Quicklist, making your life that much easier! ;)

If you use Opera’s built in Mail client, also known as M2, then you will see an Opera for Mail, which is intended to open M2 directly. At the moment, this feature doesn’t work as intended, but hopefully in due time it will.

Download Unity Opera

Unity Opera is written in python and can easily be updated and maintained. I suggest you save and extract it to your Home directory and use it there, but you are free to place it anywhere you wish.

Download

Running Unity Opera

You can run Unity Opera in one of two ways:

1. The easiest way in my opinion is to simply add it to your Startup Applications.

To do this simply open your dash and search for ‘Startup Applications‘. Once there, click ‘Add‘ and fill in the blanks!

To run Unity Opera on startup, I place the script in my home folder. You can place it where ever you wish, but if you pick a place other than your home folder then you will need to provide a full path the script in your startup command.

An example of what I use is as follows:

python unity-opera.py

2. The other option is to open a terminal when you want to use this script and run the command above.

Options

This script has several options. For help and more information type:

python unity-opera.py –help

This script accepts two optional args:

1. Opera Channel: This is used for setting Unity Opera to run against regular Opera and the new Opera Next channel. By default, if you exclude this arg, Opera is set as the browser to run against. Examples of this command include:

python unity-opera.py opera

python unity-opera.py opera-next

2. Enable features: This is used to enable specific features. You can enable only basic quicklists [q], quicklists with Speed Dial entries [qs], tab count [c], urgency notification [u], and progress [p].

As mentioned before, progress is not functional at the moment, but I’ve built the script with this feature ready to include as soon as I find a way. ;)

This second argument requires the use of the first argument. Examples of this command include:

python unity-opera.py opera -qs

python unity-opera.py opera-next -qsu

Troubleshooting

If you experience trouble with this script, please try running it from a terminal to see if there are any errors output to the console. If so, copy and paste these in the comments below and I will take a look at them.

Quicklists for Opera in Unity

Opera Extended Unity Menu

Thanks goes to Jorge Castro and a recent post of his about Quicklists in Unity.

After reading his post and seeing how easy it was to add new Quicklist entries, I decided to give it a go with Opera.

As you can see, my efforts were successful, but there are many more list items you could add to customize Opera’s Quicklist to suit your needs.

Get It for Yourself

If you’re using Ubuntu 11.04 with Unity and want to customize this menu for yourself then just follow follow these simple steps.

1. Open a terminal and type the following (and enter your password when prompted):
sudo gedit /usr/share/applications/opera-browser.desktop

2. Scroll down to the bottom of this open file and paste the following:
X-Ayatana-Desktop-Shortcuts=NewTab;NewPrivateTab;NewWindow;Mail;

[NewTab Shortcut Group]
Name=New Tab
Exec=opera -newtab
TargetEnvironment=Unity

[NewPrivateTab Shortcut Group]
Name=New Private Tab
Exec=opera -newprivatetab
TargetEnvironment=Unity

[NewWindow Shortcut Group]
Name=New Window
Exec=opera -newwindow
TargetEnvironment=Unity

[Mail Shortcut Group]
Name=Mail
Exec=opera -mail
TargetEnvironment=Unity

3. Save and close the text editor. You may need to restart Unity or your computer before changes take effect.

Customize your Quicklist

If you’d like to add more items to the Quicklist, simply add a shortcut name for it in “X-Ayatana-Desktop-Shortcuts" and create a "Shortcut Group" for it.

A couple of things that I considered adding were Gmail and Google Reader so that they simply open in new tabs. I’m sure you can find other useful shortcuts to add or maybe even more Opera command line options!

Remove your Changes

If you don’t like the Quicklist items that you’ve added, all you need to do is open the opera-browser.desktop file and remove the lines that were added. Save, close and voila.

Conclusion

Quicklists are great, but they would be more useful with Opera if we were able to select from a list of open or recent tabs.

The new tab and window shortcuts that I’ve added are enough for me at the moment, but I would really love to see them added by default in the near future!

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!

But ours go to eleven…Opera 11

opera11-spinaltap

Opera 11 has been making a lot of buzz across the Internet today now that an alpha version has been released.

New in Opera 11 is support for the very much requested extensions! While there is currently a very limited selection of extensions available, I suspect this will quickly change. ;)

If you’re using Opera 11 already and you’re also using Ubuntu 10.10 with the Ambiance or Radiance themes, do forget to update you skin with my Ambiance and Radiance skins for Opera.

For those who are curious, you can find brief changelogs in the comments with the latest one being here.

If you’re not using Opera 11 yet and would like to, go get it!

Identify Opera With Your Linux Distro!

Before and after Opera user agent string.

If you’ve ever noticed your user agent string before, then you may have noticed that Opera identifies as running on a generic Linux platform. This can be a bit bothersome or annoying if you’re a Linux enthusiast like me.

Opera for Windows and Mac both properly identify the platform they are installed on, but Linux is a little more challenging due to the overwhelming number of distributions. You can easily adjust your user agent string to accurately reflect your platform and help promote both Opera and your Linux distribution when you browse and post online.

Before and after Opera user agent string.

To change this so that it reflects your specific platform, simply:

  1. Open “opera:config#ISP|Id” in a new tab.
  2. Enter your distribution in the blank box in the format “Distribution/Version”.

  3. Click the Save button and restart your browser.

This should successfully change your user agent from something generic like..

Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.6.30 Version/10.70

..to something a little more specific like..

Opera/9.80 (X11; Linux x86_64; U; Ubuntu/10.10; en) Presto/2.6.30 Version/10.70

Hope that helps! You can test your updated user agent strings in the comments below since they will appear above your comment. Or you can test it out at UserAgentString.com.

func20000 – how far does your UA get?

As a follow up to Hallvord R. M. Steen‘s outdated post (Wednesday, 28. November 2007), I’d like to point your attention to a gigantic performance increase in Opera!

I haven’t done in-depth research to find out when this improvement occurred, but I suspect it was with Opera 10.50-10.60 and the many JavaScript improvements that came along with these updates.

In my tests, I found that Opera went from a previous “top score” of 4998 to 16382! Doing the math that proves to be an increase of approximately ~3.28 times the performance in Opera 10.20 (my last posted result on his blog post). Here is what my testing line-up looks like:

  1. Opera 10.60
    - died when trying to call function 16382, error was “Maximum recursion depth exceeded”
  2. Google Chromium 6.0.423.0 (48614) Ubuntu
    – died when trying to call function 13059, error was “undefined”
  3. Firefox 3.6.3
    - died when trying to call function 3000, error was “too much recursion”

As you can see, Opera is leading the pack (is it really a surprise? :P).

What does this all mean?
Well, your guess is as good as mine, but to (reword and) repeat the topic question as an answer…I guess it means that Opera can out-depth other browsers in the level of function calls that they can handle.

If you look at the code then you might find it easier to understand, but basically..its like: a function calling another function…calling another function…calling another function…calling another function…(multiply that a few times)…calling another function to get to the final function. Recursion.

Is this something I will see while browsing the web?
I highly doubt you will see any depth calls to this extreme for a long time (if ever). My interpretation of this feat is that Opera has a unique ability to handle and process extreme recursion, which is a stressing task in itself.

If you’d like to test this for yourself, you can test Hallvord’s func5000.htm or you can test my func20000.htm.

If you’re testing func20000, download the zip, extract and simply open the extracted html file in your browser of choice! Share your results for other browsers if you wish! I’m curious to see the results from other browsers!

Ambiance & Radiance Skins and Speed Dial Backgrounds

opera-ambiance-maverick

While I’m waiting for Opera in Linux to improve further (its already pretty great!), I’ve decided to make a couple of adjustments to make the browser feel a little more integrated.

Get the skin!
I’ve created a simple script that extracts the installed default skin and modifies it with all in one quick run. This is very beneficial for me since I like to update my slightly edited skins by merging my modifications with the latest and greatest default skin with only a double click. ;)

The only change to the skin (thus far) is the tab bar background which now allows for a smoother appearance between the tab bar and window title.

Ambiance Skin

Ubuntu 10.04 Lucid Lynx
Install Skin (Opera 10.60+, updated 2010-12-16)

Ubuntu 10.10 Maverick Meerkat, 11.04 Natty Narwhal, 11.10 Oneiric Ocelot, 12.04 Precise Pangolin
Install Skin (Opera 10.60+, updated 2012-03-26)

Radiance Skin

Ubuntu 10.04 Lucid Lynx
Install Skin (Opera 10.60+, updated 2010-12-16)

Ubuntu 10.10 Maverick Meerkat, 11.04 Natty Narwhal
Install Skin (Opera 10.60+, updated 2010-12-16)

Previous skin versions are now available on page 3.

Get the Speed Dial backgrounds on Page 2!

I’ve moved them to page 2 since the main interest of this post is the on the skins.

Ubuntu 10.04 Browser Comparisons

While this is by no means a perfect test for comparing web browsers, I thought I might share my results from the latest browsers available for Linux and more specifically Ubuntu 10.04.

Your results may vary, however, the overall trend should be very similar. So take my results with a grain of salt. ;)

Processor: AMD Atholon(tm) 64 X2 Dual Core Processor 6000+
Graphics card: VGA ASUS N EN7300LE/HTD/128M
Memory: 2GB
OS: Ubuntu 10.04 x86_64
Form factor: Desktop
Borwsers tested: Arora, Chromium, Dooble, Epiphany, Firefox, Midori, Opera
Date: 2008-05-04

———————————–

http://sputnik.googlelabs.com/
Opera 10.53.6330
1. – 5165/5246
Chromium 5.0.396.0 (46318)
2. – 5112/5246
Epiphany 2.30.2
3. – 5060/5246
Midori 0.2.2
3. – 5060/5246
Firefox 3.6.3
4. – 4978/5246
Arora 0.10.2
0. – Unable to complete (Froze on 3746)
Dooble 0.07
0. – Unable to complete (Froze on 3746)

———————————–

http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
Opera 10.53.6330
1. – Total: 426.4ms +/- 18.1%
Midori 0.2.2
2. – Total: 455.0ms +/- 6.7%
Chromium 5.0.396.0 (46318)
3. – Total: 480.0ms +/- 20.7%
Epiphany 2.30.2
4. – Total: 514.2ms +/- 21.5%
Arora 0.10.2
5. – Total: 1852.4ms +/- 12.5%
Firefox 3.6.3
6. – Total: 2946.8ms +/- 9.7%
Dooble 0.07
7. – 3151.8ms +/- 10.0%

———————————–

http://service.futuremark.com/peacekeeper/
Chromium 5.0.396.0 (46318)
1. – 5492
Opera 10.53.6330
2. – 3575
Firefox 3.6.3
3. – 1603
Dooble 0.07
4. – 1268
Arora 0.10.2
0. – Unable to complete
Epiphany 2.30.2
0. – Unable to complete
Midori 0.2.2
0. – Unable to complete

———————————–

http://acid3.acidtests.org/
Arora 0.10.2
1. – 100/100
Chromium 5.0.396.0 (46318)
1. – 100/100
Dooble 0.07
1. – 100/100
Epiphany 2.30.2
1. – 100/100
Midori 0.2.2
1. – 100/100
Opera 10.53.6330
1. – 100/100
Firefox 3.6.3
2. – 92/100

http://acid3.acidtests.org/