Make all styles important

Mark all inline styles as important and remove border margin and padding.
conzett · Feb 3, 2012 · 5a69823 · 5a69823
1 parent 1df2b33
commit 5a69823
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 27 deletions.
diff --git a/grid-checker.js b/grid-checker.js
@@ -46,33 +46,40 @@ gridChecker = function (ColumnWidth, ColumnMargin, RowHeight, InnerPadding, Targ
 		container.parentNode.removeChild(container);
 	}
 
-	s = 'height: 100%;';
-	s += 'position: absolute;';
-	s += 'top: 0;';
-	s += 'background-color: white;';
-	s += 'opacity: .3;';
-	s += 'filter:alpha(opacity=30);';
-	s += 'overflow: hidden';
+	s = 'height: 100% !important;';
+	s += 'position: absolute  !important;';
+	s += 'top: 0 !important;';
+	s += 'margin: 0 !important;';
+	s += 'border: none !important;';
+	s += 'padding: 0 !important;';
+	s += 'background-color: white !important;';
+	s += 'opacity: .3 !important;';
+	s += 'filter:alpha(opacity=30) !important;';
+	s += 'overflow: hidden !important;';
 
 	container = document.createElement('div');
 	container.setAttribute('id', 'grid-checker');
 	container.setAttribute('style', s);
 
-	s = 'margin: 0 ' + InnerPadding + 'px;';
-	s += 'background-color: Gray;';
-	s += 'height: 100%;';
-	s += 'opacity: .4;';
-	s += 'filter:alpha(opacity=40);';
+	s = 'margin: 0 ' + InnerPadding + 'px  !important;';
+	s += 'background-color: Gray !important;';
+	s += 'height: 100% !important;';
+	s += 'opacity: .4 !important;';
+	s += 'filter:alpha(opacity=40) !important;';
+	s += 'padding: 0 !important;';
+	s += 'border: none !important;';
 
 	inner = document.createElement('div');
 	inner.setAttribute('class', 'gc-inner');
 	inner.setAttribute('style', s);
 
-	s = 'width: ' + ColumnWidth + 'px;';
-	s += 'margin: 0 ' + ColumnMargin + 'px;';
-	s += 'height: 100%;';
-	s += 'background-color: pink;';
-	s += 'float: left;';
+	s = 'width: ' + ColumnWidth + 'px !important;';
+	s += 'margin: 0 ' + ColumnMargin + 'px !important;';
+	s += 'padding: 0 !important;';
+	s += 'border: none !important;';
+	s += 'height: 100% !important;';
+	s += 'background-color: pink !important;';
+	s += 'float: left !important;';
 
 	column = document.createElement('div');
 	column.className = "gc-column";
@@ -83,24 +90,30 @@ gridChecker = function (ColumnWidth, ColumnMargin, RowHeight, InnerPadding, Targ
 		container.appendChild(column.cloneNode(true));
 	}
 
-	s = "position: absolute;";
-	s += 'width: 100%;';
-	s += 'opacity: .2;';
-	s += 'filter:alpha(opacity=20);';
+	s = "position: absolute !important;";
+	s += 'width: 100% !important;';
+	s += 'opacity: .2 !important;';
+	s += 'margin: 0 !important;';
+	s += 'padding: 0 !important;';
+	s += 'border: none !important;';
+	s += 'filter:alpha(opacity=20) !important;';
 
 	rowContainer = document.createElement('div');
 	rowContainer.setAttribute('class', 'gc-row-container');
 	rowContainer.setAttribute('style', s);
 
-	s = 'height: ' + RowHeight + 'px;';
+	s = 'height: ' + RowHeight + 'px !important;';
+	s += 'margin: 0 !important;';
+	s += 'padding: 0 !important;';
+	s += 'border: none !important;';
 
 	row = document.createElement('div');
 	row.className = "gc-row";
 
 	for (i = 0; i < rowNumber; i += 1) {
 		t = s + 'background-color: ';
 		t += (i % 2 === 0) ? 'blue' : 'white';
-		t += ';';
+		t += ' !important;';
 		row.setAttribute('style', t);
 		rowContainer.appendChild(row.cloneNode(true));
 	}

diff --git a/index.html b/index.html
@@ -13,11 +13,13 @@
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
-    <p>Nulla viverra molestie aliquet. Pellentesque ante velit, sollicitudin eleifend rutrum quis, laoreet sed urna. Nullam viverra, quam sed egestas tincidunt, massa lorem sodales nibh, eget malesuada ipsum odio et turpis. Sed mattis, sapien at porttitor pharetra, lacus odio sagittis lorem, eget tempus quam urna a velit. Morbi placerat pharetra massa eget vulputate. Maecenas ac lorem ut ligula scelerisque dictum at quis metus. Sed in lorem nisl. Nulla mauris ligula, faucibus at sagittis eget, dictum id nisi. Nam metus dolor, lobortis sit amet tristique elementum, imperdiet nec est. Curabitur eget dui sit amet elit congue malesuada et in felis. Suspendisse facilisis elit vitae tortor convallis fringilla. Praesent arcu odio, ornare sed commodo nec, congue ac urna. Mauris leo leo, fermentum nec sodales eu, scelerisque nec lacus.</p>
+    <div>
+        <p>Nulla viverra molestie aliquet. Pellentesque ante velit, sollicitudin eleifend rutrum quis, laoreet sed urna. Nullam viverra, quam sed egestas tincidunt, massa lorem sodales nibh, eget malesuada ipsum odio et turpis. Sed mattis, sapien at porttitor pharetra, lacus odio sagittis lorem, eget tempus quam urna a velit. Morbi placerat pharetra massa eget vulputate. Maecenas ac lorem ut ligula scelerisque dictum at quis metus. Sed in lorem nisl. Nulla mauris ligula, faucibus at sagittis eget, dictum id nisi. Nam metus dolor, lobortis sit amet tristique elementum, imperdiet nec est. Curabitur eget dui sit amet elit congue malesuada et in felis. Suspendisse facilisis elit vitae tortor convallis fringilla. Praesent arcu odio, ornare sed commodo nec, congue ac urna. Mauris leo leo, fermentum nec sodales eu, scelerisque nec lacus.</p>
+    </div>
     <div id="somediv"></div>
         <script src="grid-checker.js" type="text/javascript"></script>
         <script type="text/javascript">
-            (function(){gridChecker(68,12);})();
+            (function(){gridChecker(102,3);})();
         </script>     
     </body>
 </html>
diff --git a/style.css b/style.css
@@ -6,12 +6,15 @@ body {
 
 p {
 	line-height : 18px;
-	padding : 0 9px;
+	padding : 6px;
 	margin : 0 0 18px;
 }
 
-#somediv {
+div {
 	margin : 0 3px;
+}
+
+#somediv {	
 	background-color : green;
 	height : 54px;
 }