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

Kristian Dahlgaard Tue, 07 Apr 2015 23:38:26 -0700

Thanks guys for the feedback.

I have tried to change my padding and border or just border from em to%, but that did not fix it, allthough it looked a lot better with asmaller gap.

I then tried to change aside and nav to width to 20/40% - 0.9em andsection width: 40%;

No luck either.

My end result will probably be without borders and background colors,but it's interesting to see the result from the findings :o) Nothing isas easy at it seams.


Best regards
Kristian


John Andrews skrev den 2015-04-07 19:34:

You can avoid the calc in the section by putting the nav first in thebody

floated left as you have, then put the aside floated right as you have,

then take the calc width of the section out and let it fit in betweenthe

left and right portions.

It seems to work for me.

---  John Andrews
(forgot to reply all)

On Tue, Apr 7, 2015 at 4:59 AM, Kristian Dahlgaard<krist...@nicedane.dk>

wrote:

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 largeror

disappears and the line up perfectly like 'nav' and 'section.

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


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/

______________________________________________________________________
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/

______________________________________________________________________
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/

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

Reply via email to