Odoo status bar glitches when I reload the page using browser refresh page (F5)

Question

Normally the status bar looks like this:

But every time I reload the page using F5 it turns into this:

This is a really annoying glitch because I can't trace what's causing this. Can anyone help me on this?

Browser: Google Chrome Version 42.0.2311.152 m

HTML Code:

<header>
<button type="button" class="oe_button oe_form_button oe_highlight oe_form_invisible">


        <span>Post</span>

    </button><button type="button" class="oe_button oe_form_button">


        <span>Cancel Entry</span>

    </button><ul class="oe_form_field_status oe_form_status oe_form_required" data-original-title="" title="">

        <li class="" data-id="draft">
            <span class="label">Unposted</span>

            <span class="arrow"><span></span></span>
        </li>

        <li class="oe_active" data-id="posted">
            <span class="label">Posted</span>

            <span class="arrow"><span></span></span>
        </li>


</ul><div class="oe_clear"></div>
</header>

Header CSS:

element.style {
}
.openerp .oe_form > :not(.oe_form_nosheet) header, .openerp .oe_form > .oe_form_nosheet header {
  padding-left: 2px;
}
.openerp .oe_form header {
  border-bottom: 1px solid #cacaca;
  padding-left: 2px;
  background-color: #ededed;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
  background-image: -webkit-linear-gradient(top, #fcfcfc, #dedede);
  background-image: -moz-linear-gradient(top, #fcfcfc, #dedede);
  background-image: -ms-linear-gradient(top, #fcfcfc, #dedede);
  background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
  background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
}
.openerp .oe_form_nosheet > header {
  margin: -16px -16px 0 -16px;
  padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheetarticle, aside, footer, header, hgroup, main, nav, section {
  display: block;
}
Inherited from 
.openerp th, .openerp td {
  padding: 0;
  text-align: left;
}
Inherited from 
.openerp .oe_webclient {
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}
.openerp table {
  padding: 0;
  border-collapse: collapse;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
user agent stylesheettable {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
Inherited from 
.openerp {
  padding: 0;
  margin: 0;
  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
  color: #4c4c4c;
  font-size: 13px;
  background: white;
}
Inherited from 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
Inherited from 
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Button CSS:

element.style {
}
.openerp .oe_form > :not(.oe_form_nosheet) header .oe_button, .openerp .oe_form > .oe_form_nosheet header .oe_button {
  margin: 3px 2px 1px;
}
.openerp .oe_form .oe_form_button {
  margin: 2px;
}
.openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp .oe_button, .openerp input[type='submit'] {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: #4c4c4c;
  margin: 0;
  padding: 3px 12px;
  font-size: 13px;
  text-align: center;
  background-color: #e3e3e3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#d8d8d8));
  background-image: -webkit-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -moz-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -ms-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -o-linear-gradient(top, #efefef, #d8d8d8);
  background-image: linear-gradient(to bottom, #efefef, #d8d8d8);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  -webkit-font-smoothing: antialiased;
  outline: none;
}
.openerp button, .openerp body {
  line-height: normal;
}
.openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp .oe_button, .openerp input[type='submit'] {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: #4c4c4c;
  margin: 0;
  padding: 3px 12px;
  font-size: 13px;
  text-align: center;
  background-color: #e3e3e3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#d8d8d8));
  background-image: -webkit-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -moz-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -ms-linear-gradient(top, #efefef, #d8d8d8);
  background-image: -o-linear-gradient(top, #efefef, #d8d8d8);
  background-image: linear-gradient(to bottom, #efefef, #d8d8d8);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  -webkit-font-smoothing: antialiased;
  outline: none;
}
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button, select {
  text-transform: none;
}
button {
  overflow: visible;
}
button, input, optgroup, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheetinput[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
  padding: 1px 6px;
}
user agent stylesheetinput[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  padding: 2px 6px 3px;
  border: 2px outset buttonface;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  background-color: buttonface;
  box-sizing: border-box;
}
user agent stylesheetinput, textarea, keygen, select, button {
  margin: 0em;
  font: normal normal normal 13.3333330154419px/normal Arial;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}
user agent stylesheetinput, textarea, keygen, select, button, meter, progress {
  -webkit-writing-mode: horizontal-tb;
}
user agent stylesheetbutton {
  -webkit-appearance: button;
}
Inherited from 
.openerp th, .openerp td {
  padding: 0;
  text-align: left;
}
Inherited from 
.openerp .oe_webclient {
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}
.openerp table {
  padding: 0;
  border-collapse: collapse;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
user agent stylesheettable {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
Inherited from 
.openerp {
  padding: 0;
  margin: 0;
  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
  color: #4c4c4c;
  font-size: 13px;
  background: white;
}
Inherited from 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
Inherited from 
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Status Bar CSS:

element.style {
}
.openerp .oe_form > :not(.oe_form_nosheet) header ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu), .openerp .oe_form > .oe_form_nosheet header ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu) {
  display: inline-block;
  float: right;
}
.openerp ul.oe_form_status, .openerp ul.oe_form_status_clickable {
  display: inline-block;
  margin: 0;
  padding: 0 18px 0 0;
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
user agent stylesheetul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}
Inherited from 
.openerp th, .openerp td {
  padding: 0;
  text-align: left;
}
Inherited from 
.openerp .oe_webclient {
  width: 100%;
  height: 100%;
  border-spacing: 0px;
}
.openerp table {
  padding: 0;
  border-collapse: collapse;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
user agent stylesheettable {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
Inherited from 
.openerp {
  padding: 0;
  margin: 0;
  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
  color: #4c4c4c;
  font-size: 13px;
  background: white;
}
Inherited from 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}
Inherited from 
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 1

You need to do this(small change in xml file)... and its work like charm.

Put all code between <div> --put your code here-- </div>

Here, i'm not putting your whole code structure, but you only put all your <button> and <ul> tag between <div></div>.

So, your code looks like this...

<header>
    <div>
        <button>Post</button>
        <button>Cancel Entry</button>
        <ul>
            <li>Unposted</li>
            <li>Posted</li>
        </ul>
    </div>
    <div class="oe_clear"></div>
</header>

That's it.... :)