Navigation bar missing from web site made in Publisher

Recently we were hired to fix two web sites that were designed in Microsoft Publisher and then output as HTML and uploaded to a server for a local business.  The problem is that since IE 8 came out (March 2009), both of these web sites – for anyone using Internet Explorer 8 (even using compatibility mode) – were completely missing the VERTICAL left hand navigation bars that were on each site.  When we tried the site under Firefox, Chrome or Safari, the site worked fine.  This is still a major problem because still a majority of users use IE for browsing and to them the site will be broken.

After spending several hours reseaching this topic as well as experimenting with the HTML code that is generated by Microsoft Publisher (absolutely BLOATED and HORRIBLE) – I figured out the solution to the issue.  Now keep in mind this is like putting a band-aid on the Hoover Dam to plug a leak, this should only be used to “hold over” the site until you get a “real” site designed by a company like Amixa.  I highly suggest you use this to only fix the site in the interim until you get that new site built.  Any site using Publisher is likely to suffer from horrible HTML bloat and horrible (or no) image optimization, so get off that site as soon as posssible so as not to drag down your SEO rankings any further.

Here is how to fix the issue.  (I will show you how to fix one page.  You can do the others yourself.)

  1. You will need Publisher installed onto your workstation  In my case I have the latest Publisher 2010.
  2. Download a full copy of the site to your computer.
  3. Make a backup copy into another directory.  We will only perform these fixes to the COPY.  Never erase the original in case you need to go back to it.
  4. Launch Publisher
  5. Go to file menu and OPEN up the HTM page (I am starting with the homepage, called index.htm)
  6. The page should open up perfectly and look “as it does”
  7. Locate the navigation element that is missing when you view the site under IE.  In our case it was a vertical element on the left side of the site.
  8. Hover your cursor over the upper left border of the navigation element.  When you do this the border should change into a “white and blue” striped edge.
    1. Publisher navigation border when you hover
  9. Then carefully RIGHT CLICK and select UNGROUP
  10. As soon as you do that the navigation element will change into a bunch of individual elements with “dots”
  11. Go to file, Save As, select Web Page, Filtered.  Save the file OVER TOP of the original one.
  12. You will see that each time you complete this process for each page Publisher will generate it’s own image folder.  That’s ok.  We’re only using this as a temporary fix anyways.  Upload all the revised HTML pages and their image folders to the server.
  13. It’s not perfect but the site will work on all browsers again and buy you some time until the site is rebuilt.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *