Posts and Pages Tagged ‘browsers’

Cross-browser consistency Last updated:29 October 2010

Once upon a time there was a business that wanted a very simple website. So I built one as a small project. It had a few pictures and some text. I looked at it in IE7 and it looked OK. It was a first step into the web world for the business. The client was happy.

A year passed. The website started looking a bit tired. It needed some more pictures. So I rebuilt it, added more pages and a lot more pictures. I looked at it in IE7. It looked OK. I looked at it in Firefox as well. It looked OK. It didn’t look quite the same as it did in IE7. I found that if I used tables in the design, some (but not all) of the differences between IE7 and Firefox 3 went away. (Don’t start shouting until you’ve read the rest of this page….) I decided I could live with the differences. I didn’t understand why Firefox was getting it wrong though. The new website went live about 2 months ago. The client was happy. So were his customers.

For other purposes, for another website, I’d been learning a bit about “Cascading Style Sheets” – css to the initiated.

I happened to show the website to someone I was working with. Having previously been quite proud of it, I was a bit embarrassed – the site navigation looked a bit naff. So I made the navigation look like buttons. It was quite easy to do this using the css I’d learnt. So I extracted all the style into a separate css file. The page looked quite a bit better with the buttons. The client was happy. It still didn’t look quite the same in IE7 as it did in Firefox 3. I decided I couldn’t live with this any longer. I spent hours trying to understand this. As a result of this I learnt a lot about css. Every time I looked at the html or css I spotted something that could be done better, so I changed it. This became a fascinating journey into the world of modern web applications, or as my wife called it, an obsession. Where I could get it to work, I got rid of the tables I’d used. I got rid of some of the differences between IE7 and Firefox. I started to realise it was IE7 that was doing the unexpected things, not Firefox. I started viewing what I built in Firefox first not IE7 first.

I made the mistake of posting a question on a discussion board. In line with all website discussion boards everywhere, I didn’t quite get the answer to the question I asked, but I did get some comments about how the website was built, using lots of absolute positioning. I rebuilt the website using some suggested code off the discussion board to use floats and margins instead. It still looked pretty much the same to the untrained eye…..(not someone comparing using a pixel ruler).

Getting curious, I had a look at the website in Chrome as well. It looked the same as in Firefox. Hurrah. Then I looked in Opera. Boo. ¬†All the text was cut off on the right (EDIT: which I now realise was this problem, and nothing to do with margins at all). I took all the floats and margins back out. It looked OK in Opera then. I went to bed…..

In the morning I started again. I got rid of all the absolute positioning again. I did it in a slightly different way and it seemed a lot easier. I got rid of an extra line showing up in IE that was at the top of every page. The Home page looked identical in IE7, Firefox, Chrome and Opera. It was wrong in IE6 however. I fixed that. Now it looked the same in all of them. I centred the page and put a nice swirly background on. I looked through all the rest of the site. I noticed that the spacing around the horizontal lines was different in IE than all the rest. I fixed that as well. To do this I had to write a “hack” in the css so that IE would read one bit of css and everything else would read the rest.

Then I had a look at the page in IE5.5. Why? Because from the logs I could see one user using IE5.5. This turned out to be the client….. What a mess in IE5.5. Font sizes all too big. Like being shouted at. I found another hack that fixed this.

Finally, had a look at the site through Safari. And it looked…….fine! So, the site looked the same in all the likely browsers, and the unlikely ones as well. (I know, I haven’t tried IE8 yet.)

OK, here’s the moral of this story. The client likes the new swirly borders, although he won’t see them using IE5.5 and a screen resolution of 800 by 600. Otherwise the site looks pretty much the same as it did 2 months ago despite being completely rewritten. Nobody but me has looked at the site in Chrome or Opera. It’s probably still got some issues I haven’t understood yet. I know a LOT more about css and html. The web pages have still got some tables on them, which are debatably holding tabular data.

The client is still happy…

If you’re looking for some hints and tips on browser consistency then I’ve pulled together some more details on this page.

The lifespan of IE6 Last updated:29 October 2010

Read an interesting article this morning about the use of Internet Explorer. Specifically, the article suggests that now that IE8 is launched, users will migrate from IE7, but many who are still using IE6 will remain, to the point that IE6 will become more popular than IE7. Sound mad? Not really, because many corporate web applications were designed for IE6 when it was effectively the only browser available, and they won’t work with IE7. Larger companies tend to be intrinsically risk-averse anyway, upgrading a browser is low priority – my own experience certainly supports the argument.

A couple of sets of web stats highlight the issue. Looking at some stats from a large public sector website, 80% of visitors are using IE, of which 40% use IE6. This website will be frequently accessed by people at work. By contrast, one of the sites I run, which tends towards consumer usage, has only 60% IE users, of which only 15% use IE6

So the bad news is IE6 may live a lot longer than we might like…

New HTML5 elements and IE8 Last updated:29 October 2010

I was reading a discussion on a forum last week about HTML5, and thought I’d have a quick mess around with it to see what happened with various browsers. I created a test page using the new tags provided by HTML5 (<header>, <footer> etc.).

This page doesn’t display correctly in any browser that I tested (FF3, IE6/7/8, Chrome2, Safari 4, Opera 9.63 or even Opera 10 beta2), although FF, Chrome, Safari and Opera all display the <aside> element correctly for some reason.

I then applied display:block to the css for all the new elements and tried again here.

Slightly to my surprise the page looks fine in FF, Opera , Chrome and Safari. Slightly less surprisingly, it fails horribly in IE6 and IE7. The biggest surprise for me was that it looks just as bad in IE8. I suspect, on reflection, that the browsers that worked did so because of their treatment of unrecognised html elements, rather than their support for the new HTML5 elements.

HTML5_IE8HTML5_Opera

Here’s what it looks like in IE8 on the left (pretty much the same as in IE7 and IE6) and here’s how it should look in Opera 9 on the right. I have to say I expected it to be OK in IE8, given that’s the pretty much the newest browser I tested with. So much for HTML5 support in IE8…

Conclusion: being able to use even the simpler features of HTML5 looks a long way off…

The joys of IE6 Last updated:29 October 2010

IE6 logo

Find myself in an interesting situation at the moment – enforced usage of IE6 at work. Good reasons for this of course, one application used in this organisation will only work with IE6. Quite a common situation.

What’s interesting is what doesn’t work in IE6 – including two websites for web design agencies I was looking at last week. One of these actually said that their site didn’t work in IE6 and told me to upgrade my browser (I can’t), and the other one just broke (badly) in IE6. Another different site I viewed on the same day used transparent pngs, which aren’t natively supported by IE6. Update: Found another two web design agencies whose pages break in IE6 this week – and these were New Media Age Top 100 agencies as well.

Although I use IE6 at home, I use it exclusively for testing websites I’ve built to make sure they’re OK, so don’t normally come across so many issues.

Personally, at the moment, much as I’d like to ignore IE6, I don’t think it’s acceptable to do so. Excluding people using IE6 from using your website is equivalent to saying, in UK terms, that it’s unavailable in Scotland and Northern Ireland. Or, in US terms, unavailable to most of the people in California.

A song for the frustrated developer Last updated:29 October 2010

Came across this little song this morning. Very funny and very true……if a bit geeky.