I have a child element, that is not fitting inside the parent element (by what looks like 1px), resulting in vertical scroll bars. The problem only occures in old versions of Windows / Internet Explorer. I think it was Windows 7.

More detail: the <label for="toggle">Menu</label> is the element with the scroll bars as it appears to not fit within the <header>. But the height of the header is determined by the label, so I don't understand why this is.

JS Fiddle example: https://jsfiddle.net/a9zkgyx7/

<header>
    <div class="logo"><a href="index.html"><img src="resources/logo.svg"></a></div>
    <input type="checkbox" id="toggle">
    <label for="toggle">Menu</label>
    <nav>
        <ul>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
        </ul>   
    </nav>
</header>





 article, aside, figure, footer, header, main, nav, section {
        display: block;
        }

header { 
    padding:0 3.6rem;
    border-bottom:1px solid;
    overflow:auto;
    }

.logo {
    float:left;
    width:13.2rem;
    }

#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.4rem;
    line-height:7.1rem;
    }


nav {
    height:0;
    overflow:hidden;
    position:absolute;
    top:7.2rem;
    left:0;
    right:0;
    background-color:rgb(255,255,255);
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    }

#toggle:checked ~ nav {
    height: 100%;
    }

1 Answers

1
xmaster On Best Solutions

In your css header you have to change overflow:auto; to overflow:hidden; this will hide your scrollbar.