CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 7004

Error in parsing value for 'border-radius'. Declaration dropped. (and others)

I've got a super simple site I'm experimenting with jquery. I've a CSS stylesheet but some of the properties are just getting ignored. For example, I'm setting the padding and border-radius properties. I checked the browser (firefox, though chrome is the same):

Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12

Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15

Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15

Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7

Error in parsing value for 'height'. Declaration dropped.

Even width and height, which I've actually managed to set for some other divs! It seems totally random, some properties just don't get parsed, such as the border-radius.

So the result (snippet below) looks like this: enter image description here

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

$(document).ready(function() {
   $('.square').mouseenter(function() {
       $(this).animate({
           width: '+=30px'
       });
   });
   $('.square').mouseleave(function() {
       $(this).animate({
           width: '-=30px'
       });
   });
   $('.square').click(function() {
       $(this).toggle(1000);
   });
   
   var size = 10;
   var graphData = [new Array(size),new Array(size)];
   
   var column1 = graphData[0];
   var column2 = graphData[1];
   
   column1[0] = "Data1";
   column2[0] = "Data2";
   
   for (i = 1; i < column1.length; i++) {
	   column1[i] = i;
	   column2[i] = 2*i;
	}
   
   var chart = c3.generate({
	    bindto: '#chart',
	    data: {
	        columns: [
	            ['Data set 1'].concat(column1),
	            ['Data set 2'].concat(column2)
	        ],
	        types: {
		        'Data set 1': "step",
		        'Data set 2': "step"
	        }
	    }
	});
   
   
   
});

function drawBasic() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Dogs');
    
  
    var size = 40;
    var column1 = new Array(size);
    
    var last = 0;
    for (i = 0; i < column1.length; i++) {
    	var newn = last + (0.5 - Math.random());
 	   column1[i] = [i,newn];
 	   last = newn;
 	}
    data.addRows(column1);


    var options = { 
      hAxis: {
        title: 'Time2'
      },	
      vAxis: {
        title: 'Popularity'
      }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
@CHARSET "ISO-8859-1";

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}

.blockspace {
	height:70px;
    width:400px;
    
    margin-left:auto;
    margin-right:auto;
    
    padding:10;
    
	border-radius:10;
	background-color:#c8d8e8;
}

.square {
	border-radius:10;
	height:50px;
    width:50px;
    display: inline-block;
}

.chart {
	width:350;
	height:300;
	display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-1">
	<title>Hello World!</title>
	
	<!-- Load c3.css -->
	<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
	<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
	<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
	<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
	
	<!-- Load d3.js and c3.js -->
	<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="libraries/c3-0.4.10/c3.min.js"></script>
	<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
      
	
	<!-- Load jquery and script -->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
	<h1>A big hello</h1>
	<p>Why don't you enjoy these coloured squares:</p>
	<div class="blockspace">
		<div class="square" id="red"></div>
		<div class="square" id="blue"></div>
		<div class="square" id="yellow"></div>
		<div class="square" id="green"></div>
	</div>
	
	<div class="chartExperiments">
		<div class="chart" id="chart"></div>
		<div class="chart" id="chart_div"></div>
	</div>
</body>
</html>

Upvotes: 3

Views: 11455

Answers (1)

Vinicio Ajuchan
Vinicio Ajuchan

Reputation: 370

You forget to define the unit of measure, so just add the unit of measure and the issue will be resolved.

.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}

.square {
    border-radius:10px; <--px unit of measure
    height:50px;
    width:50px;
    display: inline-block;
}

Upvotes: 7

Related Questions