Invalid property value css ошибка padding

I am getting invalid property value for padding and I don’t know why. This code is written in ruby btw. When I check with the browser it has the right value pixels, however it is crossed out w a line and it isn’t reading that attribute. Thanks in advance.

<% mywaldo = Mapping::MYWALDOS.sample %>
<!doctype html>
<html>
  <head>
    <title>Sinatra Single-Serve</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <style>
      div {
        width: 1024px;
        height: 768px;
        background-image: url("img/waldos/<%= mywaldo[0]%>") ;
      }
      #waldo {
        position:absolute;
        top: <%= mywaldo[2]%>;
        left: <%= mywaldo[1]%>;
        padding: <%= mywaldo[3]%>, <%= mywaldo[4]%>;
      }
    </style>
  </head>
  <body>
    <div>
      <a id="waldo" href="">AA</a>
    </div>
    <%= yield %> 
  </body>
</html>

asked Apr 25, 2013 at 16:21

There should not be a comma between your values:

    padding: <%= mywaldo[3]%> <%= mywaldo[4]%>;

answered Apr 25, 2013 at 16:26

ScottSScottS

71.3k13 gold badges123 silver badges144 bronze badges

Источник

I have some very simple HTML/CSS code, and no matter what I do, I always get an «invalid property value» exception by chrome, and the logo won’t position properly.

Fixed the first problem, but now the image does not move related to the border.

<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 {
            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;                
        }    
      
    </style>        
</head>

<body>
    <div class="header" id="header">
        <img id="logo" class="logo"  src="image.png"/>
    </div>
</body>
</html>

asked Nov 8, 2016 at 14:20

I had a similar issue for me.

I wrote 10 (instead of 10px), this fixed the issue.

answered Mar 15, 2019 at 3:20

If you are using single quotes in your css, Please remove single quotes from your css file.

For Example

// Wrong
.row{
    margin-left:'-16px !important';
    margin-right:'0px !important';
}

// Right
.row{
    margin-left:-16px !important;
    margin-right:0px !important;
}

answered Oct 14, 2020 at 10:03

Ayush BangaAyush Banga

2494 silver badges3 bronze badges

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

johnmcase

1,7312 gold badges16 silver badges27 bronze badges

answered Nov 8, 2016 at 14:27

VixedVixed

3,3295 gold badges37 silver badges68 bronze badges

There’s a space before the px in padding-bottom:50 px;. Fix:

padding-bottom: 50px;

answered Nov 8, 2016 at 14:23

Paul RedmondPaul Redmond

3,2564 gold badges30 silver badges52 bronze badges

Источник

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

11.10.2014, 17:15. Показов 52986. Ответов 3

Метки нет (Все метки)

Такая борода (скрин вложил).

CSS

.head-contact{
    float: right;
    background: #f8farb url('images/phone-image.jpg') right top no-repeat;
    border: 2px solid #edf2f6;
    border-radius: 0 0 10px 10px;
    text-align: right;
    margin: 0 6px 0 0;
    padding:  5px 10px;
}

Попрошу без шуток. Я начинающий. В чем проблема? Почему не отображается?

Миниатюры

Invalid property value

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 18:12

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Почему не отображается?

По иерархии есть стили, которые перекрывают css-правило «background» для «.head-contact». Смотрите там же в инспекторе, где еще определяется это свойство.

KoRNeT46RuS

1 / 1 / 1

Регистрация: 07.03.2012

Сообщений: 78

11.10.2014, 19:58

[ТС]

Цитата
Сообщение от Lazy_Den
Посмотреть сообщение

CSS

*{
    margin: 0;
    padding: 0;
}
img{
    border: none;
}
body{
    background: #f2f2f2;
}
.main{
    background: #fff;
    min-width: 980px;
    max-width: 1200px;
    margin: 0 auto;
}
    /*Шапка сайта*/
    .header{
        overflow: hidden;
    }
    .logo, slogan{
        float: left;
    }
    .logo{
        margin: 8px 0 0 30px;
    }
    .slogan{
        margin: 40px 0 30px 30px;
    }
    .head-contact{
        float: right;
        background: #f8farb url('images/phone-image.jpg') 250px 8px no-repeat;
        border: 2px solid #edf2f6;
        border-radius: 0 0 10px 10px;
        text-align: right;
        margin: 0 6px 0 0;
        padding:  5px 65px 5px 15px;
    }

Вот весь код. Я найти конфликт не могу

3322 / 2842 / 1423

Регистрация: 15.01.2014

Сообщений: 6,170

11.10.2014, 20:24

Лучший ответ Сообщение было отмечено KoRNeT46RuS как решение

Решение

Цитата
Сообщение от KoRNeT46RuS
Посмотреть сообщение

Я найти конфликт не могу

Мде… Можно было бы долго искать. У вас HEX-код цвета (#f8farb) не корректный. Таблица «безопасных» цветов

Источник

недопустимое значение свойства для заполнения

Я получаю недопустимое значение свойства для заполнения, и я не знаю, почему. Этот код написан на рубине, кстати. Когда я проверяю браузер, он имеет правильное значение пикселей, однако он перечеркнут строку и не читает этот атрибут. Заранее спасибо.

<% mywaldo = Mapping::MYWALDOS.sample %>
<!doctype html>
<html>
  <head>
    <title>Sinatra Single-Serve</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <style>
      div {
        width: 1024px;
        height: 768px;
        background-image: url("img/waldos/<%= mywaldo[0]%>") ;
      }
      #waldo {
        position:absolute;
        top: <%= mywaldo[2]%>;
        left: <%= mywaldo[1]%>;
        padding: <%= mywaldo[3]%>, <%= mywaldo[4]%>;
      }
    </style>
  </head>
  <body>
    <div>
      <a id="waldo" href="">AA</a>
    </div>
    <%= yield %> 
  </body>
</html>

Между вашими значениями не должно быть запятой:

    padding: <%= mywaldo[3]%> <%= mywaldo[4]%>;

ответ дан 25 апр.

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками

css
ruby
html

or задайте свой вопрос.

Источник

Извините за вопрос, который, вероятно, задавали тысячу раз, но я не мог найти ответа. Я не знаю, почему браузер дает мне Invalid property value для margin-left: 0 auto, но каким-то образом добавляется небольшой запас слева (это ошибка рендеринга?). На самом деле он работает без -left, но я не знаю почему.

Полный пример кода: http://jsfiddle.net/zw7n0h2j/5/

#wrapper {
  width:800px;
}

.figure {
    display: block;
    /* margin: 0; */
    margin-left: 0 auto;
    width: 50%; 
}

.figure img {
    width: 100%;
}

.figure figcaption { 
    width: 100%;
}

<div id="wrapper">
    <figure class="figure" >
        <img src="https://via.placeholder.com/350x150" />
        <figcaption>My caption</figcaption>
    </figure> 
</div>

2 ответа

Лучший ответ

margin-left не может иметь несколько аргументов. в отличие от margin. поэтому margin-left: 0 auto недопустим, поскольку 0 и auto — два отдельных аргумента, а margin: 0 auto действителен, поскольку это сокращение для

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Они применяются по часовой стрелке, поэтому, если вы сделаете margin: 12px, 13px, 14px, 15px;, поля будут применяться к верхнему, правому, нижнему и левому элементам с уважением.

Подробнее об этом читайте здесь.

Laif
6 Май 2021 в 01:09

Вы можете добавить поля слева от элемента, используя margin-left: 10px.

Вы также можете использовать сокращенное свойство margin, которое следует по часовой стрелке, начиная сверху и до упора влево. [поле: вверху справа внизу слева]

Если вы хотите применить поле 10 пикселей слева от элемента, вы можете использовать margin: 0 0 0 10px

Или, если вы хотите применить поле 10 пикселей как справа, так и слева от элемента, используя сокращенное свойство поля, вы можете использовать margin: 0 10px

Для получения дополнительной информации вы можете обратиться к этой статье о CSS. маржинальные свойства по MDN.

Sanchit Bajaj
6 Май 2021 в 11:27

Источник

В общем все написано правильно вроде как, но не отрабатывает, а через tool возле заданного стиля animation желтый треугольник и надпись invalid property value. как это можно исправить

КОД:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>
    
        <div class="wave">
            <div class="wave__one"></div>
            <div class="wave__two"></div>
        </div>

</body>
</html>

CSS:

body{
	padding:0;
	margin:0;
	background-color: #555;
}

.wave{
	width:100%;
	overflow: hidden;
	position:relative;
}

.wave__one {
		background:url("img/wave/wave_top.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 15s infinite lianer;
		position:absolute;
		top:0;
	}

.wave__two {
		background:url("img/wave/wave_top_opacity.png") repeat-x;
		width:7000px;
		height: 218px;
		animation: waves 10s infinite lianer;
		position:relative;
		top:0;
	}

@keyframes waves {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -1938px;
	}
}

Источник

Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

I’m using bootstrap to style a web page I’m building.

On one of the pages, I have a jumbotron and a header that is inside it which I’m trying to display a background image. However, when I inspect the element I get an «Invalid property value» message. I know my path is right, just don’t know what else it could be. I’ve also tried removing the header and using the jumbotron itself to display the image but I get the same error. Any help would be appreciated.

Thanks,

<!DOCTYPE html>
<body>
<?php include"Header/header.php";?>
  <div class="wrap">
    <div class="jumbotron">
    <header class="adventure">
      <p>This is what adventure looks like</p>
    </header>
  </div>
  <div class="col-sm-12 main-video">
    <video controls>
      <source src="Videos/or-opening.mov" type="video/mp4">
    </video>
    <video controls>
      <source src="Videos/losemyself.mov" type="video/mp4">
    </video>
  </div>
  </div>
<?php include "Header/footer.php";?>
</body>
</html>

HERE IS THE CSS

.adventure {
  text-align: center;
  background: ("../Images/descend.jpg") no-repeat top center;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}

1 Answer

i m not sure but you have to add url to your path

 background-image: url("../Images/descend.jpg");

if no works this will work 100%

 background-image: url("../Images/descend.jpg")!important;

Источник

На чтение 2 мин. Опубликовано 15.12.2019

Есть вот такое свойство:

Однако хром не показывает ни один из этих фонов, я уже Nцать раз проверил — синтакс правильный, а хром пишет Invalid property value. Огнелис туда же — просто игнорирует. Что такое?

Посмотреть можно здесь в самом низу.

Вопрос задан более трёх лет назад
3528 просмотров

You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

I have some very simple HTML/CSS code, and no matter what I do, I always get an «invalid property value» exception by chrome, and the logo won’t position properly. Thanks for any help.

Fixed the first problem, but now the image does not move related to the border. Sorry, but I’m totally new to web design and need a little bit of help.

I put the below CSS rules in database that are valid in Google Chrome:

When I try to add this rules to a div with JQuery, this rule merged as single rule and get invalid value

How do I know why it is invalid?

If you’ve identified this as a bug this is a bug with a recent version of JQuery, you should report it to the JQuery GitHub issues page; Not here.

A workaround would be to simply set the the style attribute manually.

Источник

Invalid property value css ошибка padding

Решение

2 ответа

Welcome to the Treehouse Community

Looking to learn something new?

1 Answer

А вот еще интересные материалы: