Searchbox is fine in IE and Firefox, but moves down 15px in Safari
 

WP 3.3.1
ATA 3.7.3
www.envirosim.ca

I moved the searchbox up into the menu bar using some css i found elsewhere in BFA (thank-you!) and it works beautifully in IE and Firefox. However, the searchbox shifts down by about 15 pixels or so in Safari. this is driving me NUTS! please help!

here's the regular searchbox css :

border-bottom: 0;
width: 200px;
margin: -117px -18px 0px 0px;
padding: 0;

i tried using conditional CSS in html inserts as follows :
[if Webkit] div.searchbox {
margin: -132px -18px 0px 0px;
}

but nope.. then again, my css abilities are admittedly pretty basic..

I would use absolute positioning and top, bottom, left, or right instead of margins. I would stay away margins for positioning like this.

thank-you! the test site has moved to here : www.envirosim.org/2012

i've tried everything. i've removed the conditional and gone back to plain absolute as you suggested. here's the problem. the searchbox css is this :


div.searchbox {
position: absolute;
top: 130px;
right: 25px;
}

which works beautifully except in safari, when for whatever reason the box is 10px too low. so, it has to be this :

div.searchbox {
position: absolute;
top: 120px;
right: 25px;
}

but i can't seem to figure out how to code this conditionally. nor can i figure out why safari needs it to be that way. hoping you have a thought!

theoretically, shouldn't this be working?

div.searchbox {
position: absolute;
top: 130px;
right: 25px;
-webkit-top: 120px;
}

Try adding a 'z-index:5;' so it will sit on top.

thank-you jugggledad! sadly, still no joy using the css below :(

div.searchbox {
position: absolute;
top: 130px;
right: 25px;
z-index:5;
}

ahhh, don't you love the standardization of browsers.
This is an issue of a couple parts.
1 - the same font in different browsers renders at different heights,
2 - safari seems to put a extra padding around the <input> element

you can try adding '.searchbox-form input {height: 20px;}' but I still think you will have issues because the browsers interperate things just a little bit different.

I may take a look at a coding change that would put the search box in the menu...