CSS not working with IE and Firefox, but works in Chrome

Question

Site jgimprinters.com loads and works fine in Chrome, but not in IE or Firefox. I have verified that IE downloads the style sheet, however it does not apply a lot of the styles. For instance, in IE, the menu button that is supposed to be hidden in full size is showing and all blown out (too big), none of the menu styling is working, background colors of several things is not working. Although the stylesheet is being seen by IE, it is not applying the styles.

Any help would be appreciated.

Thanks

EDIT: snippets that arent working - for starters there is the entire nav - and the header is missing from under the nav

 #nav-wrapper{ max-width:900px; margin:0 auto; } #nav{ list-style:none; } #nav li{ float:left; } #nav li a{ webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; padding: 0 17px; margin: 0 auto; position: relative; display: block; height: 30px; cursor: pointer; text-decoration: none; color: #FFFFFF; line-height: 30px; text-align: center; font-size:12px; font-weight:bold; } #nav li a.active, #nav li a.better-active{ background: #EDEDED; color: #5D5F5D; } #nav li a:hover{ background:#5D5F5D; color:#ffffff; } #menu-button{ display:none; width:36px; cursor:pointer; } #menu-button img{ margin:0px; } #head-wrapper{ height:150px; background:url('/wp-content/uploads/2015/02/header.png') no-repeat; background-position:center; width:100%; display:block; } #head-inner{ width:100%; max-width:900px; margin:0 auto; } #logo{ margin-left:30px; float:left; } #head-right{ float:right; width:270px; margin-top:30px; margin-right:15px; } #callout{ font-size: 14px; font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif; font-weight: bold; font-style: normal; text-decoration: none; text-transform: none; font-variant: normal; text-align: left; color: #ED1D2E !important; width:280px; } #phone{ font-size: 30px; font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif; font-weight: bold; font-style: normal; text-align: left; vertical-align: middle; color: #000000 !important; text-decoration:none; } 

All of that is pretty much being ignored by IE and Firefox.

Looks like:

Should look like:

Answer 1

There's a syntax error in your styles.css file on line 385, which Chrome seems to fix for you while other browsers don't.

… url(/wp-content/uploads/2015/02/nav.png') …

There's a closing apostrophe which has not been opened. All CSS after that isn't parsed.

How did I find out?

I opened the stylesheet in my favorite editor and noticed that after line 385 everything was yellow—which is the color for strings.

However, validating the CSS would also have helped as it also found the error (among others):

386 #main-nav   Value Error : background top is not a color value ) no-repeat, …