CSS positioning issues: invalid property value
<p>I have some very simple HTML/CSS code, and no matter what I do, I always get an &quot;invalid property value&quot; exception by chrome, and the logo won't position properly.</p>
<p>Fixed the first problem, but now the image does not move related to the border.</p>
<pre><code>&lt;html lang=&quot;de&quot; xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;title&gt;my website&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;

        *{ padding: 0; margin: 0; }

        .header {
            width: 100%;
            height: 100px;
            border: none;
            border-bottom-style: solid;
            border-bottom-width: 5px;
            position: relative;
            border-bottom-color: rgb(220,30,60);
        }

        .logo {          
            position: absolute;
            padding-bottom:50px;
            height: 150%;
            width: auto;                
        }    
      
    &lt;/style&gt;        
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;header&quot; id=&quot;header&quot;&gt;
        &lt;img id=&quot;logo&quot; class=&quot;logo&quot;  src=&quot;image.png&quot;/&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>