A Harsh CSS Environment for Testing Widgets

#harsh * {

border: thin dotted #00FF00 !important;

display: block !important;

margin: 20 !important;

outline: 1px dotted red !important;

padding: 20 !important;

background: #00ff00 !important;

cursor: move !important;

clear: both !important;

float: left !important;

height: 0 !important;

max-height: 0 !important;

max-width: 0 !important;

min-height: 100px !important;

min-width: 100px !important;

visibility: hidden !important;

width: 0 !important;

bottom: 100px !important;

clip: rect(100px, 50px, 100px, 50px) !important;

left: 100px !important;

overflow: visible !important;

position: absolute !important;

right: 100px !important;

top: 100px !important;

vertical-align: sub !important;

z-index: 100 !important;

color: red !important;

direction: rtl !important;

font: oblique small-caps 900 20px/50px arial !important;

font-size-adjust: .01 !important;

font-stretch: ultra-expanded !important;

letter-spacing: 20px !important;

list-style: decimal inside !important;

text-align: right !important;

text-decoration: blink !important;

text-indent: 100px !important;

text-shadow: #000 30px !important;

text-transform: uppercase !important;

unicode-bidi: embed;

white-space: pre !important;

word-spacing: 20px !important;

border-collapse: separate !important;

border-spacing: 30px !important;

caption-side: bottom !important;

empty-cells: show !important;

table-layout: fixed !important;

}

<style type="text/css">

#armor, #armor * {

border: none !important;

display: block !important;

margin: 0 !important;

outline: none !important;

padding: 0 !important;

background: #fff !important;

cursor: auto !important;

clear: none !important;

float: none !important;

height: auto !important;

max-height: none !important;

max-width: none !important;

min-height: 0 !important;

min-width: 0 !important;

visibility: visible !important;

width: auto !important;

bottom: auto !important;

clip: auto !important;

left: auto !important;

overflow: auto !important;

position: relative !important;

right: auto !important;

top: auto !important;

vertical-align: top !important;

z-index: 1 !important;

color: #000 !important;

direction: ltr !important;

font: normal normal normal 11px/14px tahoma,sans-serif !important;

font-size-adjust: none !important;

font-stretch: normal !important;

letter-spacing: normal !important;

list-style: none !important;

text-align: left !important;

text-decoration: none !important;

text-indent: 0 !important;

text-shadow: none !important;

text-transform: none !important;

unicode-bidi: normal;

white-space: normal !important;

word-spacing: normal !important;

border-collapse: collapse !important;

border-spacing: 0 !important;

caption-side: left !important;

empty-cells: hide !important;

table-layout: auto !important;

}

If you wrap your widget in <div id="armor"></div>, it should work OK. I made another HTML example (view source) for testing this armor.

I tested #armor cross browser using my test systems and browsershots.org. Of course, there are most likely still bugs, so please tell me about them!

To develop #harsh, I used the w3schools CSS Reference, which you can also use to figure out if you want to change the properties in #armor, or apply more thereafter. 

To apply additional styling after #armor, use ids instead of classes, e.g. id=""/# and not class=""/. because a particularly harsh use of #id * will override your classes. Of course, if you aren't that paranoid, you could back off the * in #armor and use classes instead.

You could also just use inline styling, i.e. style="". There may also be a better way to do it that I just haven't thought of yet. If you know of one, do tell...