diff --git a/grid-checker.js b/grid-checker.js index 08cc8e3..f46373b 100644 --- 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,16 +90,22 @@ 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"; @@ -100,7 +113,7 @@ gridChecker = function (ColumnWidth, ColumnMargin, RowHeight, InnerPadding, Targ 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 index 6b2f7c0..4f39303 100644 --- a/index.html +++ b/index.html @@ -13,11 +13,13 @@ -

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.

+
+

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.

+
\ No newline at end of file diff --git a/style.css b/style.css index 1536dc1..078448d 100644 --- 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; } \ No newline at end of file