fmz 14

I am using the Google Custom Search on a charity website I am working on and I am having a little trouble getting the input field positioning to work properly in Safari - It works great in Firefox & IE but Safari is off.

Here is the CSS:

#search_box { width: 180px; height: 39px; background: url(../photos/bg_search.png) no-repeat left top; 
                      position: relative; top: -40px; left: 780px; overflow: hidden; }                    
#search_box #s { float: left;width: 110px; height: 10px; margin: 10px 0 0 40px ; border: none; }
#search_box #go { visibility: hidden; } 
input#keywords  { position: relative; top: 10px; left: 30px; width: 130px; height: 13px; background: #edf6fb; border: none; color:  #1776a5; }
input[type=text]:focus,
input[type=password]:focus,
textarea { outline: 0 none; }

Here is a link to the page: http://www.dayofservice.org/

2 answers

danwellman 5600
1
point
This was chosen as the best answer

The position of the div with the id search_box seems ok in both FF and safari, have you updated the page since posting here?

The problem seems to be that the actual input element inside the search box is not positioned correctly in Safari.

Rather than using positioning to put the input in the right place, try make the input display:block and use padding on its container - this may work better cross-browser...

Answered almost 9 years ago by danwellman
fmz 14
0
points

Hi Dan, thanks for taking the time to look into this. I changed it to display:block. However, I had to use margin instead of padding to get it to line up correctly. It does work correctly in both browsers though.

Thanks!

Answered almost 9 years ago by fmz
  • No worries, glad it helped :) danwellman almost 9 years ago