Site breaks in IE ( Nav wraps to new line, Nav's elements aren't tall enough, etc)
I am trying to build a responsive site and I used the HTML5 Boiler Plate Responsive template. I know there are some styles in the template that target IE and I don't know if those are messing up the site in IE or if it is IE's bugs and IE being IE that is messing it up. I have found these problems to exist in IE 8 and less, by the way; and, I am looking for any help is solving them.
The site looks and functions fine in Chrome. So, if you are willing to help, please look at it in chrome to see how it is supposed to look.
- The 4th element in the nav (#desktopNav) wraps to a new line, when it is supposed to be on one line.
- The 4 elements in the nav are too short at times. They are supposed to reach the border of the header, which is the same colour ( the darker green) as them.
- In some of the small / smaller breakpoints the text is too big to fit in the header.
I think the 3rd issue I can fix with IE conditional comments and a smaller text-size, but I am wondering why it is not working when it works well in chrome. Is it because of the units I used for the font-size?
I also know that the 1 image and 1 unicode do not appear. I will fix those two myself.
But, I don't know how to fix the navigation / navigation elements issues and I would appreciate any help is fixing those.
I can provide screenshots of how the site breaks if it will help.
The site is: the-irf.com/site/index.html
Thank you very much for any and all help & Best Regards,