Icons not adjusting in IE

First, I love this extensions and want to say thank you for your work.

Now the issue I am having is that in internet explorer (IE) the icons in a horizontal set are not moving down to the next row when the screen size warrants it. If you shrink the screen enough they do move eventually, but some icons are getting chopped or almost invisible before they move.

This issue is not occurring in either FF or Chrome, on in IE. I am running Joomla 2.5.6.

Unfortunately the site is an internal business site so there is no link I can give you, but I have supplied a screen shot. You can see how the icons in the "Service Excellency" row need to adjust to a second row due to screen size but the icon with the number 5 is cut in half. That icon does not move down until the screen is shrunk to the point of touching the prior icon.

Any help you can provide would be appreciated. I'm sure there is some CSS adjustment to fix this, but I have been unable to find it and I am hoping you will know what it is.

You don't have access to view the attachments in this post.

27 Aug 12

Hi mcoville,

Thanks for your kind words, much appreciated.

Although it's hard to make CSS adjustments without seeing the site live, I will try to provide a solution.
I tried to replicate your issue and found out that IE just does the job (I use IE9).
The issue you are experiencing in IE might be related to your template or just that it has difficulties to render correct in IE. I can not test this properly without seeing the site alive.

What you can try to do is to remove the padding-right from the icons because I noticed there was a space left behind after the last icon (where it divides the horizontal icon row by page adjustment) in IE which could cause the cut off icon. The padding-right of 15px could force the icon to display in a cut off manner as it doesn't adjust to the available content width in IE, while it does in FF and Chrome.

To do so:
open the file style.css in /media/mod_ninja_simple_icon_menu/css/

search for (be sure you search for the section marked in red):

/* Horizontal - icons above titles */

.nsi-iconhoriz-icontop div{padding:0 15px 0 0; background-position:100% 100% !important;}

change this to:

/* Horizontal - icons above titles */

.nsi-iconhoriz-icontop div{padding:0 0px 0 0; background-position:100% 100% !important;}

This could fix the issue in IE.
Let us know how it goes.

Kind regards,
John