Css Positioning Issues: Invalid Property Value

CSS positioning issues: invalid property value

I just don't understand why you used padding-bottom instead of bottom in this case. Anyway:

   <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>my website</title>
        <style type="text/css">
             *{ padding: 0; margin: 0; } 
            .header {
                position: relative;
                height: 100px;
                border-bottom: 5px solid rgb(220,30,60);
            }
            .logo {
                position: absolute;
                bottom:50px;
                height: 150%;
                width: auto;
            }
        </style>
    </head>
    <body>
     <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
     </div>
    </body>
    </html>

CSS bottom property: http://www.w3schools.com/cssref/pr_pos_bottom.asp

CSS padding-bottom property: http://www.w3schools.com/cssref/pr_padding-bottom.asp

CSS Invalid Property Value?

change

background-color:

background:

Because background is a shorthand property for

background-color
background-image
background-position
background-repeat
background-attachment

display: relative error: invalid property value when width and height of parent are set

You want position: absolute; and position: relative; not display: absolute; and display: relative;.

You are applying values for the position property to the display property.

a not styling inside li tag, displaying invalid property value when I inspect element for CSS values

your css have unknow unicode in a.btn and a.btn:hover

I replaced the front character with a blank space

enter image description here

h2 {  position: absolute;  z-index: 1;  top: 140px;  color: #FFF;  padding-left: 4%;}
ul {     position: absolute;     z-index: 1;    top: 290px;    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;    margin-left: 10em;}
li {  float: left;  padding-right: 40px}
a.btn1 {  display: inline-block;  padding: 0.3em 1.2em;  margin: 0 0.3em 0.3em 0;  border-radius: 2em;  box-sizing: border-box;  text-decoration: none;  font-weight: 300;  color: #FFFFFF;  background-color: #4eb5f1;  text-align: center;  transition: all 0.2s;}a.btn1:hover{  background-color: #4095c6;}

<div>  <img style="width: 40%" src="https://i.imgur.com/wNLc5fC.jpg">  <div>    <h2>Digital Assets For Creative Professionals</h2>  </div>  <div>    <ul>      <li>        <a href="" class="btn1">Photo</a>      </li>      <li>        <a href="" class="btn1">Video</a>      </li>      <li>        <a href="" class="btn1">Motion</a>      </li>        </ul>  </div></div>

Invalid property value for align-text css

text-align: none is invalid.

If you want to have it be the default alignment, you need to do:

text-align: inherit

But, you should really set it to one of the following:

text-align: left or text-align: justify or text-align: center or text-align: right

Why does the browser try to use an otherwise invalid property declaration when I introduce a CSS variable?

This how CSS variables are meant to work. When using CSS variables the browser can only evalute the value at run-time so the value will be considered as valid (or lets say in a standby mode) until we evalute the variable and if the browser find the whole value invalid, it will fallback to initial or inherit:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ^ref

A more explicit example with a clearly non valid value:

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}

Invalid property value with HTML / SASS element

Two issues, you can't nest calc and you can only have one unit declaration.

You need something like

$iconDivSize: 200;
.iconDiv {    
    .icon {        
        height: calc(#{$iconDivSize}px / 60.8 * #{$iconDivSize});
    }
}

Demo

SVG Background: Invalid property value, but no encoding problem, no size problem, correct SVG data

I think there are problems with your string. Use this URL-Encoder to compare your differences.

EDIT: I found this question with the same issue. (may be this is a
duplicated)

Quick example:

section {
position: relative;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.1);
}

section:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1759' height='487'%3E%3Cpath fill-rule='evenodd' d='M.275 486.998v-71.289l195.433-17.134 272.605 36.139 354.025-40.084 376.837 22.027 167.116-33.691 123.525 10.183v-90.097c-19.37-7.076-33.993-19.779-41.836-37.348-12.608.575-23.677-2.665-34.94-4.042-11.307-1.384-9.418-2.978-20.29-11.748-6.322-7.559-25.001-23.314-19.396-53.32-54.99-8.674-7.704-61.466-19.727-38.411 6.692-12.833 16.4-22.991 29.181-30.047-17.93-26.729.239-59.614 26.875-62.722 4.146-.484 8.045-.83 10.293-7.007 7.362-20.224 21.257-35.519 40.076-46.175C1478.063 2.033 1497.6-1.056 1517.926.559c11.874.944 23.17 4.624 33.822 9.938 10.682 5.329 19.499 13.147 27.424 21.958 10.107 11.238 16.863 24.342 19.687 39.136 1.733 9.071 2.123 18.399 3.179 28.198 2.566 0 5.628-.463 8.504.076 17.91 3.357 33.729 10.548 46.525 24.14 20.512 21.785 26.021 47.316 17.87 75.256-8.23 28.216-28.42 45.136-56.394 53.167-1.31.376-2.851 1.283-3.508 2.4-8.365 14.199-20.443 21.727-37.183 21.019-3.065-.13-4.823.98-6.917 3.515-7.53 9.11-16.14 17.19-27.673 21.065-8.299 2.789-16.779 5.039-25.166 7.524v87.653l240.027 20.105v71.289H.275z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
}

<section>
This is an example section </section>

Css Positioning Issues: Invalid Property Value