1

I'm a newbie with CSS and client side scripting but I'm noticing issues related to getting consistent cross browser displays. For example, creating a CSS navigation menu.

I'm simply trying to create a drop down menu with a green background which shows up perfectly in IE but not in Chrome. When I modify the background-color line in the CSS, the background is correctly displayed in IE but Chrome retains the prior background and so does Firefox. 

#menu {
display: block;cc
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;  
background-color: green;
background-image: linear-gradient(#444, #111);
border-radius: 50px;
box-shadow: 0 2px 1px #9c9c9c;
-webkit-transition-property: background-color, color;
-webkit-transition: 0.3s;
display: block;
// display: table-

I should mention that I'm also including a standard jQuery script (from the JQuery site) and also using JSF Primefaces on the server side.

The strange thing is that Chrome and FF are totally unresponsive to any modifications in the CSS. EG: If I delete the background-color line altogether, a white background will show up in IE but Chrome retains the same background. Before going deeper and positing my entire CSS I would first like to see if I am missing something simple.

I also deleted browsing history and disabled caching for all browsers. IE and FF behaved normally. There were no console errors when loading the application. IE displayed the correct background, FF did not and behaved like Chrome.

When first loading the application in Chrome, there was also no error. When refreshing the application in Chrome however, the following errors were produced in the console. 

Uncaught SyntaxError: Unexpected end of input
primefaces.js.xhtml?ln=primefaces&v=5.0:17 Uncaught SyntaxError:     Unexpected end of input
jquery-ui.js.xhtml:2128 Uncaught SyntaxError: Unexpected end of input
IonHome.xhtml:43 Uncaught ReferenceError: $ is not defined(anonymous   function) @ IonHome.xhtml:43
IonHome.xhtml:43 Uncaught ReferenceError: PrimeFaces is not     defined(anonymous function) @ IonHome.xhtml:43
IonHome.xhtml:43 Uncaught ReferenceError: $ is not defined(anonymous   function) @ IonHome.xhtml:43
IonHome.xhtml:43 Uncaught ReferenceError: PrimeFaces is not   defined(anonymous function) @ IonHome.xhtml:43

I've seen several questions here before also about issues between Chrome and IE, but so far I missed any conclusive answers about my concrete problem above. Would appreciate any guidance. Thanks in advance!

jay tai
  • 217
  • 1
  • 7
  • 25
  • 1
    It's possible that Chrome is caching the previously-retrieved CSS. If you open its Developer Tools (F12 in any browser) then it should avoid caching while those tools are open. These can also help you find many other issues. – Katana314 Jul 02 '15 at 17:12
  • 1
    Disable caching when developing in Chrome http://stackoverflow.com/a/7000899/2628694 – David Corbin Jul 02 '15 at 17:19
  • can you add in fiddle? – Riskbreaker Jul 02 '15 at 17:20
  • Press CTRL+F5 to reload the page – Adam Buchanan Smith Jul 02 '15 at 17:27
  • 3
    It looks like a typo: `display: block;cc` – alex Jul 02 '15 at 17:28
  • Using incognito mode will also load a non-cached version. – mcon Jul 02 '15 at 17:37
  • 1
    Have you tried in other browsers, such as Mozilla Firefox or Opera? I have had issues with Chrome before until I realized that it was actually a problem with my code that IE didn't care about, but the other browsers did care about. – Zachary Weixelbaum Jul 02 '15 at 17:46
  • Thanks Zachary. I've tried Firefox and it behaves the same as Chrome, retaining the same background. Also in the console neither Chrome nor FF displays any JS errors or any other errors. You might be right that the non-IE errors are more diligent about code but I can't seem to see this. If it helps I can add my entire CSS code? – jay tai Jul 02 '15 at 18:44
  • Apologies to the other comments. I only saw them after replying to Zachary. I updated the question with some more details. I disabled caching, reloaded the page, removed the typo and still the same problem exists except i know have some error messages in the Chrome console as mentioned in the question – jay tai Jul 02 '15 at 19:16
  • UPDATE: I replaced $ with JQuery in the JQuery script and that got rid of the syntax error but I still have the same problem – jay tai Jul 02 '15 at 19:29

0 Answers0