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!

 

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!

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!

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!

Eliminate Opera’s Address Bar Like IE9

internet-explorer-9

If you’re a fan of minimizing toolbar space and maximizing browser space, you might be interested in this short guide that explains how to make your Opera look just a little more like this (arrangement-wise).

While this isn’t a perfect solution, it will show you how you can customize your Opera browser to be arranged a tad bit more like the upcoming Internet Explorer 9 web browser. While you’re at it, you might consider installing an Internet Explorer themed skin as well. I’m only kidding. :P

Step 1

Hide the address bar. To do this, you simply need to right click on the address bar and select “Customize -> Appearance..” from the menu.

In the window that appears, uncheck Address Bar and leave the Appearance window open for the next step.

Step 2

Add the address box and preferred navigation buttons. To do this, using the Appearance window that you opened in Step 1, click on the Buttons tab and make sure that the category item “Browser” is selected.

In this window you will find back, forward, refresh, log in and home buttons (as well as several others). Click on a button that you want to add such as the back/forward combo button and drag it up to the right of the Opera menu button until you see arrows to drop it.

If you dropped the buttons just right then they should now be resting to the right of the Opera menu button. If they didn’t appear, try again or is they are placed incorrectly you can move them around or remove them via right clicking the button and selecting “Customize -> Remove From Toolbar”.

Step 3

Now the last thing you probably want to add is the address box. You can find this in the buttons category labeled “Browser view”. Drag and drop this widget where you want it as you did with the buttons before.

Feel free to experiment with other buttons and widgets. After you’ve finished customizing your browser’s layout, click OK to close the Appearance window. You are not finished!

Conclusion

As I said before, this isn’t a perfect solution and there are several problems present that I encountered while rearranging various parts of the browser.

The biggest problem I have with this at the moment is the lack of ability to control the width of the address box. The address box drop down is also very narrow which makes it more difficult to use. than before.

Most buttons, when dropped into this toolbar are sized much larger than the back/forward combo button which makes it difficult to create a clean interface. This is the reason you only see this combo button and the address box in the screenshot above. ;)

Its great to see that Opera is still the king of browser layout customizations, but there are still problems that need to be fixed before this can be used as a true method of mimicking IE9.

If you’ve got tips, post ‘em in the comments! I love getting feedback and suggestions!

Making Calls From Gmail

gmail-calling-02

If you’ve somehow managed to miss this one in the news then you must be hiding in one deep dark hole. :P

Here are some pictures for your entertainment. If you’d like to use this, you need to install the Google Voice plugin first and then restart you web browser.

Keep in mind that you need the plugin to do this (and obviously a microphone) and that you’ll be calling friends or family using a number provided to you by Google Voice (so they may not recognize it at first).

The best thing going for Google’s new calling feature (if you ask me) is that its completely free for me to call any phone in the USA. While this pricing may not be permanent, it should at least last through the course of this year (my source for that is linked somewhere up above :P ).