Solution: V13 Menu Bar Images not visible on IE8 8.0.6001.18702

Discussion created by RichardWarburton1315783 on Jul 19, 2013
Latest reply on Jul 19, 2013 by Dave
Hey all

We had a very annoying problem with our V13 implementation - namely that the V13 navigation icons were missing or invisible in our group-wde version of IE.

This gave a certain Harry Potter style to the menu whose buttons were technically there, but you would only know by the tooltips as you moused over the hidden buttons.

The reason for this is that IE8 is rubbish (end sentence here) handling base64 encoded images. In Clarity V13 the CA logo and the menu bar navigation images are sent to the browser as blobs of text embedded within the CSS

Example CSS:
/* The logo in the upper left hand corner of the small page header */
#ppm_header_logo_small {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAE40lEQVRIDQXBT49dZR0A4Of3nj/3zp2Zduy0gB0KWDQ1SosuiIFEEklMDOB30IUL134BPoXxG6BxYYwL3aiJSxNjQtAEqRQCSGkLnc5M595zzznvz+eJxeGNBAAAmUwbMW/plkRDHRm3slvS9ESAHFNuEsROgNymHCnLEH0QAABACwAgk2lgsSufumW68nV2LhBBrawfae++xxd3GDa0C/1Ra/GNTvlKo/RBkBPzWTXe2Rpuj3JLLAIAQCwObySAWqmj+txLphdel3uX6RZkIolCEuOae59Y3v29S6/8T3v9grIMmmBOoASoQzV+NDr5w2PbjyfRBQCIxeGNBFmZR/XWj40vvsk8MW/JRFAaciaTKFgqO2uXr71td++/6rggiCbknCQgKHvF9GDyxS+Pjfer0geAAhDToD7/ivHWG4wbpg2ZND1NJ4bHaGh7ciYfqydLD26/aXt+UbMzgfl0piG6IJHUk6p7orV6eUfMCQBaMG/l7iXzt39EJnVG0C6Ue7c1//qTOL3HzkXzzR+bn7rBtKFdq8NTHp/dNP/nz07/Osshlf3iwhu7+uu93CSo29Qftcp+UQeiAVoRTFv12nfVC08yPgZKy+ZM94/fcv827YqHn2qHc/WHv5A7+0wje62zT67Z/G5tPk7aVv1wklM6/PmB0hU5JokuRItNIkCrznRL9cp1olATaBeaT9/l5C6LfaLQXmD9UPe3X7HYpVaZhZNT9Sw0h42ybCiN9kKRW/QASCQA0Kozi5W6c0AdCSSaVqyPGdf0e4AgiQcfyKESLK42Fi/taK9e1BwUzX4jlqGsipxSjgkAAABaOdOtWB1QZwQSyEomAgkg5057pdh/fdfyhaVYEiWoZBBB1mQCAAAAoAWSTAAAAABQt6l7snHppxd1R616VuUGPfVxtf1ga/vBSLD3g11lVeSYAAAAWtEyblifsH+FeQtk0iwoLRJIIqr913Z11zr1eKYhSjj/+9rZX85N96scUnu52P3+Lg1GAAAAilIYzpX1I5qWRGAazIfPsrrIvAU5Vc1B0T6zkuuZIBbF5r3B8W/OjJ9X0YfoQ9krNEkCAAAARWmY1sr922QSBcE0yEvPmJ/7nqgT41rMW/XoRXXvkHkCEWn6bJLbVLqQM3VTLb7Vaw4auU0AAADQyqRdKp++I05ek3uHjBtg2phuviGvPK88/FjdO1KfvS6nt5W+mpETy5sL63cG48ez6Nh9eWnv1RUTAAAAAC1oOnF6T/vuH40v/4TSUkeyIsxP3zI/8x1qZegMJ09b7X6IXg6pvdI6/NmB7UejshP6Z3vRhTpUAAA5p3kza3dbgqZdXX4LlEY8uKPUSf3qN2k6shKoE/NEVhTb4ar+4BP9zrHMhonSF91Rp73UijaMd0d5npr9hiDaMB/PfJYObuwbvhzVKTXt6vJbIILSiM/f0zy4o+4eim5F09GvaHsyhK28f2L+5/v6vQfKfq+sQvQhp2RIw/uDR78+1ewX3bVWDslMBsvsHb16xZf/PjU8nMTi8EYCgEymgdJwcFU9OFL3Dokizh9pzu7z5Yecb1l2+mda/dc62pCns/Gz2XBnZKZ9otFcKNQECvWYpi+2Dyd1rmJxeCMBAADMW6atqBOJ0simo+2JQpLbVDdJpmhC9CEWAXLCnABAS9ZU2kLwf2dpZf05P+LyAAAAAElFTkSuQmCC);
  margin: 5px 0px 0px 10px;
  width: 32px;
  height: 20px;
So that horrid looking blob is the base64 encoded image for the small CA logo. You get to that in Admin -> UI Themes

In IE8 (our version), they don't show.

So what we did was to recomplile those into the original PNG files using the encoder here:

To get the real PNG files out

And then replaced the item in the CSS (Admin -> UI themes) like this:
/* The logo in the upper left hand corner of the small page header */
#ppm_header_logo_small {
  background: url('ui/themes/imagesworkaround/ca-sml.png');
  margin: 5px 0px 0px 10px;
  width: 32px;
  height: 20px;
We had to put the PNG files into the app server in the directory shown above - where the themes are kept. And ta-da, the logos come back to life.

You can now see your logos on IE8
There is a slight reduction in bandwidth as the base64 encoded images are a lot heavier than the png files (but not so as you'd notice).

There are an increase in http requests (to retrieve the files), but no more so than were there in V12 - and not causing any noticeable performance hit
You need to maintain your UI theme (but you can copy the default theme and comment that up).

It's possible that this may help with anyone still on a legacy IE7. IE7 definitely doesn't support base64 encoded images.

So there you go.... enjoy!

Hope this helps someone