html - jQuery Mobile CSS Conflicting With My Other CSS file -

html - jQuery Mobile CSS Conflicting With My Other CSS file -

i using jquery mobile css responsive table. turns out column in responsive table contains login form using css altogether styling. desired layout, jquery mobile conflicts styling of login form giving different , sense 1 intended. styling login form contained in seperate css file referenced in "head" tag, same jquery mobile css.

i attempted using "!important" in layout.css overwrite jquery conflicts still didn't work. here's code login form:

/**login form**/ #card { width: 220px !important; /*margin: auto;*/ margin-top:0px !important; position:relative !important; float:left !important; } #card h2 { text-shadow: 0 1px 0 #27ae60 !important; font-size: 1.62em !important; color: #2ecc71 !important; display: block !important; width: 100% !important; padding-bottom: .4em !important; margin-bottom: .6em !important; border-bottom: 2px solid #2ecc71 !important; /*box-shadow*/ -webkit-box-shadow: 0 1px 0 #27ae60 !important; -moz-box-shadow: 0 1px 0 #27ae60 !important; box-shadow: 0 1px 0 #27ae60 !important; } #card { color: #27ae60 !important; } #card label { font-size: 10px !important; display: block !important; float: right !important; clear: left !important; line-height: 2.4 !important; margin: -30px 0 0 !important; padding: 0 !important; width: 190px !important; height: 20px !important; } input[type="text"],input[type="password"], input[type="submit"] { clear: both !important; float: left !important; display: block !important; border: 1px solid #ccc !important; background: #ebebeb !important; margin: 6px 0 !important; padding: 4px 10px !important; width: 100% !important; height: 34px !important; outline: 0 !important; color: #34495e !important; font-size: 14px !important; } input[type=submit] { background: #27ae60 !important; color: #ecf0f1 !important; border: 0 !important; border-bottom: 2px solid #2ecc71 !important; margin: 10px 0 0 !important; width:100% !important; } input[type=checkbox] { display: block !important; float: left !important; width: 16px !important; height: 16px !important; margin: 10px 12px 10px 0 !important; /*border-radius*/ -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; border: 0 !important; } input[type=checkbox]:before { content: "" !important; display: block !important; border: 2px solid #ccc !important; border-bottom: 1px solid #ccc !important; /*box-shadow*/ -webkit-box-shadow: 0 2px 0 #bdc3c7 !important; -moz-box-shadow: 0 2px 0 #bdc3c7 !important; box-shadow: 0 2px 0 #bdc3c7 !important; width: 16px !important; height: 16px !important; padding: 0px !important; margin: -2px !important; /*border-radius*/ -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; } input[type=checkbox]:active, input[type=checkbox]:focus { /*box-shadow*/ -webkit-box-shadow: 0 0 0 !important; -moz-box-shadow: 0 0 0 !important; box-shadow: 0 0 0 !important; } input[type=checkbox]:checked { background: #27ae60 !important; } input[type=checkbox]:checked:before { content: "✔" !important; color: #2ecc71 !important; text-align: center !important; line-height: 1.6 !important; font-size: 10px !important; /*box-shadow*/ -webkit-box-shadow: 0 2px 0 #bdc3c7 ,inset 0 1px 0px 0 #107a3d !important; -moz-box-shadow: 0 2px 0 #bdc3c7 ,inset 0 1px 0px 0 #107a3d !important; box-shadow: 0 2px 0 #bdc3c7 ,inset 0 1px 0px 0 #107a3d !important; text-shadow: 0 -1px 0 #107a3d !important; width: 16px !important; height: 16px !important; padding: 0px !important; margin: -2px !important; /*border-radius*/ -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; } input[type=text]:not([value*=" "]):active, input[type=text]:not([value*=" "]):focus { /*box-shadow*/ -webkit-box-shadow: inset 8px 0px 0 #2ecc71 !important; -moz-box-shadow: inset 8px 0px 0 #2ecc71 !important; box-shadow: inset 8px 0px 0 #2ecc71 !important; padding-left: : !important; : x !important; } input[type=password]:not([value*=" "]):active, input[type=password]:not([value*=" "]):focus { /*box-shadow*/ -webkit-box-shadow: inset 8px 0px 0 #2ecc71 !important; -moz-box-shadow: inset 8px 0px 0 #2ecc71 !important; box-shadow: inset 8px 0px 0 #2ecc71 !important; padding-left: : !important; : x !important; } input[type=submit]:active, input[type=submit]:focus { background: #2ecc71 !important; color: #ecf0f1 !important; border: 0 !important; position: relative !important; top: 1px !important; border-bottom: 1px solid !important; } input[value*=" facebook"] { background: #3b5998 !important; border-color: #1f4189 !important; width: 50% !important; float: left !important; clear: none !important; margin-left: 0 !important; } input[value*=" twitter"] { background: #0396c7 !important; border-color: #0078a6 !important; width: 50% !important; float: left !important; clear: none !important; } input[value*=" facebook"]:active, input[value*=" facebook"]:focus { color: #ecf0f1 !important; background: #1f4189 !important; } input[value*=" twitter"]:active, input[value*=" twitter"]:focus { color: #ecf0f1 !important; background: #0078a6 !important; }

please how resolve this? thanks

jquery html css responsive-design