23 Jun 2009

iWeb and Internet Explorer

36 Comments Blah blah, Tips and Tricks, Web Design

If you have ever viewed your iWeb site in Internet Explorer (and of course you should have done when you tested it just before publishing) you may well have noticed that it looked a little strange; not as you designed it!

There are a variety of reasons why your iWeb site looks like it has been chewed by a dog and then spat out again and here they are explained along with a few tips to help you get around the problems.

Before I start though I would like to explain the reason for this post. You may be thinking “why should we bother about PC users?”. Internet Explorer (at the time of writing) makes up for 41% of the world’s browser population. That’s a lot of people who could be looking at your iWeb site, but can’t.

So why does my site look rubbish in Internet Explorer?

As I mentioned above there are several reasons as to why this is happening. To begin with there is the way Internet Explorer (IE) handles the CSS created by iWeb. CSS is the part of your iWeb site code that decides how your web-site looks and like most things in life there are certain rules and standards which apply to it. Unfortunately IE interprets (and therefore applies) these rules differently than other browsers. Earlier versions of IE were particularly bad and really mucked about with margins and padding. The only way around layout problems is testing, adjusting and testing again until it all looks good.

To have a look how your site would look in IE you can use the Develop menu in Safari, select ‘User Agent’ and then the version of IE you want to test in.

Then there’s Javascript…

Despite the fact that javascript in one form or another is becoming increasingly popular in web-design a lot of IE users elect to have javascript disabled in their browser. Some (and I know this from personal experience) have it switched off through no choice of their own as they use the internet at work and the company I.T. policy is to have it disabled by default.

This creates a problem with many areas of an iWeb designed site but primarily with the default navigation bar. It’s all built in Javascript, and if an IE user visits your site and you have used the built in iWeb navigation all they will see is a small black dot where your nav-bar used to be. Obviously you can get round this by building your own nav-bar (and it’s more customizable too). I wrote a tutorial on building your own navigation when I started All About iWeb which explains how to do it and why it is also more SEO friendly.

Of course it also effects the blog too. If you want IE users to read your iWeb blog you will have to think of something other than iWeb. There are many free blogging tools available such as Blogger, WordPress or Typepad; it is then simply a case of using an iFrame to insert the blogpage into your iWeb site. Alternatively you can just link to the blog and let it have a different URL.

Speed Issues

IE is in no uncertain terms a bit bloated. This means that loading speeds get a little slowed up to say the least. When your iWeb site is crammed full of surplus code and beautiful (but extremely large) images your loading speed will become a crawl.

You can optimized your website so it loads much faster with WebCrusher from Rage Software. WebCrusher can also make your iWeb website more compatible with Internet Explorer.

Those damn gray backgrounds…

Early versions of IE (and by that I mean IE6 and previous) could not handle the image format PNG. It’s a shame really as many of the images you find in iWeb are PNGs. Why? Because they allow you to have transparent backgrounds to images. Since IE7 the situation has improved but you may want to consider using JPGs or GIFs instead; unless you already have a dull gray background to your site.

Finally we all know our iWeb sites work well (most of the time) with FireFox and Safari, so one ‘coverall’ solution would be to add a small banner to your iWeb site’s home-page along the lines of:

“This web-site is at its best when viewed in a standards compliant bowser such as FireFox or Safari”

You can even add links to the relevant download sites too.

Do you have other problems with your iWeb site and Internet Explorer? Why not leave a comment and let us know.

Tags:
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb

36 Responses to “iWeb and Internet Explorer”

  1. Reply iWeb and Internet Explorer | SEO Article Expert says:

    [...] Originally posted here:  iWeb and Internet Explorer [...]

  2. Reply Thierry says:

    Based on Google Analytics IE visits represent 11% of my visitors, I wish it was less. My Iweb site look pretty ugly with IE 6, 7 or even 8.
    I mentioned on the about page that we do not support IE: http://www.wesdotphotography.com/About_Us.html but it’s in the bottom of the page, I wish I could have a script (like a message that pop up) to tell people that they are using IE and I recommend another browser.
    Oh well
    Thierry

  3. Reply Thierry says:

    Tim, it will be great, can it bypass the popup feature in most browser?
    I will love to add one on my site.
    Looking forward to it.
    Thierry

  4. Reply iWeb and Internet Explorer | All About iWeb | Mac Affinity says:

    [...] Follow this link: iWeb and Internet Explorer | All About iWeb [...]

  5. Reply Gerald Henry says:

    Thank you for this column. I thought I should share my experience. I have just built a website using entirely blank templates. No blogs or photo albums. I found iweb to be an amazing design tool and a fantastic web site builder. I published my site to my own url http://www.geraldhenry.com with no issues. The site was perfect in Safari, Firefox and Camino on my Mac Pro. I then checked it in Internet Explorer 6 and 8. It was acceptable in 8 but looked terrible in 6. In Explorer 6, all my lists and text formatting had come apart, creating huge gaps between list items and was pushing text off the page. Yet some lists looked perfect. So I used the iweb text inspector to see what was different between the formatting I had used in the lists that displayed perfectly in Explorer 6 and those that had come apart. Here is the information I wanted to share. When using the text inspector, there is a “list” option. It gives you the opportunity to indent text as well as bullets and numbers. If I used the bullet or number indent, there was no problem. But, if I used the text indent, Explorer did not like it and the formatting blew apart as described earlier. So, the key is not to use the text indent. To indent, use the tab key or space bar. You cannot create the amazing text layouts you can using text indenting, but your work will look good in all browsers. In my case, I went through my site and removed all text indenting and replaced it with spaces using the space bar and all of the issues with the lists blowing apart were resolved. Some final notes, I built my own navigation completely and so had no navigation issues. I used Verdana type which displays perfectly in Safari, Firefox and Camino but looks weak in Explorer. Why this is, I don’t know. Also, as suggested in the article above, I added a landing page that says my site looks best in Safari and Firefox and I offer download links. Please feel free to look at my site using different browsers to see how it looks. I hope this helps others and I thank Tim for his help.

  6. Reply Robert says:

    I was working on trying to build a better looking site for my wifes sister and got iweb 09. Looked great till I used I.E. Then after reading I am not the only one (should be a disclaimer from Apple about this before you buy) with Nav bar issues. I do like your site Gerald. I am also going to build my own Nav bar (just looks better I think). I am also looking at doing my web site in a Dark color, and your looks good with ie8 (PC Laptop). Nice form one you find it. Thanks for the very useful info.

  7. Reply miguel barbas says:

    i, i made a webpage in iweb and i have a problem when i open it in Explorer. Appear a toolbar asking for permision in active x, i accept but after the toolbar of my webpage dont appear:( help me please

    • Reply All About iWeb says:

      Miguel,

      That is why you should make your own nav-bar rather than use the default iWeb javascript one. Check you IE settings, you could well have javascript switched off.

      Tim

  8. Reply miguel barbas says:

    i have it on, i have open in about 4 pcs, and was the same problem. Why i can made my nav-bar?if possible i can send you my page by email. regards

  9. Reply Glenn says:

    Glad (I guess) to see I’m not the only one! I’ve made an fairly clean & simple website that looks great in Safari & Firefox, but like pure crap in IE8.

    By which I mean, all the images are fuzzy in IE — the resolution is terrible, even for small images. It also insists on a horizontal scroll bar on one page that’s a bit wide — this does not happen in Safari or Firefox.

    Is anyone else having bad image display issues with their iWeb sites on IE? Is there ANY fix?? Thanks for the article!

    • Reply All About iWeb says:

      Glenn,

      Thanks for your comment. Other than to warn users that their browser is incompatible with your site there isn’t much you can do (apart from hand code a separate CSS sheet for IE browsers). iWeb uses code that modern browsers (such as FireFox and Safari) can understand, we just have to wait for IE to catch up.

      Tim

  10. Reply Glenn says:

    Thanks, Tim. That’s too bad, I was hoping to be able to make a basic yet professional site on iWeb.

    Unfortunately, it’s not professional if it doesn’t work on the most widely used browser by far — which, despite its flaws, is IE. It’s ~2.5 times more popular than Firefox and ~17 times more popular than Safari. If iWeb can’t handle display in IE, then I sadly can’t use iWeb to make a professional site. Bummer. I really like iWeb.

    • Reply All About iWeb says:

      Glenn,

      Thanks for the comment, and the stats; but in my opinion you have it the wrong way round. It is not iWeb that doesn’t work with IE it is Internet Explorer that doesn’t work with iWeb. If Microsoft were to create a standards compliant browser just like Firefox or Safari for example, then all would be well. Because they don’t I think we will always have this problem.

      Tim

  11. Reply Glenn says:

    (BTW, those figures on browser use are based on the average of several analyses, all of which vary a little, but the rankings remain consistent.)

  12. Reply Joe says:

    Tim,

    I built a website for a family business using iWeb and have been very pleased with the results. I checked the site with IE (not sure which version) when I designed it and everything seemed to work, if not look as good. However, there are now two sections of the site (Rater Directory and FAQ) which are not loading in IE (error message reports browser type not recognized). Both sections were designed using the blog page type in iWeb. Is there a workaround you know of with the blog page type to be able to display in IE?

    Page that is not displaying in IE:
    http://eehmidwest.com/Energy_Efficient_Homes_Midwest/Rater_Directory/Rater_Directory.html

    Thanks!
    Joe

  13. Reply Thierry says:

    Joe,
    When using IE8 I get this error message:
    # Exception: TypeError
    # Message : ‘browserVersion’ is undefined

    My blog page does not display properly either, I will recommend that you place a message on your home page like the one I have here: http://www.wesdotphotography.com/Home.html make sure you use IE to see the message. Coding was provided by Tim himself, it took me a while to make it work but with his help it look OK now (thanks again Tim).
    Thierry

  14. Reply Chris says:

    Hi,

    I’m having an odd IE/Safari/Firefox issue. My navigation bar only seems to be working in IE, which is quite counter to what I’ve come to expect. Does anyone have any suggestions?

    Thanks-Chris

  15. Reply Westley says:

    Firstly allaboutiweb is great site keep up the great work.

    My issue with IE and iWeb is that images that I have that use releflection just seem to duplicate the image in certain peoples IE browsers. Not all as when I have tested it, it is not an issue.

    Has any one seen this issue of images being duplicated in IE. It is a pain as it hides the other parts of the webpage.

    Any comments/help would be appreciated.

  16. Reply mario says:

    i am getting mad! my website works very well on safari and firefox…i made with snow leopard…but on explorer….ufff how can i put an image on a flash???? the bring back or front doesn’t seem to work at all for a flash!!! (and i cannot find any help in italian!!!)
    help!!!!!

  17. Reply andrew says:

    I am working on my first website now. When I look at it in IE, everything looks as it should, everything’s in the right place, colors are okay… only, every place there is a .png file (all of the shape boxes, text boxes, etc.) have that little X in the top left corner. Again, everything loads and looks as it should, it’s not as if they didn’t load. They are displayed AND they have the X.

    This is not the case with any .jpeg file, or any other “html object” I’ve dropped in. I know that one way around this would be to take screenshots, crop them, and convert all of my objects to .jpeg and drop them back in so they wouldn’t be .png. But that’s so labor intensive!

    Anybody got any other suggestions? I’m with you, Tim, that Explorer has no excuse for being so behind with today’s standards. As if they have some point to prove, by setting their own standards (refusing to comply with standards they surpassed their own). However, starting my own business, I am inclined to agree with Glenn that – as an unfortunate evil, I must comply with what works with Explorer because so much of my client base will be using that program. It sucks, but it’s true. While I’m all about changing the world one browser at a time… that’s not what my business is for.

    If anyone has a suggestion on how to go about a solution easily, please post! This is a great site and I very much appreciate the dialogue that is happening here. Thanks for keeping this up Tim!

  18. Reply Brooke says:

    The iWeb site I’ve completed is http://www.organizeandsystemize.com and it’s got a few glitches. Since AAi has been an excellent source of information for me I thought I’d put a few questions to the group and see if it helps others who come to this site.

    I am having problems on every browser with the gradient fill in one of my text boxes. Every page on my website has the same fill in the text boxes and on this particular one (Student page) it stops after the first sentence of the last paragraph. Any suggestions on how to fix it?

    Next, I used the Helvetica font for the majority of the content on the site. On IE and Yahoo and Firefox the Helvetica looks huge or the text size changes randomly within a paragraph. Maybe this occurs only in the older versions of the browsers. I have the list of compatible fonts. I used Verdana on my Reviews page and Georgia on my Welcome. They seem to work better. I going to switch everything to Verdana and see if that corrects the problem unless someone has a different solution. If so please share.

    I have strange spacing issues in one of my text boxes. There is a random giant gap after the last paragraph in the text box on my FAQ page. I haven’t used the Tab key (text indent). It’s on all browsers. Even stranger, on some browsers the spacing between the words or “kerning” is entirely different. It’s just on the last paragraph and again on every browser. How do I fix that?

    And lastly I’m a victim of overlapping text. On my services page and About Jen page the text overlaps other text or images. No idea why. Is it font incompatibility? Change it to Verdana? Thoughts?

    My guts says there’s an easy fix for each of these glitches. It’s just about knowing what to do. (: Here’s to hoping that’s true!

    Brooke

  19. Reply Brendan says:

    I have been building many iWeb sites for clients. Don’t worry about the IE users I get them calling every now and then asking about a site the cannot see properly in which I give them the straight answer “its time to upgrade to another browser, why not try firefox” Most people understand that Microsoft is incapable of providing good user experience and change in an instant. We cant wait for Microsoft to catch up with technology so its easier to get the word out about other browsers.

    You can put a Error message on your site that gives them a link to upgrade their browser when they arrive. Just explain that Microsoft is too busy trying to get an operating system to work and may get around to upgrading their Internet Explorer some time in the distant future.

    Most people are still running xp which tells me we will be holding our breath for a wile waiting for an upgrade to the browser.

    I hope they can get it sorted soon.

    -Brendan

    • Reply All About iWeb says:

      Brendan,

      Whilst I do agree with you in part, it is a bit negative just to tell people to get another browser. There are ways to get round issues such as the nav-bar not displaying so as web designers we have a duty of care to allow every one to see our sites no matter what browser they use.

      Tim

  20. Reply Kyle Johnson says:

    I have made about 10 iWeb sites. They all work perfectly in Safari and FireFox, but like the rest of you they are not as pretty in IE. I have had a couple customers complain that words are appearing on top of each other. If I do any editing to adjust that, the sites start looking like crap in Safari. If only everyone was smart enough to use Macs.

  21. Reply Jen Bridge says:

    If you you click on ‘Compatibility View’ under the ‘Tools’ menu in IE8, the alignment issue will correct itself. The fonts and images still come out less than desirable though.

  22. Reply Jessica says:

    Hi Tim, thanks so much for all your advice, which I’ve found very helpful when building my first site: http://www.classicsconfidential.co.uk
    I also seem to have trouble with IE browsers. After reading the posts here I now suspect it is the ‘blog page’ template causing the problems (the entries don’t display on the ‘Interviews’ and ‘News’ page). Do you think I should put a message at the top of these two pages suggesting that users try a different browser? Also, if you have any other comments on the site I would be extremely grateful.
    Many thanks,
    Jessica

  23. Reply Lynn says:

    Does anyone have a work around for a text formatting issue. The text on my website is formatted to be right and left justified. Looks great on other browsers until Internet Explorer, then it is only left justified. Can anyone help with a solution? Thanks

  24. Reply Iyar says:

    I just built a site using iweb 3 and most of my text boxes and pictures are only visible for about 2 seconds on IE, then the screen becomes black. Anyone know anything about that?

  25. Reply Tanya Abadjieva says:

    Hi Tim, I have just published my first website designed in iWeb: http://www.drparag.com
    Such a friendly user programme for me as an artist and a person who can’t manage well html, java….
    Unfortunately with Internet Explorer I have troubles. My simple custom design navigation menu partly doesn’t work, so as a result I can’t open 2 of the pages. Why some links are ok and some not??? Is there anything I can do to fix it?
    Many Thanks Tanya.

  26. Reply Krista says:

    I have recently posted my website using iweb and it looks fantastic on safari but in firefox it has weird boxes. I was able to fix the problem on the homepage at least so now it looks good (where you used to see the actual text BOX instead of just the text and shape masking “worked” but what was masked off was still there but white) Now on my sub-pages I still have the text box around some of the text but it looks horrible at the bottom where i built my own navigator, it looks like it has something to do with shadowing but changing the settings and removing shadowing etc doesn’t work =/

  27. Reply Vic Wiggins says:

    Thanks Tim for your help with iweb. Your website has been very helpful in building the site for our company. We were finally able to launch our site in September. I do still have some tweaking to do though. Also I wanted to thank Gerald Henry…your comments on using spaces instead of indents were just what I needed to fix my issues with internet explorer.

  28. Reply Joe says:

    I have recently created a website for our new business, and when viewed in IE the pictures are doubling. What I mean is that i have placed a mirrored transparent version of pictures and when viewed in IE they are now not mirrored but brought to the front. This covers up text, and looks horrible. Additionally on the links down the left side I have placed a shadow effect and when looked at in IE is duplicating the picture and text. This makes it unreadable and looks poor. Is there any other fix besides eliminating these effects? Thank you for your help.

  29. Reply Attila says:

    Hello Tim,

    I have placed HTML Snippets on my website created by iWeb (latest version to-date). In these Snippets I have put a code to embed my YouTube videos.

    When you visite my site with IE 8, you cannot see those YouTube videos. (Of course, with other browsers either Mac or Win based, this probleme does not exist…)

    Is there a way to get around for IE users or they should be advised to change for Firefox / Chrome / Safari / Opera?

    Could you send me your reply to my e-mail address as well.

    Thank you and kind regards,
    Attila

  30. Reply Ivana says:

    I made my own navigation menu in iweb but in firefox the navigation color shows up in white, it should be pink.
    I have tried using different colors, but it always shows up in white
    Can I do anything about this

    Thanks ivana

Leave a Reply