Hi Kristian, i never used calc() but i think browsers will render your
boxes unpredictable if you mix borders-widths of em and widths in %. I
assume that zooming then causes each browser to round widths differently.
Best
Ludwig
On Tue, Apr 7, 2015 at 10: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 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/
--
Ludwig Bekic
A-1030 Wien, Wedlgasse 3/23
Mail: lbe...@gmail.com
Web: www.gelberTraktor.at
Mobile: +43 676 9173757
______________________________________________________________________
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/
