[css-d] White line between block content when zoom

Tue, 07 Apr 2015 02:00:07 -0700

I'm having an issue with Chrome, which does not line up the 2 boxes 'section' and 'aside'. If I zoom my browser window, the space between the 2 boxes gets larger or disappears and the line up perfectly like 'nav' and 'section. 

I've tried to use px instead of em, but that does not change the result.

Any ideas what is happening and how this can be fixed?

body {  font-family: Verdana,Arial,sans-serif; }

div#content {
    width: 90%;
    margin:2em auto;
    background-color: #00ff21; }

header {
    background-color: #ffd800;
    border: solid black 0.1em; }

    header h1 {
        text-align: center;
        font-size: 3em;        }

section {
    background-color: #ffd800;
    border: solid black 0.1em;
    width: calc(40% - 0.6em);
    float: left;
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin:0;                  }


nav {
    background-color: #ffd800;
    border: solid black 0.1em;
    width: calc(20% - 0.6em);
    float: left;
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin:0;                 }

nav ul{
        padding-left:0;       }
nav ul li{
    list-style-type:none;     }

aside {
    background-color: #ffd800;
    border: solid black 0.1em;
    width: calc(40% - 0.6em);
    float: right;
    padding: 0.2em 0.2em 0.2em 0.2em;
    margin:0;                }

code {
    background-color: #ffd800;
    border: solid black 0.1em;
    width: auto;
    display: block;
    margin: 1em;
    padding: 0.2em;          }

footer {
    clear: both;
    border: solid black 0.1em;
    text-align:center;       }

footer ul li{
    display:inline;
    font-size:0.6em;
    padding:0 1.5em 0 1.5em; }



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
    <link href="css/style.css" rel="stylesheet" media="screen" />
    <title>Template</title>
</head>
<body>
    <content>
        <header>
            <h1>header lorem ipsum</h1>
        </header>

        <nav>
            <ul>
                <li>Præsentation</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
            nav lorem ipsum
        </nav>

        <section>
            section lorem ipsum
        </section>

        <aside>
            aside lorem ipsum
            <code>code 1 lorem ipsum</code>
            <code>code 2 lorem ipsum</code>
            <code>code 3 lorem ipsum</code>
            <code>code 4 lorem ipsum</code>
        </aside>
        <footer>
            <ul>
<li><strong>Studieretning</strong>Akademiuddannelse i IT</li> 
                <li><strong>Fag</strong>Client-side</li>
                <li><strong>Navn</strong>Kristian Dahlgaard</li>
                <li><strong>Vejleder</strong>Per Ole Kjeldsen</li>
<li><strong>Uddannelses institution</strong>Smartlearning</li> 
            </ul>
        </footer>
    </content>
</body>
</html>


______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to