Title: Autoptimize problem
Last modified: August 31, 2016

---

# Autoptimize problem

 *  Resolved [washingtonsblog](https://wordpress.org/support/users/washingtonsblog/)
 * (@washingtonsblog)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/)
 * The W3C CSS Validator shows all sorts of errors on an Autoptimize CSS page on
   my site: [https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.washingtonsblog.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors](https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.washingtonsblog.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors)
 * My site is [Washington’s Blog](http://www.washingtonsblog.com/), and I use Twenty
   Ten.
 * My question is: do I fix these CSS errors through Autoptimize, in my regular 
   style.css, or somewhere else?
 * Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/#post-7426065)
 * in your original CSS (style.css and others, but do take into account that theme
   and plugin updates may squash your changes, creating a child theme is the better
   option), cfr. [https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.washingtonsblog.com%2F%3Fao_noptimize%3D1&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en](https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.washingtonsblog.com%2F%3Fao_noptimize%3D1&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en)
 * frank (ao dev)
 *  Thread Starter [washingtonsblog](https://wordpress.org/support/users/washingtonsblog/)
 * (@washingtonsblog)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/#post-7426210)
 * Frank,
 * I fixed the CSS code. But when I put the critical css in above-the-fold through
   Autoptimize, the website comes up blank. In other words, it somehow blocks ALL
   code from showing.
 * Here’s the above-the-fold CSS code I’m trying to use:
 *     ```
       html,
       body,
       div,
       span,
       h1,
       h2,
       h3,
       p,
       a,
       em,
       img,
       ins,
       center,
       ul,
       li,
       form,
       label {
         background: transparent;
         border: 0;
         margin: 0;
         padding: 0;
         vertical-align: baseline;
       }
   
       body {
         line-height: 1;
       }
   
       h1,
       h2,
       h3 {
         clear: both;
         font-weight: normal;
       }
   
       ul {
         list-style: none;
       }
   
       a img {
         border: none;
       }
   
       #container {
         float: left;
         margin: 0 -240px 0 0;
         width: 100%;
       }
   
       #content {
         margin: 0 245px 0 20px;
       }
   
       #primary {
         float: right;
         overflow: hidden;
         width: 220px;
       }
   
       body,
       input {
         font-family: Georgia, "Bitstream Charter", serif;
       }
   
       #access .menu,
       #site-title,
       .entry-meta,
       .entry-title,
       .navigation,
       .widget-title {
         font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
       }
   
       input[type="submit"] {
         font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
       }
   
       #access .menu-header,
       #branding,
       #main,
       #wrapper {
         margin: 0 auto;
         width: 1012px;
       }
   
       #wrapper {
         background: #fff;
         margin-top: 20px;
         padding: 0 20px;
       }
   
       body {
         background: #f1f1f1;
       }
   
       body,
       input {
         color: #000000;
         font-size: 12px;
         line-height: 18px;
       }
   
       p {
         margin-bottom: 18px;
       }
   
       ul {
         list-style: square;
         margin: 0 0 18px 1.5em;
       }
   
       ul ul {
         margin-bottom: 0;
       }
   
       em {
         font-style: italic;
       }
   
       ins {
         background: #FFFFFF;
         text-decoration: none;
       }
   
       a:link {
         color: #0066cc;
       }
   
       .screen-reader-text {
         clip: rect(1px, 1px, 1px, 1px);
         overflow: hidden;
         position: absolute !important;
         height: 1px;
         width: 1px;
       }
   
       #header {
         padding: 0 0 0 0;
       }
   
       #site-title {
         display: none;
       }
   
       #site-title a {
         display: none;
       }
   
       #site-description {
         display: none;
       }
   
       #branding img {
         display: block;
         float: none;
         width: 900px;
         margin-left: auto;
         margin-right: auto;
       }
   
       #access .menu-header {
         font-size: 13px;
         margin-left: auto;
         margin-right: auto;
         width: 928px;
       }
   
       #access .menu-header ul {
         list-style: none;
         margin: 0;
       }
   
       #access {
         display: block;
         text-align: center;
       }
   
       #access ul {
         display: inline-block;
       }
   
       #access .menu-header li {
         float: left;
         position: relative;
       }
   
       #access a {
         color: #aaa;
         display: block;
         line-height: 20px;
         padding: 0 16px;
         text-decoration: none;
       }
   
       #main {
         clear: both;
         overflow: hidden;
         padding: 40px 0 0 0;
       }
   
       #content {
         margin-bottom: 36px;
       }
   
       #content {
         color: #333;
         font-size: 16px;
         line-height: 24px;
       }
   
       #content p {
         margin-bottom: 24px;
       }
   
       #content h2 {
         color: #000099;
         line-height: 1.5em;
         margin: 0 0 20px 0;
       }
   
       .hentry {
         margin: 0 0 48px 0;
       }
   
       #content .entry-title {
         color: #000;
         font-size: 21px;
         font-weight: bold;
         line-height: 1.3em;
         margin-bottom: 0;
       }
   
       .entry-title a:link {
         color: #000;
         text-decoration: none;
       }
   
       .entry-meta {
         color: #777;
         font-size: 12px;
       }
   
       .entry-content {
         clear: both;
         padding: 12px 0 0 0;
       }
   
       img.wide {
         width: 100%;
         max-width: 100%;
         height: auto;
       }
   
       .entry-meta a {
         color: #777;
       }
   
       .navigation {
         color: #777;
         font-size: 12px;
         line-height: 18px;
         overflow: hidden;
       }
   
       .navigation a:link {
         color: #777;
         text-decoration: none;
       }
   
       .nav-previous {
         float: left;
         width: 50%;
       }
   
       .nav-next {
         float: right;
         text-align: right;
         width: 50%;
       }
   
       #nav-above {
         margin: 0 0 18px 0;
       }
   
       #nav-above {
         display: none;
       }
   
       input[type="submit"] {
         color: #333;
       }
   
       .widget-area ul {
         list-style: none;
         margin-left: 0;
       }
   
       .widget-area ul ul {
         list-style: square;
         margin-left: 1.3em;
       }
   
       .widget_search label {
         display: none;
       }
   
       .widget-container {
         word-wrap: break-word;
         -webkit-hyphens: auto;
         -moz-hyphens: auto;
         hyphens: auto;
         margin: 0 0 18px 0;
       }
   
       .widget-title {
         color: #222;
         font-weight: bold;
       }
   
       .widget-area a:link {
         text-decoration: none;
       }
   
       @media only screen and (max-device-width: 480px) {
         .widget-area {
           display: none !important;
         }
   
         #main .widget-area ul {
           margin-left: 0;
           padding: 0 20px 0 0;
         }
   
         #main .widget-area ul ul {
           border: none;
           margin-left: 1.3em;
           padding: 0;
         }
   
         #access,
         .entry-meta,
         .navigation,
         .widget-area {
           -webkit-text-size-adjust: 120%;
         }
   
         #site-description {
           -webkit-text-size-adjust: none;
         }
       }
       ```
   
 *  [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/#post-7426214)
 * [the CSS optimizer AO uses](https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port/)
   can in some cases crash (well, [technically it’s PCRE, the regex-component in PHP that crashes](http://blog.futtta.be/2014/01/14/irregular-expressions-have-your-stack-for-lunch/)).
   as per [the FAQ](https://wordpress.org/plugins/autoptimize/faq/) you could try
   with the legacy minifier?
 * frank
 *  Thread Starter [washingtonsblog](https://wordpress.org/support/users/washingtonsblog/)
 * (@washingtonsblog)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/#post-7426218)
 * Frank,
 * Thank you! Got it working with:
 * define(“AUTOPTIMIZE_LEGACY_MINIFIERS”,”true”);
 * Now, I’ve got to beat back that render-blocking JavaScript and CSS in above-the-
   fold …

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Autoptimize problem’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [errors](https://wordpress.org/support/topic-tag/errors/)
 * [Stylesheet](https://wordpress.org/support/topic-tag/stylesheet/)

 * 4 replies
 * 2 participants
 * Last reply from: [washingtonsblog](https://wordpress.org/support/users/washingtonsblog/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/autoptimize-4/#post-7426218)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics