HTML elements Moving on Reload page - Chrome only?

Question

HTML elements Moving on Reload page - Chrome only?

I am having some problems where some floating elements will not display correctly when the page is refreshed. This behavior has only been recorded in Chrome (36.0.1985.143m) and also in the Steam Browser. This behavior occurs on Mac OS X 10.9.4, Mac OS X 10.7, Mac OS X 10.6.8, and Windows 7.

Tested includes Safari 7.0.6 over Mac OS X 10.9.4, Safari 7.0.6 over Mac OS X 10.7, Firefox 3.6.10 over Mac OS X 10.6.8, Safari 5.1.10 over Mac OS X 10.6.8, Firefox 31 over Windows 7, IE11 through Windows 7, IE9 through Windows 7.

I am running ColdFusion 9.0.2 over IIS 7.5 on Windows Server 2008 R2. However, this page is currently running (or any other related resources) ZERO server scripts. Update: . Currently using server side script to show or hide div based on section parameter in query string. It's all.

Here is a link to my demo. For those who prefer the source, this is below. http://craftdeck.com/mockup2/profile.cfm?section=Store

Here is the HTML rendering.

<!DOCTYPE html>
<html>
  <head>
    <title>Craft Deck</title>
    <script type="text/javascript" src="scripts/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="scripts/profile.js"></script>
    <script type="text/javascript" src="scripts/froogaloop.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/profile.css" />
    <link type="text/css" rel="stylesheet" href="css/fonts.css" />
    <link type="text/css" rel="stylesheet" href="css/modal.css" />
    <link rel="icon" type="image/png" href="images/favicon.png">
  </head>
  <body>
    <div id="header">
      <div id="userFunctions">
        <div id="logo">
          &nbsp;
        </div>
        <div id="functions">
            <span>
              Create Account
            </span>
            <span>
              Login
            </span>
            <span>
              About
            </span>
            <span>
              Contact
            </span>
        </div>
      </div>
      <span style="clear:both; height:0; line-height:0;">&nbsp;</span>
      <div id="profileHeader">
        <div id="displayImage">&nbsp;</div>
        <div id="verifiedID">
          <span class="title">Verified Identification</span>
          <span class="idType">
            <img alt="Checkmark" src="images/VerifiedIDCheckmark.png" /><span>Email</span>
            <img alt="Checkmark" src="images/VerifiedIDCheckmark.png" /><span>Facebook</span>
            <img alt="RedX" src="images/VerifiedIDX.png" /><span>Twitter</span>
            <img alt="OnlineDot" src="images/VerifiedIDOnline.png" /><span>Online</span>
          </span>
        </div>
        <div id="bannerText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.         Nullam in lacus neque. Proin eget sapien quis odio pulvinar adipiscing non eget odio. Nam     congue iaculis congue. Mauris volutpat elit adipiscing velit consectetur iaculis. In aliquam ipsum risus, a luctus dolor ullamcorper eget. Proin in pulvinar sapien. Nam diam ipsum, malesuada aliquam est et, vestibulum bibendum sapien. Ut congue enim magna, ac pretium tellus cursus vel.

Aenean non molestie nisi. Fusce et massa eu felis faucibus molestie vitae a enim. Pellentesque convallis, nunc ut facilisis adipiscing, dui libero dignissim dui, at mattis ipsum mauris vel mauris. Vestibulum quis nibh id nibh luctus dictum et in augue. Pellentesque suscipit fringilla ipsum. Vestibulum ac dictum nisl. Suspendisse id bibendum lacus. Aliquam non ligula ornare, mollis nulla vel, tincidunt augue.
        </div>
      </div>
    </div>
    <div style="clear:both;">&nbsp;</div> 
    <div id="content">
      <div id="navigation">
        <span class="navButton">Store</span>
        <span class="navButton">Reviews</span>
        <span class="navButton" style="border:0 !important;">Chat</span>
      </div>
    </div>
  </body>
</html>

Here is my CSS

body {
  background-color:#F1F2F2;
  margin:0;
  padding:0;
  font-family:'Open Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:15px;
  width:100%;
  height:auto;
  outline:none;
  color:#404041;
}
div {
  width:100%;
  height:auto;
}
#profileHeader {
  background-color:#D1D3D4;
  width:960px;
  margin:0 auto;
  height:175px;
  font-size:12px;
}
#userFunctions {
  width:960px;
  height:50px;
  margin:0 auto;
}
#userFunctions span {
  cursor:pointer;
}
#logo {
  margin-top:10px;
  width:50%;
  float:left;
  height:100%;
  background-image:url('../images/Logo-Orange.png');
  background-position:top left;
  background-repeat:no-repeat;
}
#functions {
  width:auto;
  float:right;
  text-align:right;
  height:30px;
  line-height:30px;
}
#functions span {
  margin-left:16px;
  margin-right:4px;
  text-transform:uppercase;
  font-size:12px;
}
#profileHeader div {
  display:inline-block;
}
#displayImage {
  width:175px;
  height:175px;
  margin-right:2px;
  background-image:url('../images/axe-guy.jpg');
  border-right-width:2px;
  border-right-style:solid;
  border-right-color:#F1F2F2;
}
#bannerText {
  width:570px;
  height:155px;
  display:inline-block;
  float:right;
  padding-left:20px;
  padding-top:20px;
  padding-right:20px;
  border-right:2px solid #F1F2F2;
}
#verifiedID {
  width:165px;
  height:175px;
  float:right;
  display:inline-block;
  font-size:14px;
}
#verifiedID .title {
  height:30px;
  width:165px;
  display:inline-block;
  padding-left:15px;
  line-height:30px;
  border-bottom:2px solid #F1F2F2;
}
#verifiedID .idType {
  width:165px;
  height:143px;
  display:inline-block;
  padding:5px 0 0 5px;
  line-height:22px;
  font-size:13px;
}
#verifiedID .idType img {
  vertical-align:middle;
  display:block;
  float:left;
}
#verifiedID .idType span {
  float:left;
  margin-bottom:12px;
  width:138px;
  text-indent:5px;
  display:inline;
}
#idTypes {
  width:165px;
  height:130px;
  float:right;
  display:inline-block;
  font-size:13px;
}
#navigation {
  width:960px;
  height:30px;
  background-color:#F15A29;
  margin:0 auto;
}
.navButton {
  color:#FFF;
  font-size:13px;
  display:inline-block;
  width:316px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-right:2px solid #F1F2F2;
}
.navButton .active {
  background-color:#939598;
}
/*#headerPadding {
  background-color:#E9E9E9;
  height:20px;
}    
#bannerImage {
  width:960px;
  background-image:url('../images/Creative-People.png');
  background-size:100%;
  height:100px;
  margin:110px auto 71px;
}
#searchForm * {
  outline:none;
  border:0;
}
#searchForm input,select {
  margin:0 12px;
  background-color:#FFF; 
  height:36px; 
  font-family:'Open Sans';
  text-align:left;
  text-indent:10px;
  color:#999;
  width:189px;
}
#searchForm select {
  height:38px;
  padding:0;
  border:0;
  border-radius:0;
  -webkit-border-radius:0;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent:10px;
}
#searchForm #searchSubmit {
  width:93px;
  height:40px;
  border:1px #FFF solid;
  background-color:#F05A28;
  color:#FFF;
  text-align:center;
  text-indent:0;
  cursor:pointer;
}
#content {
  background:#F1F2F2;
  width:100%;
  height:1090px;
  margin-bottom:10px;
  padding-top:20px;
}
#search {
  width:960px;
  margin:0 auto;
  height:26px;
  text-align:center;
}
#searchResults {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.listing {
  width:320px;
  height:212px;
  float:left;
  background-image:url('../images/craftdeck_default_item_1.png');
}
.listing img {
  opacity:0.3;
}
.listing .pricetag {
  height:53px;
  width:123px;
  display:block;
  opacity:0;
  position:relative;
  background-image:url('../images/Pricetag-Full.png');
  bottom:212px;
  left:193px;
  font-size:20px;
  font-weight:normal;
  line-height:53px;
  text-indent:35px;
}
.listing .socialMedia {
  width:84px;
  height:27px;
  display:block;
  opacity:0;
  bottom:87px;
  left:3px;
  -webkit-border-radius:4px;
  border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  background-color:#FFF;
  position:relative;
}
.listing .socialMedia img {
  opacity:1;
  cursor:pointer;
}
#playVideo {
  cursor:pointer;
}
#filters {
  width:30px;
  height:424px;
  background-color:#6D6E70;
  background-color:rgba(167,169,171,0.8);
  position:relative;
  left:290px;
  bottom:295px;
  z-index:1000;
}
#filters img {
  cursor:pointer;
}
#viewMore {
  width:126px;
  height:31px;
  margin:0 auto;
  border-radius:0;
  border-bottom-right-radius:13px;
  border-bottom-left-radius:13px;
  background-color:#D1D2D4;
  font-size:14px;
  line-height:31px;
  text-align:center;
  cursor:pointer;
}*/

Update:

I've made some updates to the layout as we need to get this task done ASAP! I figured that the error occurs much more frequently when navigating between sections of the profile using the Store, Reviews, and Chat navigation buttons.

Update2:

I have now installed the modified version (for HTML5 documents) Eric Meyer CSS reset to profile.css file. However, there was no change in the error status.

Update3:

As stated in parentheses in the comment below, inline CSS doesn't have this problem. I have included an HTML commented version of the stylesheet embedded in the main tag. If this is undocumented and the link to the external stylesheet is removed, this error MUST NOT SEE ... Interesting.

Update4:

Now I have injected a stylesheet and removed the links to external stylesheets (old as well as updated from the custom Bracketsage below). They can be seen by viewing the HTML source as HTML comments in the head tag. If links to external stylesheets are specified, the error is still present ... I have temporarily removed the error because working out this error is annoying like f ***

+3

html css google-chrome css-float

Synesthesia 17 Aug 14 at 22:53

source to share

1 answer

Regular Joe · Accepted Answer · 2014-08-18T17:28:15+0000

It seems to work.

One of the things I did with this file was to replace \ r with nothing and use \ n strictly because it skewed me in regex tests. Repeated updates to chrome keep everything in place.

Another thing was to set the mass-tag commit to one line. I don't know what it did help.

I also removed the styles you commented and admittedly the comment for mass-tag-refixer. I know you want it back.

I've renamed profile.css to new.css (just for my testing) and suggest you do something like this, only the random cache won't disappoint you.

Here the css is exactly the same as I have in new.css.

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



body {
  background-color:#F1F2F2;
  margin:0;
  padding:0;
  font-family:'Open Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:15px;
  width:100%;
  height:auto;
  outline:none;
  color:#404041;
}
div {
  width:100%;
  height:auto;
}
#profileHeader {
  background-color:#D1D3D4;
  width:960px;
  margin:0 auto;
  font-size:12px;
  height:auto;
}
#userFunctions {
  width:960px;
  height:50px;
  margin:0 auto;
}
#userFunctions span {
  cursor:pointer;
}
#logo {
  margin-top:10px;
  width:50%;
  display:inline-block;
  height:40px;
  background-image:url('../images/Logo-Orange.png');
  background-position:top left;
  background-repeat:no-repeat;
}
#functions {
  width:auto;
  float:right;
  text-align:right;
  height:30px;
  line-height:30px;
  display:inline-block;
}
#functions span {
  margin-left:16px;
  margin-right:4px;
  text-transform:uppercase;
  font-size:12px;
}
#profileHeader div {
  display:inline-block;
}
#displayImage {
  width:175px;
  height:175px;
  background-image:url('../images/axe-guy.jpg');
  border-right-width:2px;
  border-right-style:solid;
  border-right-color:#F1F2F2;
}
#bannerText {
  width:560px;
  height:155px;
  display:inline-block;
  float:right;
  padding-left:20px;
  padding-top:20px;
  padding-right:20px;
  border-right:2px solid #F1F2F2;
  position:relative;
  top:0;
  left:0;
}
#verifiedID {
  width:170px;
  height:175px;
  float:right;
  display:inline-block;
  font-size:14px;

}
#verifiedID .title {
  height:30px;
  width:155px;
  display:inline-block;
  padding-left:10px;
  line-height:30px;
  border-bottom:2px solid #F1F2F2;
}
#verifiedID .idType {
  width:160px;
  height:135px;
  display:inline-block;
  padding:5px 0 0 5px;
  line-height:22px;
  font-size:13px;
}
#verifiedID .idType img {
  vertical-align:middle;
  display:block;
  float:left;
}
#verifiedID .idType span {
  float:left;
  margin-bottom:12px;
  width:138px;
  text-indent:5px;
  display:inline;
}
#idTypes {
  width:165px;
  height:130px;
  float:right;
  display:inline-block;
  font-size:13px;
}
#navigation {
  width:960px;
  height:30px;
  background-color:#F15A29;
  margin:0 auto;
}
.navButton {
  color:#FFF;
  font-size:13px;
  width:318px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-right:2px solid #F1F2F2;
  float:left;
}
.navButton .active {
  background-color:#939598;
}
#shopListings {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.listing {
  width:320px;
  height:212px;
  float:left;
  background-image:url('../images/craftdeck_default_item_1.png');
}
.listing img {
  opacity:0.3;
}
.listing .pricetag {
  height:53px;
  width:123px;
  display:block;
  opacity:0;
  position:relative;
  background-image:url('../images/Pricetag-Full.png');
  bottom:212px;
  left:193px;
  font-size:20px;
  font-weight:normal;
  line-height:53px;
  text-indent:35px;
}
.listing .socialMedia {
  width:84px;
  height:27px;
  display:block;
  opacity:0;
  bottom:87px;
  left:3px;
  -webkit-border-radius:4px;
  border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  background-color:#FFF;
  position:relative;
}
.listing .socialMedia img {
  opacity:1;
  cursor:pointer;
}
.navButton {
  cursor:pointer;
}
.navButton.active {
  background-color:#939598 !important;
}
#viewMore {
  width:126px;
  height:31px;
  margin:0 auto;
  border-radius:0;
  border-bottom-right-radius:13px;
  border-bottom-left-radius:13px;
  background-color:#D1D2D4;
  font-size:14px;
  line-height:31px;
  text-align:center;
  cursor:pointer;
}
#reviews {
  width:960px;
  margin:0 auto;
}
#totalReviews {
  width:175px;
  height:176px;
  font-size:80px;
  font-weight:lighter;
  background-image:url('../images/totalReviews.png');
  line-height:176px;
  text-align:center;
  color:#A7A9AC;
  background-repeat:no-repeat;
  padding-right:75px;
  float:left;
}
#reviewContainer {
  width:710px;
  float:right;
}
.review {
  width:100%;
  height:70px;
  overflow:hidden;
  margin-bottom:30px;
}
.reviewDisplayPic {
  width:70px;
  height:70px;
  margin-right:5px;
  display:inline-block;
  float:left;
}
.reviewContent {
  width:625px;
  padding:5px 5px 0 5px;
  height:65px;
  display:inline-block;
  float:right;
  background-color:#D1D3D4;
  overflow:hidden;
}
.reviewReadMore {
  float:right;
  width:635px;
  height:15px;
  float:right;
  display:inline-block;
  background-color:#D1D3D4;
  background-image:url('../images/Review-Read-More.png');
  position:relative;
  top:0;
  left:0;
  cursor:pointer;
}
.reviewReply {
  width:635px;
  float:right;
  height:45px;
  overflow:hidden;
  margin-bottom:30px;
  position:relative;
  top:-25px;
}
.reviewReplyDisplayPic {
  width:45px;
  height:45px;
  margin-right:5px;
  display:inline-block;
  float:left;
}
.reviewReplyContent {
  width:575px;
  padding:5px 5px 0 5px;
  height:40px;
  display:inline-block;
  float:right;
  background-color:#D1D3D4;
  overflow:hidden;
}
.reviewReplyReadMore {
  float:right;
  width:585px;
  height:15px;
  float:right;
  display:inline-block;
  background-color:#D1D3D4;
  background-image:url('../images/Review-Read-More.png');
  position:relative;
  top:0;
  left:0;
  cursor:pointer;
}
#writeAReviewTop {
  margin-top:20px;
  float:left;
  width:175px;
  height:27px;
  border:1px solid #F15A29;
  background-color:#D1D3D4;
}
#seeMore {
  display:inline-block;
  width:auto;
  height:27px;
  font-size:15px;
  line-height:27px;
  color:#F15A29;
  padding-left:5px;
  cursor:pointer;
}
#writeAReviewContainer {
   width:175px;
   height:27px;
   float:right;
   display:inline-block;
   cursor:pointer;
}
#writeAReview {
  width:175px;
  height:27px;
  border:1px solid #F15A29;
  background-color:#D1D3D4;
}
#chatBox {
  width:960px;
  height:337px;
  margin:0 auto;
  background-color:#D1D3D4;
}

HTML elements Moving on Reload page - Chrome only?

More articles: