16 April 2009

IE vs Firefox

OK so some of you might know what IE is? It's Internet Explorer. Good good. That's the terms explained.

Well, I've often read that when creating any sort of website, blog, etc., that you should check your CSS, HTML, XML, and so on in all the browsers that your readers/visitors might potentially use. In short: I didn't do that. I use Firefox and automatically assume that other internetees will realise it is the superior browser and follow suit. But, recently something very strange happened that lead me to realise that I really should have followed that advice.

After installing the updated version of Firefox3, it started to play funny beggars; all the images, including thumbnails, have suddenly become blurred. Initially, I thought it was my own eyes playing funny beggars but no, it's been going on for over a week now so I finally googled the issue. It is real but the exact reason, and it's associated solution, seems rather elusive. If any of you are using the new Firefox3 maybe you can verify that you can see the blurriness too?

Anyway, so I just thought I would compare how my blog looks with the blur in Firefox3 vs IE7 and it turns out that, as expected, the images aren't at all blurred -- yay! -- but, I do have several issues with my CSS/HTML! Arghhh! Get rid of IE7 - it is the devil. In IE7, there seems to be;
  • No peek-a-boo navbar, infact, no visible navbar at all!
  • A black, offensive text header saying 'Gingerella' which I told the browser to neglect
  • No dotted seperator between my Twitter updates
Fortunately, those are the only bugs I seem to be able to find and maybe they are easily fixable but, I just have no clue how to fix them. Does anyone have any experience with this that could help me? That's either the image blur problem in Firefox3, the CSS issues in IE7, or both! I would really appreciate it.

Other than a cry for help -- and to advise you to compare how your blog looks in all browsers -- this post was pretty useless.

A not very happy toodles!

-----------------------------------------

EDIT 1: Woop woop! I fixed the Firefox3 blurry image bug.

One of the first things I read as the reason behind this bug was the Sticky Zoom feature; that is Firefox's ability to zoom in and out of a page by using the Ctrl + and Crtl - key combinations. I remember doing this recently so I guess that screwed it up.

So the solution:
  1. Open a new Firefox window
  2. In the address bar, type: about:config
  3. Search/filter for browser.zoom.siteSpecific preference name
  4. Double click on the preference to change its value to false (the default is “true”).
  5. Restart Firefox3
  6. Voila, all new pages are now reset to base normal zoom level
Please note: this may remove the page zooming facility.

I am still on the hunt for solutions to fix the IE7 bug(s). Wish me luck!

-----------------------------------------

EDIT 2: I have sort of fixed some of these IE7 bugs, plus some others I found along the way. Now, in IE7;
  • the ugly, black header that kept coming up in IE7 is gone! This is done by adding display:none; to the #header h1{} and #header.description{} sections of the template.
  • I have removed the peek-a-boo navbar altogether so now in Firefox and IE7 you can see that ugly great thing in silver all the time. But I know it's more important to be able to get back to the Blogger homepage than aesthetics.
But I can't seem to fix the missing border in the Twitter updates widget in my left sidebar. It probably still looks OK without it though.

IE7 also had some issues with the comment section and text/spacing having incorrect sizing, the favicon is missing and it doesn't seem to handle justified text too well.

See, IE7 just sucks!

8 comments:

  1. Pesky multi-browser support. I mainly use Safari, and the only thing I can't see are the dotted line separators in your Twitter feed, compared to viewing it through Firefox. I can't post comments using Safari either :( Error pops up.

    I have to load Firefox especially for you :P

    ReplyDelete
  2. Oh dear. I shall look into that and try and fix it -- Jen'll fix it for you -- so that you can comment in Safari. :D

    I've never actually tried Safari.

    ReplyDelete
  3. Ahhh that's because Safari is for Mac's and I, er... don't have a Mac.

    I couldn't seem to find any help on that problem.

    ReplyDelete
  4. i did not read your blog in FF before - so I did not have an idea that the very top bar (with the search is missing) and the dotted lines in the twitter too :)

    So for the dotted line i am not sure why but you have a style like this:
    #HTML2 LI: #35a7c3 0.5px dotted

    And in IE it apparently becomes:
    #HTML2 LI: #35a7c3 0px dotted dotted

    So if you change it to:
    #HTML2 LI: #35a7c3 1px dotted

    The dotted line comes back :)

    ReplyDelete
  5. Ging - you do not need Mac to use Safari these days - you can download one for Windows as well : http://www.apple.com/safari/download/

    ReplyDelete
  6. Wow! Thanks a lot Alex! I changed it and the border is now back in IE. Thanks again.

    So which browser do you use?

    Ohhh I didn't know you could use Safari with Windows, I shall have to try it out. =D

    ReplyDelete
  7. I know what you mean - you presume because you use something everyone else must do too.

    Im using Firefox 3 on mac and your site looks just fine to me ;)
    Firefox is better than Safari and IE (in my opinion) and for that matter MACs are better than PC's too!

    let the games begin.....

    ReplyDelete
  8. I do use different ones - IE, Firefox, Safari at work and mostly IE at home - just was lazy to install any other. The cleanest rendering IMHO has Safari (or google's Chrome as they use the same engine), Firefox and IE are both "hairy" - "browser war" inheritance I guess ;) IE certainly has the biggest market as of now and Firefox is more open and easier to develop for.
    As for mac or pc - I use both - they both have pros and cons.

    ReplyDelete