tanner_1122
New Member
I'm developing a simple addon using Kango Frameworks:http://kangoextensions.com/kango.htmlAnyway, using the popup API I get my html form to popup, and the attached js file handles clicks etc.Now, the addon works perfect in firefox but in chrome whenever I attach the styles.css stylesheet the extension breaks. By breaks, I mean it compiles properly + can be installed on google chrome without issue BUT when I click the icon it just opens a very small blank popup. When I do not add the stylesheet then the popup form works just fine, but when I include the stylesheet I get nothing.I am far from an html / css guy so I was hoping maybe someone in the community can spot something I could not...Here are the relevant parts below and thanks so much for your help!:EDIT: I suspect something is up with #container tag since it works ok with I comment that bit out.text-entry.html (the main popup form):\[code\]<head>...<link rel="stylesheet" href="http://stackoverflow.com/questions/14468234/css/styles.css">...</head>\[/code\]css/styles.css:\[code\]/* Stylesheet *//* Imports *//* Selections */::selection { color: #fff; text-shadow: none; background: #444;}::-moz-selection { color: #fff; text-shadow: none; background: #444;}/* Basics */html, body { width: 90%; height: 90%; font-family: "Helvetica Neue", Helvetica, sans-serif; color: #444; -webkit-font-smoothing: antialiased; background: #f0f0f0;}#container { position: fixed; width: 340px; height: 228px; top: 50%; left: 50%; margin-top: -140px; margin-left: -170px; background: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -webkit-animation-name: bounceIn; -webkit-animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; -moz-animation-name: bounceIn; -moz-animation-fill-mode: both; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -moz-animation-timing-function: linear; animation-name: bounceIn; animation-fill-mode: both; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: linear;}form { margin: 0 auto; margin-top: 20px;}label { color: #555; display: inline-block; margin-left: 18px; padding-top: 10px; font-size: 14px;}p a { font-size: 11px; color: #aaa; float: right; margin-top: -13px; margin-right: 20px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease;}p a:hover { color: #555;}input { font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; outline: none;}input[type=text],input[type=password] { color: #777; padding-left: 10px; margin: 10px; margin-top: 12px; margin-left: 18px; width: 290px; height: 20px; border: 1px solid #c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease;}input[type=PropertyID] { color: #777; padding-left: 10px; margin: 10px; margin-top: 12px; margin-left: 18px; width: 100px; height: 20px; border: 1px solid #c7d0d2; border-radius: 2px; box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease;}input[type=name]:hover,input[type=password]:hover { border: 1px solid #b6bfc0; box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;}input[type=name]:focus,input[type=password]:focus { border: 1px solid #a8c9e4; box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;}#lower { background: #ecf2f5; width: 100%; height: 69px; margin-top: 20px; box-shadow: inset 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}input[type=checkbox] { margin-left: 20px; margin-top: 30px;}.check { margin-left: 3px; font-size: 11px; color: #444; text-shadow: 0 1px 0 #fff;}input[type=submit] { float: right; margin-right: 20px; margin-top: 20px; width: 180px; height: 30px; font-size: 14px; font-weight: bold; color: #444; background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); border-radius: 30px; border: 1px solid #66add6; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); cursor: pointer;}input[type=submit]:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);}input[type=submit]:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);}input[type=button] { float: right; margin-right: 10px; margin-top: 10px; width: 20px; height: 20px; padding: 0px; font-size: 12px; font-weight: bold; color: #444; background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); border-radius: 30px; border: 1px solid #66add6; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); cursor: pointer;}input[type=button]:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);}input[type=button]:active { background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);}\[/code\]