Grow your CSS skills. Land your dream job.

IE7 Problem Safari 3 & Firefox 3 Win Mac Fine

  • # May 22, 2009 at 6:32 am

    Hi,

    I have a simple page with rounded corners that shows up strange in IE7 (1st image)

    [img]http://img.skitch.com/20090522-md5gxfy6k8aafhu9w4qn48gip8.jpg[/img]

    But shows up fine in Safari 3 & Firefox 3 on Windows or Mac.

    [img]http://img.skitch.com/20090522-e4a2h227epc6rhsf4sb1j794xy.jpg[/img]

    1) I am looking for help how I could get the margin left to show properly in IE7 (Flush left & up with picture above it)
    2) Try to to solve the rounded corners issue in the IE7 screenshot (1st image)

    Here is my css file:

    Code:
    * { margin: 0; padding: 0; }
    body { background-color: #a8bdc6; background-image: url(bgofpage.gif); background-repeat: repeat-x repeat-y; font-size: 82.5%; font-family: Georgia, serif;}
    p { font-size:1.2em; color: #f4f8fb; }
    .floatLeft { float: left; }
    .floatRight { float: right; }
    .clear { clear: both; }
    .imagecenter { text-align: center; }

    div#page-wrap { width: 680px; margin-top: 75px; margin-left: auto; margin-right: auto; }

    #dl_nav { font-size: 70%; text-align: center; }
    #dl_nav ul { list-style: none; margin: 0 0 0 0px; padding: 0; padding-top: .5em; }
    #dl_nav li { display: inline; }
    #dl_nav a:link, #dl_nav a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; background-image: url(buttonbg1.gif); text-decoration: none; border: 1px solid #711515; }

    #dl_nav a:hover { color: #FFFFFF; background-color: #711515; background-image: url(buttonbg1.gif); }
    #videodirective { text-align: center; margin-bottom: 4px; }
    #menucenter { margin-left: 11px; margin-bottom: 0px; margin-right: 0px; margin-top: 0px; background-color: black; width: 654px; min-height: 70px; }

    .mainbox { width: 678px; background: url(mainbox_vertmiddle.gif) center repeat-y; margin: 10px 0; }
    .mainbox .inside { padding: 0 20px; }

    HTML

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    </p> <link rel="stylesheet" type="text/css" href="style.css"/> <p> <!--[if lt IE 7]></p> <style> @import "http://www.site.com/_css/ie6.css"; </style> <p> < ![endif]--></p> <p> </head></p> <style> div.overlay { padding:40px; width:576px; display:none; background-image:url(/img2/white.png); }</p> <p>div.overlay div.close { background:url(/img2/close.png) no-repeat; position:absolute; top:2px; right:5px; width:35px; height:35px; cursor:pointer; }</p> <p>div.overlay a { height:450px; display:block; } </style> <p> <body></p> <div id="page-wrap"> <div class="mainbox"> <img src="mainbox_top.gif" alt="" width="678" height="10"/></p> <div class="imagecenter"> <p> <img src="couple.jpg" alt="" border="0" /> </p> <div id="menucenter"> <div id="videodirective"> <p> <img src="videodirective.gif" alt="videodirective" width="319" height="21"/> </div> <div id="dl_nav"> <!-- link up overlay --></p> <ul> <li><a href="#" rel="div.overlay" <p> title="" >Flash High</a></li> <li><a href=# rel="nofollow">High MP4</a></li> </ul> </p></div> </p></div> <div class="imagecenter"> </p> <p>Content</p> <p>Date</p> <p> <img src="logo.gif" alt="logo" width="655" height="36"/></p></div> <p> <img src="mainbox_bottom.gif" alt="mainbox_bottom" width="678" height="12"/></p></div> </p></div> <div id="footer"> footer </div> </p></div> <p></body><br /> </html></div> </div> <p>Thanks very much for taking a look *</p> <p>Jeff</p> </div><!-- .bbp-reply-content --> </div><!-- .reply --> </div> <div class="forums-module"> <div id="post-57959" class="bbp-reply-header"> <div class="bbp-meta"> <span class="bbp-admin-links"></span> </div><!-- .bbp-meta --> </div><!-- #post-57959 --> <div class="post-57959 reply type-reply status-publish hentry even bbp-parent-forum-22504 bbp-parent-topic-24919 bbp-reply-position-2 user-id-14635 topic-author"> <div class="bbp-reply-author"> <a href="http://css-tricks.com/forums/users/med267/" title="View med267's profile" class="bbp-author-avatar" rel="nofollow"><img alt='' src='http://0.gravatar.com/avatar/0094c14f0674dbc8adb0fc534e0f5b9b?s=160&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D160&r=PG' class='avatar avatar-160 photo' height='160' width='160' /></a> </div><!-- .bbp-reply-author --> <div class="bbp-reply-content"> <div class="reply-name"> <a href="http://css-tricks.com/forums/users/med267/" title="View med267's profile" class="bbp-author-name" rel="nofollow">med267</a> </div> <div class="reply-date"> <a href="http://css-tricks.com/forums/topic/ie7-problem-safari-3-firefox-3-win-mac-fine/#post-57959" title="Re: IE7 Problem Safari 3 & Firefox 3 Win Mac Fine" class="bbp-reply-permalink">#</a> May 22, 2009 at 7:09 am </div> <p>I guess in my first screenshot of my IE7 problem, it doesnt show very clear. (sorry)</p> <p>The #menucenter shows up in IE7 off center to the right & a small amount of pixels down from the 655 x 258 image above it. (I am trying to have it flush to the left & up flush to the large image above it.</p> </div><!-- .bbp-reply-content --> </div><!-- .reply --> </div> </li><!-- .bbp-body --> </ul><!-- #topic-24919-replies --> <div class="bbp-pagination"> <div class="bbp-pagination-count"> Viewing 2 posts - 1 through 2 (of 2 total) </div> <div class="bbp-pagination-links"> </div> </div> <div id="no-reply-24919" class="bbp-no-reply"> <div class="bbp-template-notice"> <p>You must be logged in to reply to this topic.</p> </div> </div> </div> </div> </div> <aside class="grid-1-3"> <div class="module group"> <form name="loginform" id="loginform" action="/wp-login.php" method="post" class="forums-login-form"> <h4>Login</h4> <div class="login-username login-field"> <label for="user_login" class="screen-reader">Username</label> <input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Username"> </div> <div class="login-password login-field"> <label for="user_pass" class="screen-reader">Password</label> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password"> </div> <div class="login-remember login-field"> <label> <input name="rememberme" type="checkbox" id="rememberme" value="forever"> Remember Me </label> </div> <div class="login-submit"> <input type="hidden" name="redirect_to" value="/forums/"> <input type="submit" name="wp-submit" id="wp-submit" class="button" value="Log In"> </div> </form> <p> Forget you password? You can <a href="/wp-login.php?action=lostpassword">reset it</a>. </p> <p> Not a Member Yet? Registering is free and only takes a second. </p> <a href="/wp-login.php?action=register" class="button"> Register </a> </div> <div class="module"> <select class="topic-select" id="topic-select"> <option value="choose">Choose Forum</option> <option value="css">CSS Combat</option> <option value="design">Design Den</option> <option value="js">JavaScript Jungle</option> <option value="php">PHP Problems</option> <option value="other">Other Discussions</option> </select> <a href="#" class="disabled button full-width-button" id="new-thread-button">Post New Thread</a> </div> <div class="module text"> <h4>Tips</h4> <ul> <li>Use a live demo tool like <a href="http://codepen.io/pen/">CodePen</a> to demonstrate problems.</li> <li>In otherwords, a <a href="http://css-tricks.com/reduced-test-cases/">reduced test case</a>.</li> <li>Be cool.</li> </ul> </div> </aside> </div> <script src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-11/js/forums-ck.js"></script> </div> <footer class="site-footer social-footer group"> <h2 class="upcomer">Social</h2> <ul class="social-list"> <li> <a href="http://twitter.com/chriscoyier" class="social-twitter"> <svg viewBox="0 0 100 100" class="shape-twitter"> <use xlink:href="#shape-twitter"></use> </svg> <span>Twitter <span>@chriscoyier</span></span> </a> </li> <li> <a href="http://twitter.com/real_css_tricks" class="social-twitter"> <svg viewBox="0 0 100 100" class="shape-twitter"> <use xlink:href="#shape-twitter"></use> </svg> <span>Twitter <span>@real_css_tricks</span></span> </a> </li> <li> <a href="http://pinboard.in/u:chriscoyier" class="social-pinboard"> <svg viewBox="0 0 100 100" class="shape-pinboard"> <use xlink:href="#shape-pinboard"></use> </svg> <span>Pinboard <span>chriscoyier</span></span> </a> </li> <li> <a href="http://facebook.com/CSSTricks" class="social-facebook"> <svg viewBox="0 0 100 100" class="shape-facebook"> <use xlink:href="#shape-facebook"></use> </svg> <span>Facebook <span>CSSTricks</span></span> </a> </li> <li> <a href="http://dribbble.com/chriscoyier" class="social-dribbble"> <svg viewBox="0 0 100 100" class="shape-dribble"> <use xlink:href="#shape-dribbble"></use> </svg> <span>Dribbble <span>chriscoyier</span></span> </a> </li> <li> <a href="http://plus.google.com/101987072260327250694/posts" class="social-googleplus"> <svg viewBox="0 0 100 100" class="shape-googleplus"> <use xlink:href="#googleplus-1"></use> </svg> <svg viewBox="0 0 100 100" class="shape-googleplus"> <use xlink:href="#googleplus-2"></use> </svg> <svg viewBox="0 0 100 100" class="shape-googleplus"> <use xlink:href="#googleplus-3"></use> </svg> <span>Google+ <span>ChrisCoyier</span></span> </a> </li> <li> <a href="http://www.youtube.com/realcsstricks" class="social-youtube"> <svg viewBox="0 0 100 100" class="shape-youtube"> <use xlink:href="#shape-youtube"></use> </svg> <span>YouTube <span>realcsstricks</span></span> </a> </li> <li> <a href="http://codepen.io/chriscoyier" class="social-codepen"> <svg viewBox="0 0 100 100" class="shape-codepen"> <use xlink:href="#codepen-1"></use> </svg> <svg viewBox="0 0 100 100" class="shape-codepen"> <use xlink:href="#codepen-2"></use> </svg> <span>CodePen <span>chriscoyier</span></span> </a> </li> <li> <a href="https://github.com/chriscoyier/" class="social-github"> <svg viewBox="0 0 100 100" class="shape-github"> <use xlink:href="#shape-github"></use> </svg> <span>GitHub <span>chriscoyier</span></span> </a> </li> <li> <a href="https://github.com/CSS-Tricks/" class="social-github"> <svg viewBox="0 0 100 100" class="shape-github"> <use xlink:href="#shape-github"></use> </svg> <span>GitHub <span>CSS-Tricks Org</span></span> </a> </li> </ul> </footer> <footer class="site-footer promo-footer group"> <h2 class="upcomer">Projects</h2> <div class="promo-footer-part footer-codepen group"> <a href="http://codepen.io/hello/" class="promo-footer-logo"> <svg viewBox="0 0 100 100" class="shape-codepen"> <use xlink:href="#codepen-1"></use> </svg> <svg viewBox="0 0 100 100" class="shape-codepen"> <use xlink:href="#codepen-2"></use> </svg> </a> <p> <a href="http://codepen.io"> CodePen </a> is a social code playground for web designers and developers. Build demos, find inspiration, or troubleshoot code. With <a href="http://codepen.io/pro/">CodePen PRO</a> you can teach students, pair program, host files, and more! </p> </div> <div class="promo-footer-part footer-shoptalk group"> <a href="http://shoptalkshow.com" class="promo-footer-logo"> <img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-11/images/shoptalk2.svg" alt="ShopTalk Logo"> </a> <p> <a href="http://shoptalkshow.com"> ShopTalk </a> is a podcast about all things web design and development hosted by Dave Rupert and me. The show is recorded live and covers the week in #hotdrama and listener Q&A. </p> </div> </footer> <footer class="site-footer footer-links"> <h2 class="upcomer">Linkage</h2> <p> <a href="/contact/">Contact</a> <a href="/advertising/">Advertise</a> <a href="/license/">License</a> <a href="/archives/">Archives</a> <a href="/store/">Store</a> </p> </footer> <footer class="site-footer footer-slogan"> <h2 class="upcomer">Colophon</h2> <p>CSS-Tricks* is created, written by, and maintained by <a href="http://chriscoyier.net">Chris Coyier</a>. It is built on <a href="http://wordpress.org/">WordPress</a>, hosted by <a href="http://www.mediatemple.net/#a_aid=4e25c84480ed2">Media Temple</a> and <a href="http://tracking.maxcdn.com/c/13088/3982/378">MaxCDN</a>. Fonts are Gotham Rounded, Noto Sans, and Menlo.</p> </footer> <p class="mega-big-time-warning"><small>*May or may not contain any actual "CSS" or "Tricks".</small></p> </div> <svg style="display: none;"> <defs> <path id="shape-tab" d="M100,25C79.568,25,84.815,0,59.692,0H11.149C5.027,0,0,4.634,0,10.385V25"/> <path id="shape-tab-right" d="M0,25C20.432,25,15.185,0,40.308,0h48.543C94.973,0,100,4.634,100,10.385V25"/> <path id="shape-search" d="M3.327,96.684C5.534,98.895,8.434,100,11.331,100s5.797-1.105,8.004-3.316l21.321-21.322 c5.83,3.188,12.393,4.897,19.223,4.897c10.721,0,20.798-4.172,28.379-11.752c15.646-15.644,15.646-41.105,0.002-56.755 C80.677,4.171,70.598,0,59.877,0C49.159,0,39.08,4.171,31.504,11.752c-7.581,7.576-11.756,17.655-11.756,28.376 c0,6.832,1.71,13.396,4.9,19.226L3.327,80.675C-1.096,85.094-1.096,92.266,3.327,96.684z M59.879,68.938 c-7.695,0-14.93-2.996-20.371-8.435c-5.443-5.442-8.439-12.677-8.439-20.375c0-7.695,2.996-14.933,8.439-20.372 c5.441-5.44,12.676-8.436,20.369-8.436c7.698,0,14.936,2.997,20.378,8.436c11.231,11.236,11.231,29.515,0,40.747 C74.812,65.941,67.575,68.938,59.879,68.938z"/> <g id="shape-rss"> <path id="rss-1" d="M7.336,62.163c-0.388-0.075-0.783-0.112-1.171-0.112c-1.42,0-2.81,0.491-3.923,1.409C0.822,64.632,0,66.375,0,68.216 v25.617C0,97.238,2.76,100,6.166,100h25.616c1.84,0,3.586-0.822,4.757-2.243c1.17-1.421,1.646-3.287,1.297-5.098 C34.876,77.378,22.62,65.12,7.336,62.163z"/> <path id="rss-2" d="M6.764,30.957c-0.199-0.02-0.399-0.029-0.597-0.029c-1.525,0-3.005,0.563-4.142,1.6C0.733,33.699,0,35.357,0,37.096v3.098 c0,3.164,2.394,5.812,5.536,6.136C30.838,48.92,51.08,69.161,53.672,94.462c0.322,3.146,2.973,5.539,6.135,5.539h3.098 c1.74,0,3.398-0.732,4.566-2.023c1.168-1.286,1.738-3.009,1.571-4.74C65.841,60.349,39.65,34.158,6.764,30.957z"/> <path id="rss-3" d="M99.986,93.431C96.732,43.428,56.568,3.268,6.565,0.012C6.432,0.005,6.298,0,6.166,0C4.604,0,3.095,0.593,1.95,1.667 C0.705,2.832,0,4.461,0,6.167v3.088c0,3.247,2.515,5.938,5.752,6.155c42.113,2.832,76.006,36.726,78.839,78.84 c0.22,3.235,2.907,5.75,6.151,5.75h3.091c1.706,0,3.335-0.706,4.5-1.95C99.498,96.805,100.098,95.135,99.986,93.431z"/> </g> <path id="shape-itunes" d="M34.654,21.67v51.301c-3.423-1.393-7.51-1.871-11.754-1.022c-9.634,1.928-16.208,9.67-14.68,17.297 c1.523,7.625,10.569,12.248,20.207,10.315c8.682-1.733,14.819-8.198,14.837-15.049h0.059V40.005l39.008-14.997v33.717 c-3.424-1.391-7.51-1.871-11.753-1.021c-9.634,1.928-16.207,9.67-14.68,17.297c1.522,7.627,10.57,12.248,20.206,10.318 c8.147-1.632,14.055-7.437,14.764-13.808H91V0L34.654,21.67z"/> <path id="shape-email" d="M44.933,98.093C19.882,92.443,3.579,72.894,6.295,42.843C8.963,13.331,32.181-0.745,54.983,0.03 c18.222,0.615,37.405,13.801,38.936,38.896c0.718,11.746-3.373,22.681-9.981,29.42c-8.577,8.746-19.542,10.468-28.546,9.201 C41.647,75.631,27.999,66.319,28.748,46.28c0.265-7.127,3.676-14.744,9.178-19.788c3.56-3.269,9.475-5.933,15.366-5.743 c6.368,0.208,11.371,3.154,14.656,7.464c5.83,7.661,5.674,19.918,5.456,21.124c0,0-0.04,0.302-0.095,0.712 c-0.147,0.997-0.982,1.743-1.95,1.735l-30.047-0.182c-0.141-0.004-0.28,0.066-0.375,0.186c-0.094,0.118-0.142,0.273-0.116,0.413 c2.068,11.762,13.149,13.718,15.739,14.062c3.146,0.427,11.645,1.258,18.699-5.78c4.832-4.81,7.071-9.829,7.429-21.025 c0.353-10.708-8.132-28.569-31.131-28.653c-12.009-0.044-31.643,10.088-33.57,33.223C16.083,66.766,28.553,84.02,48.54,87.51 c27.377,4.776,38.256-7.408,38.256-7.408c0.507-0.308,1.099-0.148,1.333,0.354l4.324,8.51c0.108,0.229,0.194,0.541,0.108,0.824 c-0.093,0.273-0.172,0.361-0.468,0.604C92.101,90.392,76.226,105.138,44.933,98.093z M42.286,39.479 c-0.085,0.199-0.124,0.412-0.046,0.593c0.079,0.177,0.25,0.29,0.438,0.29l19.159,0.143c0.147,0.004,0.297-0.066,0.405-0.193 c0.102-0.129,0.146-0.291,0.125-0.442c-0.296-1.804-0.866-3.609-1.965-5.027c-1.515-1.965-4.542-3.288-7.953-3.187 c-3.004,0.09-5.087,1.144-7.031,2.97C43.801,36.147,42.614,38.669,42.286,39.479z"/> <path id="shape-scissors" d="M88.781,68.58c-4.819-6.068-13.189-8.268-20.355-6.131l-7.984-10.054L86.98,13.793c2.142-3.177,1.713-7.589-0.952-9.786 C83.359,1.808,81.184,0,81.184,0L50.001,39.257L18.818,0c0,0-2.176,1.808-4.842,4.007c-2.665,2.197-3.095,6.609-0.954,9.786 l26.541,38.603l-7.987,10.054c-7.174-2.137-15.536,0.062-20.354,6.131c-3.182,3.998-4.641,9.024-4.117,14.147 c0.531,5.122,2.991,9.732,6.912,12.973c3.359,2.772,7.586,4.3,11.898,4.3c5.738,0,11.095-2.602,14.71-7.148 c3.176-4.006,4.642-9.027,4.111-14.148c-0.074-0.719-0.271-1.396-0.418-2.089l5.684-8.635l5.681,8.635 c-0.146,0.692-0.342,1.37-0.414,2.089c-0.532,5.121,0.937,10.143,4.11,14.148C62.991,97.398,68.352,100,74.086,100 c4.315,0,8.54-1.527,11.892-4.3c3.932-3.24,6.389-7.85,6.918-12.974C93.42,77.604,91.964,72.577,88.781,68.58z M32.61,86.229 c-2.896,3.634-8.506,4.266-12.097,1.292c-1.788-1.466-2.901-3.562-3.145-5.888c-0.242-2.328,0.423-4.617,1.875-6.439 c1.638-2.067,4.076-3.246,6.684-3.246c1.987,0,3.856,0.672,5.406,1.959c1.789,1.467,2.905,3.562,3.145,5.889 C34.712,82.125,34.046,84.411,32.61,86.229z M49.994,57.923c-2.849,0-5.159-2.355-5.159-5.258c0-2.905,2.31-5.261,5.159-5.261 c2.847,0,5.16,2.356,5.16,5.261C55.153,55.567,52.841,57.923,49.994,57.923z M79.488,87.521c-3.587,2.973-9.204,2.342-12.09-1.286 c-1.443-1.823-2.107-4.109-1.876-6.438c0.243-2.325,1.357-4.421,3.151-5.895c1.544-1.281,3.412-1.951,5.401-1.951 c2.603,0,5.045,1.177,6.685,3.251c1.449,1.815,2.114,4.103,1.87,6.431C82.391,83.961,81.276,86.056,79.488,87.521z"/> <path id="shape-dribbble" d="M52.988,50.438c0.556-0.181,1.116-0.347,1.68-0.508c-1.069-2.426-2.237-4.854-3.46-7.248 C29.881,49.066,9.185,48.8,7.314,48.76c-0.012,0.436-0.022,0.871-0.022,1.308c0,10.969,4.161,20.981,10.981,28.555 C19.242,76.965,30.96,57.558,52.988,50.438z M47.677,36.116c-7.075-12.579-14.706-23.154-15.833-24.7 c-11.948,5.636-20.88,16.651-23.65,29.902C10.105,41.345,27.701,41.421,47.677,36.116z M78.312,18.12 c-7.543-6.691-17.457-10.763-28.31-10.763c-3.443,0-6.797,0.415-10.006,1.19c1.179,1.58,8.935,12.142,15.933,25.001 C71.116,27.856,77.543,19.214,78.312,18.12z M62.044,46.084c0.314,0.736,0.622,1.472,0.921,2.201 c14.209-1.785,28.327,1.08,29.737,1.375c-0.094-10.081-3.696-19.337-9.646-26.603c-0.899,1.218-8.055,10.396-23.846,16.84 C60.206,41.931,61.158,44,62.044,46.084z M57.291,57.087c-24.087,8.396-32.735,25.099-33.504,26.672 c7.243,5.645,16.342,9.014,26.215,9.014c5.916,0,11.556-1.21,16.681-3.394c-0.635-3.747-3.115-16.807-9.107-32.388 C57.479,57.024,57.387,57.054,57.291,57.087z M50.002,100C22.43,100,0,77.569,0,50.001C0,22.432,22.43,0,50.002,0 C77.573,0,100,22.432,100,50.001C100,77.569,77.573,100,50.002,100z M65.564,55.02c5.587,15.349,7.862,27.852,8.3,30.448 c9.578-6.479,16.402-16.741,18.306-28.624C90.707,56.384,78.952,52.877,65.564,55.02z"/> <path id="shape-facebook" d="M94.48,0H5.519C2.471,0,0,2.471,0,5.52v88.96c0,3.049,2.47,5.521,5.519,5.521h63.479L53.411,100V61.273h-13.03V46.181 h13.03v-11.13c0-12.916,7.89-19.949,19.412-19.949c5.52,0,10.263,0.41,11.645,0.595v13.497l-7.991,0.004 c-6.265,0-7.479,2.979-7.479,7.348v9.636h14.945l-1.947,15.093H68.998v38.726H94.48c3.047,0,5.52-2.472,5.52-5.521V5.52 C100,2.471,97.529,0,94.48,0z"/> <path id="shape-github" d="M50.049,0.3c14.18,0.332,25.969,5.307,35.366,14.923S99.675,36.9,100,51.409c-0.195,11.445-3.415,21.494-9.658,30.146 c-6.244,8.65-14.406,14.772-24.488,18.366c-1.234,0.199-2.112,0.017-2.633-0.549c-0.521-0.565-0.781-1.215-0.781-1.946 l0.098-14.074c0-2.396-0.342-4.377-1.023-5.939c-0.684-1.564-1.479-2.745-2.391-3.544c5.788-0.399,10.977-2.312,15.561-5.739 c4.586-3.428,7.01-9.934,7.27-19.517c0-2.795-0.455-5.324-1.366-7.586c-0.91-2.263-2.179-4.293-3.805-6.09 c0.391-0.665,0.716-2.196,0.976-4.592c0.262-2.396-0.229-5.391-1.463-8.983c0-0.2-1.105-0.15-3.316,0.149 c-2.211,0.299-5.691,2.013-10.439,5.141c-4.032-1.131-8.18-1.697-12.438-1.697c-4.26,0-8.439,0.566-12.537,1.697 c-4.748-3.128-8.228-4.841-10.439-5.141c-2.211-0.3-3.317-0.35-3.317-0.149c-1.235,3.593-1.723,6.588-1.463,8.983 c0.26,2.396,0.585,3.927,0.976,4.592c-1.626,1.73-2.894,3.743-3.805,6.039c-0.911,2.296-1.366,4.842-1.366,7.637 c0.26,9.518,2.667,16.006,7.219,19.466c4.553,3.461,9.724,5.391,15.512,5.79c-0.715,0.599-1.366,1.464-1.951,2.596 s-1.008,2.528-1.268,4.192c-1.561,0.865-3.772,1.281-6.634,1.248c-2.862-0.033-5.496-1.881-7.902-5.54 c0-0.2-0.65-1.032-1.951-2.496c-1.301-1.464-3.187-2.396-5.659-2.795c-0.325-0.066-0.976,0.05-1.951,0.35 c-0.976,0.3-0.456,1.214,1.561,2.745c0.065-0.066,0.699,0.449,1.902,1.547c1.203,1.1,2.423,3.078,3.659,5.939 c-0.195,0.466,0.862,1.863,3.17,4.191c2.309,2.329,6.846,2.93,13.61,1.797l0.098,9.483c0,0.731-0.26,1.381-0.781,1.946 c-0.52,0.564-1.398,0.748-2.634,0.549c-10.082-3.594-18.244-9.716-24.488-18.367C3.415,72.604,0.195,62.556,0,51.11 C0.325,36.602,5.187,24.54,14.585,14.923C23.984,5.308,35.772,0.333,49.951,0L50.049,0.3z"/> <g id="shape-googleplus"> <path id="googleplus-1" d="M44.438,59.102c-0.699-0.091-1.137-0.091-2.012-0.091c-0.789,0-5.518,0.177-9.193,1.441 c-1.927,0.714-7.527,2.868-7.527,9.237c0,6.375,6.041,10.957,15.408,10.957c8.406,0,12.873-4.139,12.873-9.694 C53.984,66.364,51.096,63.945,44.438,59.102z"/> <path id="googleplus-2" d="M49.167,35.495c0-6.463-3.768-16.514-11.029-16.514c-2.283,0-4.729,1.168-6.133,2.965c-1.49,1.887-1.923,4.301-1.923,6.643 c0,6.01,3.412,15.971,10.944,15.971c2.188,0,4.543-1.07,5.953-2.509C48.991,39.979,49.167,37.112,49.167,35.495z"/> <path id="googleplus-3" d="M96.879,0H3.121C1.396,0,0,1.428,0,3.19v93.615c0,1.766,1.396,3.193,3.121,3.193h93.758c1.727,0,3.121-1.43,3.121-3.193 V3.19C100,1.428,98.604,0,96.879,0z M36.819,84.409c-12.697,0-18.821-6.188-18.821-12.836c0-3.229,1.572-7.804,6.739-10.945 c5.425-3.41,12.784-3.856,16.726-4.135c-1.231-1.614-2.628-3.318-2.628-6.1c0-1.523,0.438-2.422,0.872-3.5 c-0.966,0.092-1.923,0.18-2.8,0.18c-9.277,0-14.53-7.095-14.53-14.094c0-4.123,1.836-8.703,5.6-12.025 c4.994-4.217,11.815-5.361,16.549-5.361h17.25l-5.692,3.659h-5.426c2.013,1.702,6.211,5.293,6.211,12.116 c0,6.638-3.675,9.787-7.348,12.746c-1.141,1.164-2.455,2.42-2.455,4.398c0,1.969,1.314,3.044,2.275,3.859l3.155,2.507 c3.853,3.319,7.354,6.371,7.353,12.569C59.848,75.887,51.877,84.409,36.819,84.409z M83.404,48.903h-8.801v9.027H70.27v-9.027 h-8.758v-4.48h8.758v-8.975h4.334v8.975h8.801V48.903z"/> </g> <path id="shape-pinboard" d="M51.447,59.185c0,0-12.542,12.915-18.583,17.828c-3.561-7.274,2.275-18.725,2.275-18.725l-23.604-30.95 c0,0-7.694,3.517-11.535,2.013C9.471,19.252,19.254,9.47,29.352,0c1.434,3.759-2.012,11.283-2.012,11.283l30.701,23.854 c0,0,11.578-5.927,18.977-2.275c-4.955,5.917-17.83,18.33-17.83,18.33s27.875,31.664,40.66,48.649c0.353,0.301,0.021,0.098-0.252,0 C83.035,86.802,51.447,59.185,51.447,59.185z"/> <path id="shape-twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339 c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8 c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155 c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651 c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744 c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077 c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336 c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"/> <path id="shape-youtube" d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16 c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001 c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14 c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509 S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036 c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"/> <g id="shape-codepen"> <path id="codepen-1" d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789 C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789 C91.788,73.042,73.042,91.789,50,91.789z"/> <path id="codepen-2" d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223 c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13 c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161 c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104 c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531 c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091 c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143 c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124 c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193 c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115 c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114 c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195 c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122 c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144 c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091 c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447 l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127 c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115 c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177 c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128 c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581 C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707 v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417 l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704 l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"/> </g> <path id="shape-arrow-right" d="M0,49.993c0,7.387,6.007,13.394,13.396,13.394h40.691L42.898,74.407c-2.543,2.507-3.94,5.827-3.94,9.36 c0,3.539,1.407,6.863,3.952,9.364C45.428,95.616,48.809,97,52.402,97c3.6,0,6.978-1.384,9.516-3.891l34.159-33.623 c2.53-2.489,3.923-5.81,3.923-9.342v-0.307c0-3.545-1.4-6.867-3.943-9.358L61.914,6.869c-5.243-5.16-13.775-5.16-19.014,0 c-2.539,2.495-3.942,5.821-3.942,9.354c0,3.535,1.403,6.862,3.942,9.354L54.1,36.604H13.396C6.012,36.604,0.001,42.61,0,49.993z"/> </defs> </svg> <script type='text/javascript'> /* <![CDATA[ */ var pollsL10n = {"ajax_url":"http:\/\/css-tricks.com\/wp-admin\/admin-ajax.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"0","show_fading":"1"}; /* ]]> */ </script> <script type='text/javascript' src='http://cdn.css-tricks.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.67'></script> <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201448'></script> <script src='http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-11/js/global-ck.js?v=3.0'></script> <script async src="//codepen.io/assets/embed/ei.js"></script> <script> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-68528-29']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })(); </script> <script> /* <![CDATA[ */ var google_conversion_id = 1017883234; var google_conversion_label = "BsxVCM7ImAMQ4tSu5QM"; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1017883234/?value=0&label=BsxVCM7ImAMQ4tSu5QM&guid=ON&script=0"> </div> </noscript> </body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/ Page Caching using memcached (Requested URI is rejected) Object Caching 2478/2522 objects using memcached Fragment Caching 0/0 fragments using memcached Content Delivery Network via cdn.css-tricks.com Served from: css-tricks.com @ 2014-11-26 20:00:42 by W3 Total Cache -->