html - Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them? -

-

i'm working on building responsive website , have run issue where, upon scrolling, there looks 2 or 3 pixels @ bottom of page beyond content.

i'm not sure they're coming or how rid of them. appear inside of overall container outside of header , content blocks. i'm assuming it's kind of margin issue?

any assistance appreciated!

js fiddle here: http://jsfiddle.net/bramvanroy/toxk8lde/1/

html

<div id="container">     <div id="header">         <div id="headerleft">             <div id="logo">                 <img src="http://mbeach.me/arch/images/layout/logo_100.png" alt="miles arch logo" id="miles_arch_logo" />             </div>             <div id="companyname">                 <span id="miles_arch">miles architecture group</span>             </div>         </div>         <div id="headerright">             <div id="navmenu">                 <img src="http://mbeach.me/arch/images/layout/menu_button.png" id="nav_menu_button" alt="menu_button" />             </div>         </div>     </div>     <div id="content">         <div id="slideshow">             <img src="http://mbeach.me/arch/images/layout/main_background.jpg" alt="" />             <div id="leftright"></div>             <div id="buttons"></div>         </div>     </div> </div>

css

html {     font-size: 100%; } body {     font-size: 1em;     background:; } #container {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     border: 0px solid yellow; } #header {     width: 100%;     background: #fff;     border-bottom: 4px solid #ffa500;     display: inline-block; } #headerleft {     display: inherit;     padding-bottom: 26px; } #logo {     display: inherit; } #miles_arch_logo {     position: relative;     top: 15px;     margin-left: 30px;     width: 100px;     height: 101px; } #companyname {     margin-left: 92px;     margin-right: 37px;     display: inherit;     font-size: 32px;     position: relative;     top: -20px;     color: #105697;     font-family: arial, sans-serif;     letter-spacing: .05em;     /* below rescales font: first number horizontal, second vertical. */     transform: scale(1.2, .8);     /* w3c */     -webkit-transform: scale(1.2, .8);     /* safari , chrome */     -moz-transform: scale(1.2, .8);     /* firefox */     -ms-transform: scale(1.2, .8);     /* ie 9 */     -o-transform: scale(1.2, .8);     /* opera */ } #headerright {     display: inherit; } #navmenu {     width: 50px;     height: 41px;     position: absolute;     right: 44px;     top: 44px; } #nav_menu_button {     width: 50px;     height: 41px; } #content {     width: 100%;     max-width: 100%;     position: absolute;     top: 136px;     bottom: 0px;     border-bottom: 0px solid yellow;     margin: 0;     padding: 0; } #slideshow {     overflow: hidden; } #slideshow img {     width: 100%;     /*position: relative;     margin-top: -100px;*/ } #leftright {     position: absolute;     border: 0px solid red;     top: 0px;     width: 50px;     height: 50px; } #buttons {     position: absolute;     border: 0px solid red;     top: 0px;     left: 50px;     width: 50px;     height: 50px; } /* resizes header info depending on screen size. */  @media (max-width: 1375px) {     /*#slideshow {         height: 531px;         overflow: hidden;     }     #slideshow img {     width: 100%;     border: 0px solid red;     }*/ } @media (max-width: 800px) {     /*#slideshow {         height: 428px;         overflow: hidden;     }     #slideshow img {     width: 800px;     border: 0px solid red;     }*/     #companyname {         font-size: 22px;         margin-left: 52px;         margin-right: 37px;     }     #miles_arch_logo {         width: 70%;         height: 70%;     }     #nav_menu_button {         width: 80%;         height: 80%;     }     #content {         top: 126px;     } } @media (max-width: 700px) {     #companyname {         font-size: 18px;         margin-left: 22px;         margin-right: 37px;         top: -10px;     }     #miles_arch_logo {         width: 50%;         height: 50%;     }     #navmenu {         right: 20px;         top: 35px;     }     #nav_menu_button {         width: 60%;         height: 60%;     }     #content {         top: 99px;     } } @media (max-width: 500px) {     #companyname {         font-size: 16px;         margin-left: 22px;         margin-right: 37px;         top: 2px;     }     #miles_arch_logo {         width: 35%;         height: 35%;     }     #navmenu {         right: 8px;         top: 28px;     }     #nav_menu_button {         width: 55%;         height: 55%;     }     #content {         top: 79px;     } } @media (max-width: 425px) {     #companyname {         font-size: 12px;         margin-left: 2px;         margin-right: 37px;         top: 2px;     }     #miles_arch_logo {         width: 30%;         height: 30%;     }     #navmenu {         right: 5px;         top: 28px;     }     #nav_menu_button {         width: 50%;         height: 50%;     }     #content {         top: 72px;     } }

set img's style include display: block; or vertical-align: middle;

http://jsfiddle.net/85a6a52t/1/ (see bottom of css panel)

#slideshow img { display: block; }

or

#slideshow img { vertical-align: middle; }

reference answer explains issue


Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more