CSS not working in Chrome but does in Firefox

Question

I have a textarea that I am using for suggestions. Below is two screenshots; one in Firefox and one in Chrome. The Firefox one is right, I'm not sure why it is not showing right in Chrome. Can anyone explain why this is happening? It works in Chrome locally, but not when I publish to Azure.

Suggestion Box FireFox

Suggestion Box Chrome

My Style is:

#txtSuggestion {
 position: relative;
 font-size: 16px;
 height: auto;
 padding: 10px; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
 width: 500px;
 height: 100px;
 border: 3px solid #cccccc;
 display: block;
 margin-left: auto;
 margin-right: auto;
}

My div on page is:

<div id="suggestion">
 <h2 style="text-align:center;">Suggestion</h2>
 <h3 style="text-align: center;" id="successText"></h3>
 <textarea id="txtSuggestion" spellcheck="false"> </textarea> 
 <div style="text-align:center; padding-top: 20px;">
 <span class="btn btn-sm btn-success" id="btnSubmit" onclick="SuggestionSubmit();">Submit</span>
 </div>
</div>

• Stickers: That might be cache in Chrome.
• MOSCODE: What do i need to do to fix it?
• Armen Michaeli: Well, you can start by linking us to the published code so we can run e.g. Firefox developer tools on it.
• Pete: works fine in chrome for me: jsfiddle.net/znnso4d4
• Stickers: Just search "chrome hard reload" or "chrome clear cache".

Answer 1

Try forcing a cache refresh in chrome by pressing Shift + F5

• MOSCODE: Yep that worked. Would that happen again down the line @blubberbo ?
• blubberbo: well it depends on the environment you are viewing the website in. Typically it can happen often in a development environment because you look at the website, make changes and then view it again. If someone is coming to the website for the first time, they will see the correct styles. That being said, there are numerous different ways you can prevent the inconsistency. Perhaps the easiest and what I often do is versioning your .css files by including something like ?v=1.1 in the href tag, like this: <link rel="stylesheet" href="style.css?v=3.4.1">

Answer 2

I copied your code and i see it exactly as you see in Firefox.

Maybe press F5 to refresh the page, or open in a new Chrome window.

Good luck