html - Google Chrome is forcing my div to position absolute and some other properties -


google chrome seems changing properties of body div. whenever go inspect css different original code. code working fine in other browsers. have been trying sorts of things nothing seems working. main problem body div expanding more 100%. didn't have problem beginning started happen recently.

html code:

<html> <link href="websitestyles.css" rel="stylesheet" type="text/css" /></link>  <div class="header"> <h1 class="sitetitle">gstraatsma photography</h1> </div> <div class= "nav">   <ul class = navagation>     <li class= "pagelink1"><a class="active" href="#home">home</a></li>     <li class= "pagelink"><a href="#news">photos</a></li>     <li class= "pagelink"><a href="#contact">contact me</a></li>     <li class= "pagelink2"><a class="round" href="#contact">about me</a> </li> </ul> </div> <div class= "body"> <h2 class= "firstheader">welcome gstraatsma photography</h2> <p>welcome personal photography website! on site, posting photography. specialize in animals, landscapes, , waterscapes; other types of photography. made site share photography world love if told people. on instagram <a href= "https://www.instagram.com/gstraatsma_photography/?hl=en"> @gstraatsma_photography</a>, there post pictures take, of pictures post on instagram on site. pictures posted here first on instagram later.</p> <p>if see picture like, can contact me email @ <a href= "mailto: gstraatsmaphotography@gmail.com">gstraatsmaphotography@gmail.com</a> love feedback please participate in survey down below.</p>  <h2>send me feedback</h2> <div class= "survey">     <script>(function(t, e, n, o){var s, c, r; t.smcx = t.smcx || [], e.getelementbyid(o) || (s = e.getelementsbytagname(n), c = s[s.length - 1], r = e.createelement(n), r.type = "text/javascript", r.async = !0, r.id = o, r.src = ["https:" === location.protocol?"https://":"http://", "widget.surveymonkey.com/collect/website/js/wgryq7rgrb8ahgta_2fqb3bze8cwzyywuevwywv59rth5elrd3u_2fhuktovrhl1tcxm.js"].join(""), c.parentnode.insertbefore(r, c))})(window, document, "script", "smcx-sdk");</script> </div> <h2>featured images</h2> <div class= "picturedisplay">     <div class= "picture" style="background-position:center;background-repeat:no-repeat;background-image:url(/pictures/background2.jpg)">     </div> </div> </div> </div> </html>

css:

html { background-image: url("/pictures/background2.jpg"); background-size: 100em auto; background-attachment: fixed; background-repeat: no-repeat; background-position-y: center; }  .header { position: relative; background-image: url("/pictures/header.jpg"); background-size: 100em auto; background-position-y: 800px; width: 100%; height: 200px; border-radius: 10px 10px 0px 0px; }  .sitetitle{ padding-left: 100px; padding-top: 30px; font-family:"poor richard", calibri, arial; color: #ff5d00; font-size: 70px; font-style: italic; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; }  div.nav { position: static; width: 100%; height: 40px; border-radius: 10px; }  .navagation { list-style-type:none; margin: 0; padding: 0; width: 100%; border-radius: 10px; } li a.active { background-color: 282828; color: #ff5d00; border-radius: 0px 0px 0px 10px; }  li a.round { border-radius: 0px 0px 10px 0px; }  li a:hover:not(.active) { background-color: #555; color: #ff5d00; }  li { display: block; color: #000; padding: 8px 16px; background-color: 444242; text-decoration: none; color: #ff5d00; }  .pagelink { float: left; background-color: 444242; width: 25%; font-family:"poor richard", calibri, arial; font-size: 20px; }  .pagelink1 { float: left; background-color: 444242; width: 25%; font-family:"poor richard", calibri, arial; font-size: 20px; border-radius: 0px 0px 0px 10px; }  .pagelink2 { float: left; background-color: 444242; width: 25%; font-family:"poor richard", calibri, arial; font-size: 20px; border-radius: 0px 0px 10px 0px; }   .footer {  position: absolute; background-color: #444242; width: 100%; height: 30px; border-radius: 10px; clear: both; }  .footertext { text-align: center; font-family:"poor richard", calibri, arial; color: #ff5d00; }  .threadbit .thread {  -webkit-box-sizing: border-box; /* safari/chrome, other webkit */ -moz-box-sizing: border-box;    /* firefox, other gecko */ box-sizing: border-box;         /* opera/ie 8+ */ }  .body { margin-top: 10px; border-radius: 10px; position: relative; width: 100%; height: 90%; background: rgba(211, 211, 211, .5); overflow: auto; outline-style: none;  }  .firstheader { padding-top: 10px; padding-left: 10px; font-family:"poor richard", calibri, arial; }  h2 { padding-left: 10px; font-family:"poor richard", calibri, arial; color: #212121; }  p { padding-left: 10px; font-family:"poor richard", calibri, arial; font-size: 19px; color: #212121; }  .test { position: relative; float: left; width: 300px; height: 300px; background-color: black; } .survey{ padding-left: 0px; }  .picturedisplay { position: absolute; width: 100%; height: auto; }  .picture { float: left; position: relative; width: 20%; height: 100px; }

i had same issue , hours , hours of research later unfixable. found due chrome platform , how "decodes" webpages.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more