sass - Weird misalignment in my Susy layout -
the elements set susy span-column() mixin to, not obey it. misaligned ever slightly. how achieve perfect alignment of html elements?
screenshot of full website misalignment
detail : <header> , <nav> misalignment
detail : <section class="main"> misalignment
here sass code
@import compass @import susy @import normalize /* susy settings */ $total-columns : 5 $column-width : 4em $gutter-width : 1em $grid-padding : $gutter-width $desktop : 12 /* susy-grid-background override draw out horizontal lines */ =susy-grid-background +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true) $base-font-size: 18px $base-line-height: 30px +establish-baseline ul background-color: rgba(1, 0, 50, 0.1) li background: rgba(200,50,0,.2) text-align: right background: rgba(0,220,0,.2) display: block h1 +adjust-font-size-to(90px) +adjust-leading-to(4, 90px) +leader(2, 90px) background: rgba(0,20,200,.3) h1#logo +adjust-font-size-to(30px) +adjust-leading-to(2, 30px) +leader(0, 30px) h2 +adjust-font-size-to(25px) +adjust-leading-to(1, 25px) background: rgba(250,250,0,.2) p +leader(1) +trailer(1) background: rgba(0,220,0,.2) .page, header, .pagenav, .main, .pagefoot +transition(all .3s ease) .page +container($total-columns, $desktop) +susy-grid-background /* breakpoints */ +at-breakpoint($desktop) .page +susy-grid-background header float: left +span-columns(2) background: rgba(250,0,0,.2) h1#logo +hide-text float: right +span-columns(2, 2) background: rgba(200,10,250,.1) .pagenav clear: both +span-columns(2, 2) background: rgba(0,140,250,.3) .main +span-columns(10 omega,12) background: rgba(0,240,200,.3) .pagefoot background: rgba(45,0,120,.3) +span-columns(12,12) and html
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href="stylesheets/style.css" media="screen, projection" rel="stylesheet" type="text/css" /> <title>home</title> </head> <body> <div class="page"> <header> <h1 id="logo"> <a href=""> "designer name" </a> </h1> <nav class="pagenav" role="navigation"> <ul> <li> <a href=""> <h2> work </h2> </a> </li> <li> <a href=""> <h2> blog </h2> </a> </li> <li> <a href=""> <h2> </h2> </a> </li> <li> <a href=""> <h2> contact </h2> </a> </li> </ul> </nav> </header> <section class="main"> <h1 id="heading"> main title </h1> <p> smappppin conta naoiw nasdhi aaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdoifj odhfi dhsjkenbrou snfco784ijrh8heuhfs kdjf ksdpppf </p> <h2>a new title</h2> <p> vertical grids compas feature. see compass docs baseline grid background. won't able show both grids @ once on same element without bit more work. maybe should integrate somehow in susy 2.0? vertical grids compas feature. see compass docs baseline grid background. won't able show both grids @ once on same element without bit more work. maybe should integrate somehow in susy 2.0? </p> <p>ajasd nasdi oasd iabjds iausbd kasbd oiausbdi absdiuabsidb aisudb iasbd iabsdi basid baisdb jhavsdjh agvsdk abs klda;is d'asijd aosdu iasd iasid hyi/aisd hah sid haishd iahda sid asihd aihsf ihgiuyerhf 9f3kuhsdffdsfsd </p> </section> <footer class="pagefoot"> <p>made by</p> </footer> </div> </body> </html>
susy grids (by default) fluid on inside. fluid grids suffer amount of sub-pixel rounding on browser end. said, seeing sub-pixel rounding on background grid, worse actual element-rounding. noted in docs - grid background rough guide, not pixel-exact ruler.
susy has isolation options, can used stop sub-pixel errors compounding.
Comments
Post a Comment