Opera

Problems with attributes not working in IE and Opera?August 30th, 2010

So, what did I do with my bank holiday weekend? I was intrigued by some odd Opera and IE behaviour — that’s what

I was presented with a site whose styling wasn’t working for certain tags. It was an odd one. I thought it might be an absolute positioning bug, but testing was bringing up nothing – why on earth would simple CSS styling, nothing special, fail completely in Opera?

Then I took a closer look at the source — and something caught my eye. There was some malformed HTML:
<h1 title="test""style="background-color: #ccc">Test</h1>

Gotcha! Removing that innocent looking multiple quote fixed the problem. But I still wasn’t happy. Browsers should recognise and fix badly formed HTML, no? It’s not like a closing tag was completely missing. So I made a basic HTML template with little more than the h1 tag you see above, and just enough HTML5 to make it validate.

Then I played around with it. What happens if I add a space?
<h1 title="test"" style="background-color: #ccc">Test</h1>

That fixed it. Hm. Why on earth would the lack of space break things? Lacking a space is completely fine in both HTML and XHTML. Let’s remove the space again, and test some more. What if I replace the rogue ” with another character – say $?
<h1 title="test"$style="background-color: #ccc">Test</h1>

Wait — that’s a turnout for the books — it now breaks in Chrome. Then it dawned on me. If I replace that dollar sign with a normal alphanumeric character — the character ‘a’:
<h1 title="test"astyle="background-color: #ccc">Test</h1>

That’s it! Without the space between attributes, Opera and Internet Explorer are treating “style as the attribute, with Webkit and Gecko being smart and removing the extra quote. Add the space, and Webkit does the same. Obvious when you think about it, isn’t it?

So that’s what I did with my bank holiday weekend. What did you do?

Tags: , ,
Posted in Code, Web design | No Comments »
Permalink

Review: Opera 10 alphaJanuary 16th, 2009

A couple of months ago Opera released the alpha release of the latest version of their web browser. Among the touted updates are:

  • Updated rendering engine with better standard support and faster speeds
  • Inline spell checking
  • Web fonts (a way of embedding fonts using CSS without resorting to image replacement tools
  • CSS transparency
  • More CSS3 support

I’ve never had any problems with Opera in the past; I’ve never been a fan, but I’ve never felt it was a bad browser. However, having played around with Opera 10 for a bit, I can’t say I’m very impressed.

Despite what they’re saying, I actually found the new rendering engine appears rather slow. I’m not sure what it is that gives this impression (obviously they’re not going to say ‘fast engine’ if it’s not), maybe I’m just too used to Safari.

Something else that I’m too used to in Safari is the chrome itself and lack of smooth scrolling. I’m sure this doesn’t bother current Opera users, but I would find it too irritating to start using the software permanently (in fact, it’s the reason I stopped testing Opera 10).

What I also didn’t understand is a dashed horizontal line appearing across the window where the fold was when I scrolled down occasionally. If anyone has any ideas what this is, then please let me know!

It may seem that I hate everything about Opera now, but that’s not quite true. I can’t remember if it’s in Opera 9, but I like the autocomplete from the history. Unlike Safari which only completes the entire URL, Opera will complete from anywhere within the address. So if you type example.com and have subdomain.example.com in your history, the latter will also appear.

I’m sure Opera 10 is a big change, especially for the rendering engine. However I’m just too used to Safari to be able to change the browser that I use. There are some important and useful updates, but even with these I still can’t really see Opera as anything much more than “just another web browser”.

Tags:
Posted in Reviews | 2 Comments »
Permalink

6 common HTML errorsJanuary 9th, 2009

A recent study by Opera has found that only 4.13% of websites are valid. Although admittedly sometimes writing invalid HTML can’t be helped, there are many errors that can be easily avoided. These are:

Using outdated tags and attributes

Over the years, W3C have depreciated a number of HTML tags (such as <center> and <u>) and tag attributes; stuff that can be better done with CSS. However, many people forget to update their HTML (or a WYSIWYG editor uses these depreciated tags), and so they end up in websites anyway. Sometimes using CSS doesn’t quite cut it, and the author has no choice but to use depreciated tags and attributes.

Using the incorrect tag

This won’t throw up an error in the validator, but is certainly incorrect HTML. It seems loads of people don’t realise how much HTML and CSS is actually out there: there’s definition lists (for question/answer type lists), css for better form and page layout (rather than tables), more table tags than the usual column/cell tags, and six different header tags (which shouldn’t be used for their typography!). If you use the correct semantic HTML, it will vastly improve site accessibility and SEO.

Not using HTML entities

Certain characters, such as &, <, >, and £ need to be converted to their entities. Again, this is usually down to poor WYSIWYG editors, or people who are unaware of this requirement editing sites. Not using entities isn’t usually the end of the world, especially if it’s a common character (such as the ampersand), but it may cause problems with foreign characters.

Using invalid HTML/XHTML syntax

In XHTML all tags need to be closed, even if it’s a self closing tag such as <br />. In HTML, not all tags need to be closed but a good number still do. There are other changes such as only allowing lowercase tags and requiring quotes in attributes. Often when converting from HTML to XHTML, these are missed, and sometimes can cause problems with the website not displaying as intended.

Also, sometimes you may forget to close your tag pairs. A good HTML editor will warn you about this!

Putting tags in the wrong place

Sometimes if you put a tag somewhere where the validator isn’t expecting it, an error will show. This includes not surrounding inline elements (such as <span> or <a>) with block elements, or putting other tags inside lists.

Not using the ‘alt’ attribute

I cannot stress how important the alt attribute is! It’s important not only for accessibility but also for SEO. If your image is purely decorative, still use the alt attribute but leave it empty (alt=”"), or better yet use CSS.

And there we have it, six HTML errors that I see a lot, although there are many more. It’s always good practice to run your site through the validator to catch any mistakes you make, to make everybody’s life easier!

Tags: , ,
Posted in Web design | 4 Comments »
Permalink

Web browsers: a rundownNovember 28th, 2008

With Google entering the web browser market, there’s now more choice for the user than ever before. But most users don’t even realise such a choice exists, and stay with the default choice in their operating system (Internet Explorer). So here’s a rundown of the most popular browsers out there, and what’s so good — and bad — about them.

Internet Explorer 6

This is what you’ll get by default if you have Windows XP. Now eight years old, IE6 is one of the oldest browsers out there. It doesn’t follow standards properly (and doesn’t follow the very latest standards at all) and has many security problems. All IE6 users are urged to upgrade to IE7.

Internet Explorer 7

IE7 comes with Windows Vista, and is the current version of the Microsoft browser. Improvements over IE6 include tab support, better font display, and better security. Although not as good as other browsers, IE7 also supports standards better than IE6.

Internet Explorer 8

Not yet released (it’s in the late stages of public beta), but Internet Explorer 8 is the upcoming version, with a release planned vaguely soon. I’ve been playing around with it this week and I’m very impressed. Improved features include a better address bar, better search bar, and improved crash recovery (so improved, in fact, you barely notice anything’s crashed)

Firefox

The most popular Internet Explorer alternative. Firefox is an open source browser, which means that it’s free to download and use, anyone can contribute to the code, and anybody can create a plugin for the browser.

Safari

Safari is to Mac OS what Internet Explorer is to Windows. That is, it is the default browser for Macs. Built on the very standards-compliant Webkit engine, it’s very quick and very good looking. Safari is now actually available for Windows, but I agree with those who say that it looks slightly out of place: it has the look and feel of a Mac OS application but inside the Windows look and feel operating system, so it does take a little getting used to.

Safari is also the browser included in the iPhone, which means you get the real web, and not a stripped down WAP-enabled where-the-hell-did-all-the-pictures go web.

Opera

Not many people will have heard of Opera, and to be honest, nowadays it’s nothing to phone home about either. Just like Safari, Opera is available for mobile devices, but other than that it’s pretty much “just another browser”.

Google Chrome

The latest entrant to the sardine can known as the web browser market. Chrome uses the same engine as Safari (Webkit) behind the scenes, but with a lot of improvements that many current browsers don’t yet have. These improvements include running tabs as different “processes” which effectively means you have more than one version of chrome running (so it’s better when it crashes), a better address bar which includes suggested search results and previously visited sites, and a default homepage which contains your most visited site.

Chrome is still very new to the market and has little market penetration (current figures range from 1-5%), but some commentators believe that Chrome will eventually do well.

Which one to choose

So, the question to ask now is which one to choose. Well, personally I say nowadays you can’t go very wrong. With the release of IE7, all browsers are at least vaguely standards compliant (which is the main thing) and most browsers are now decent bits of software.

This renewed competition has been a very good thing in recent years, with many developments being made. All of the browsers now have their pros (and, of course, their cons), so my advice to anybody is to try out all the different browsers for a bit and see which one suits you the best. Afterall, there’s no harm in it.

Tags: , , , , ,
Posted in Web design | 2 Comments »
Permalink

Categories