Search Box/Transition won't work in Firefox
- by user2522488
I disabled the search box on IE, because IE kept centering it over the navigation.
It works in Chrome, I'm not sure about opera (and I'm not sure if I care) but it won't work in Firefox. The ease-out timing works in Firefox, but nothing else really works.
I've tried other things to work around the issue, but every time I try something different, the search box's positioning gets thrown off.
If you look at it in Firefox, it looks fine-- until you click on it to search. http://kissoff.weebly.com/ You can see what the search box is supposed to do if you look at it and click on it in Chrome.
I'm sure the positioning is off, I'm not sure (I'm new to css). Any help is appreciated.
#search {}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search input[type="text"]:focus {
width: 200px;
}
