css - HTML Elements Moving on Page Reload - Chrome Only? -
i experiencing trouble floated elements displayed improperly on page refresh. behavior has been recorded in chrome (36.0.1985.143m) , steam browser. behavior occurs on mac os x 10.9.4, mac os x 10.7, mac os x 10.6.8, , windows 7.
tested include safari 7.0.6 on mac os x 10.9.4, safari 7.0.6 on mac os x 10.7, firefox 3.6.10 on mac os x 10.6.8, safari 5.1.10 mac os x 10.6.8, firefox 31 on windows 7, ie11 on windows 7, ie9 on windows 7.
i running coldfusion 9.0.2 on iis 7.5 on windows server 2008 r2. however, there 0 server-side scripting being done on page (or other related resources). update: using server-side scripting show or hide divs based on section parameter in query string. all.
here link demo. prefer source, below. http://craftdeck.com/mockup2/profile.cfm?section=store
here rendered html.
<!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"> </div> <div id="functions"> <span> create account </span> <span> login </span> <span> </span> <span> contact </span> </div> </div> <span style="clear:both; height:0; line-height:0;"> </span> <div id="profileheader"> <div id="displayimage"> </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, 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 enim. pellentesque convallis, nunc ut facilisis adipiscing, dui libero dignissim dui, @ 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;"> </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 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 have made updates mockup need progress thing asap! have determined bug occurs far more whilst navigating between sections of profile using "shop", "reviews", , "chat" navigation buttons.
update2:
i have installed modified version (for html5 documents) eric meyer's css reset profile.css file. there has been no change in bug's status however.
update3:
as pointed out bracketsage in comment below, embedded css not have problem. have included html commented version of stylesheet embedded in head tag. if uncommented , link external stylesheet removed, bug no longer occurs... interesting.
update4:
i have embedded stylesheet , removed references external stylesheets (the old one, updated 1 user bracketsage below). can seen viewing source of html html comments in head tag. if external stylesheets referenced, bug still present... i've removed bug temporarily because developing on bug annoying f***
i seem have working..
one of things did file replace \r nothing , use \n strictly because bugging me in regex tests. repeated refreshes in chrome keeping in place.
another thing put mass-tag-fixer on 1 line. don't know helped.
i did remove styles you'd commented out, , admittedly, comment mass-tag-refixer. know you'll want put back.
i renamed profile.css new.css (only testing) , suggest similar random cache doesn't disappoint you.
here's css 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; } { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours suit needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours suit 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 suit 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; } 
Comments
Post a Comment