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

Question

I'm working on building a responsive website and I have run into an issue where, upon scrolling, there looks to be about two or three extra pixels at the bottom of the page beyond the content.

I'm not sure where they're coming from or how to get rid of them. They appear to be inside of the overall container but outside of the header and content blocks. I'm assuming it's some kind of margin issue?

Any assistance would be greatly 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 is horizontal, second is vertical. */
    transform: scale(1.2, .8);
    /* W3C */
    -webkit-transform: scale(1.2, .8);
    /* Safari and 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;
    }
}

if you expand/shrink your browser to make it taller and shorter, do the three pixels remain? — Casey Crookston, Jun 10 '15 at 17:40
also, to make your html easier to read, can you indent the divs to match the opening and closing tags? — Casey Crookston, Jun 10 '15 at 17:41
I edited the formatting of your code. In the future, please only post the *relevant* code to reproduce this problem. Also, in jsfiddle you don't need to add the html and body tags. JSFiddle also allows for a *normalize* (CSS Reset) option in the left hand pane. — Bram Vanroy, Jun 10 '15 at 18:14

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Set your img's style to include display: block; or vertical-align: middle;

http://jsfiddle.net/85a6a52t/1/ (See very bottom of CSS panel)

#slideshow img { display: block; }

or

#slideshow img { vertical-align: middle; }

Reference to this good answer that explains issue

edited May 23 '17 at 11:51

Community

1
1

answered Jun 10 '15 at 18:09

Alex

8,353
9
45
56

My hero! Thank you that worked--will have to read more about block as an attribute of display to understand why that happened. – quasimp Jun 10 '15 at 18:12
1

@quasimp Check the link in my updated answer for an explanation. Basically `img` tags are inline by default, so they work like text, including space below. – Alex Jun 10 '15 at 18:13

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

1 Answers1