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.

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!

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!

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/

WP-TwitterBadge v0.2 Released

After taking some time to track down a bug that seems to only affect Internet Explorer 6 (why on earth did I bother?) I’ve finally released an update that fixes the error.

After getting several comments about users experiencing errors with this plugin while using IE6 I finally gave in and patched the little bug. Why are they still using IE6?

…well, it works fine now…as far as I know. I’ve had a few people test it with no errors as well as myself, so hopefully if you couldn’t use it before it will work fine now.

To find out more about this WordPress plugin, go to it’s main page. You will find all released versions there (past and present) as well as a link to the official WordPress Plugin page. Feel free to leave feedback!

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).

Internet Explorer 8 Beta 2 Now Available

internet-explorer-8-beta-2-01

Internet Explorer 8 Beta 2 is now available for testing! If you would like to learn more about it’s release you can find plenty of information on the official release blog post.

If you would like to download and test Internet Explorer 8 yourself, you can find it here:
http://www.microsoft.com/ie8

You’ll find versions for 32- and 64-bit editions of Windows Vista, Windows XP, Windows Server 2003, and Windows Server 2008. In addition to English, IE8 Beta 2 is available in Japanese, Chinese (Simplified), and German. Additional languages will be available soon.

If you would like to see an overview of the new features implemented in Internet Explorer 8 then you can find them in great detail here:
http://blogs.msdn.com/ie/archive/2008/08/27/internet-explorer-8-beta-2-now-available.aspx

Enjoy the early notification so you can be one of the first to test out Internet Explorer 8 Beta 2!

UPDATE (2008-08-28 @ 12:38 AM):
Internet Explorer 8 Beta 2 passes the Acid2 Test! Reports were made back in late December 2007 that internal builds of Internet Explorer were passing the Acid2 Test, but now we have a public release that is passing.

On the Acid3 Test, Internet Explorer 8 Beta 2 scores a 21/100 with a notification at the top of the window stating that:

This website wants to run the following add-on: ‘MSXML 3.0 SP10′ from ‘Microsoft Corporation’. If you trust the website and the add-on and want to allow it to run, click here…

After running the “MSXML 3.0 SP10″ add-on, Internet Explorer 8 Beta 2 still only scores a 21/100.

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!

Netflix: Watch Instantly..Unlimitedly

netflixLately I’ve been taking major advantage of the Watch Instantly feature that Netflix offers to their valued customers! They have a fairly large selection of films that you can stream over the Internet and watch while you are waiting for your DVDs to be mailed to or from Netflix.

The only down side to the service is that it requires Internet Explorer and Windows Media Player 11. This may not be a problem at all for the vast majority of you, however, I’m a very proud Opera browser fan and on top of that my operating system is not Windows. I’m using Ubuntu, which means that I cannot install and use Windows Media Player 11 to view the movies online. Luckily I do have Windows XP installed on my laptop, so I can still boot up and take advantage of this feature on my mobile PC. It’s just not the same, though, as having your dual monitor PC running with a nice quality streaming movie from Netflix on the right and your favorite browser on the left so you can still browse the net.

It would be nice if they would either switch to a flash based player (which would allow streaming in any web browser and on every platform) or at least allow more plug-ins than Windows Media Player 11. I can patch the Internet Explorer requirement with some Javascript, but allowing alternative plug-ins would basically open this feature up to the world!

So far I’ve found a method to install Internet Explorer on Linux operating systems. The project is called IEs4Linux and is maintained by Sérgio Luís Lopes Júnior. The installation takes advantage of a program called WINE that is an open source implementation to the Windows API. In English, this means that it allows you to install and run programs that were made for Windows on a Linux or Unix based machine. The next step in getting Netflix to work on my Ubuntu computer is getting Windows Media Player 11 installed. So far I’ve had no luck. I’ve been able to bypass the “required” windows validation process, however, the installation encounters several errors that are preventing the whole process to work. Rest assured, I will get Windows Media Player 11 installed and be watching Netflix movies over the Internet soon!

Internet Explorer

Internet Explorer..we’ve all seen it develop over the years. Or have we? We’ve seen Internet Explorer release a new version of their browser from time to time, but how much are they really packing under the hood?

You’ll read reviews and cool new features online around Microsoft enthusiast sites, but how many of the new features and updates aren’t already available in an alternative browser? Internet Explorer 7 seems to be the new cool browser of choice among a very large percentage of web surfers, but why are they using it? Is it because of the built-in search box in the upper right corner? Is it the super cool new tabbed browsing? Maybe it’s just the shiny vista-like skin..? Or could it be that it is the most secure browser available?

Basically, all of those questions can be answered with a simple “No”. Many people just aren’t aware that there are better browsers…or to be a little less bias…alternative browsers that can do everything they need! I personally have been using Opera for all of my browsing needs for around nine years now. Around the time that I starting using Opera, Netscape Navigator was a popular choice. However, most people just stuck to what they already had installed, which was Internet Explorer.

acid2Quick facts: A man by the name of Håkon Wium Lie (who is now the CTO of Opera Software ASA) proposed Cascading HTML Style Sheets (CHSS) in October 1994. These style sheets were later used to test browsers compliance to web standards for the first time in 1997. The first test, which was called the Box Acid Test (a.k.a. Acid1 Test), was a simple case test used to help browser developers as they developed and implemented cascading style sheets and accepted it into the web. The next test and probably most famous of the two is know as the Acid2 Test. The purpose of this test was to push developers into implementing new features available through CSS. If a browser passes the test then the page loads fine and looks like a simple little smiley face.

This simple little smiley face is in fact a challenge to reproduce. The test is designed to make the results obvious. Either it passes or it fails. You will see a nasty looking face if it fails (hint: look at it in Internet Explorer here). You should check the Acid2 Test in different browsers that you have installed on your computer and decide for yourself if you want to use a product that has been left behind or if you want to switch to an alternative browser with equal or more features and much better web rendering. Personally I would recommend looking into the following browsers and giving them each a test drive:

The Opera browser has been known for years for it’s record of being the most secure browser available. You are much more likely to get a nasty virus from the web using Internet Explorer than you are while using a browser such as Opera. Opera was also a pioneer in the beginning of tabbed browsing days. Many other browsers saw the potential and jumped to implement the same thing. Opera was also the first browser to include a quick search box at the top of the window. Opera provides a light weight browser with the fasted speeds of any browser from almost every angle and some of the best web standards support. You can’t go wrong with Opera!Anyway, I hope you enjoyed this! Download some of these browsers and give them a try! Any of them are more capable than Internet Explorer. ;)