Hey there! I could really use some help with a search bar issue on my website kissoff.weebly.com. Everything works fine in IE, Chrome, Firefox, and Opera but it's not compatible with Safari because of the search bar.
I'm trying to move the search bar to the right so it looks like it does on the other browsers. Take a look at this screenshot of how it appears on Safari:
Safari can be tricky sometimes. Any suggestions on how to fix this? I can share the CSS & HTML for the search bar and navigation bar, but a review of the full website would be greatly appreciated.
#navigation {
position: fixed;
margin-top: 0;
left: 0;
top: 0;
right: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(125, 180, 18, 0.8);
color: rgba(1, 1, 1, 0.8);
z-index: 900;
}
#search {
display: inline;
}
#search input[type="text"] {
display: inline;
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 450px;
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;
}
#search input[type="text"]:focus {
width: 200px;
margin-right: 200px;
-o-margin-right: 10px;
display: inline;
}
/*SNIPPET OF HTML FOR NAVIGATION BAR & SEARCH HERE:*/
<div id="navigation">
<div id="title">
KISS OFF
</div>
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
<a href="#">Home</a>
<a href="#">Login</a>
<a href="#">Register</a>
<a href=#terms>Terms</a>
</div>
Your expertise is greatly appreciated! Thank you :) --Dijji