Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Jan 20, 2012, 11:12 AM
striped aardvark
 
50 posts · Mar 2010
dundas, ontario, canada
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..
  #2  
Old Jan 20, 2012, 06:20 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I would use absolute positioning and top, bottom, left, or right instead of margins. I would stay away margins for positioning like this.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Apr 2, 2012, 11:38 AM
striped aardvark
 
50 posts · Mar 2010
dundas, ontario, canada
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!
  #4  
Old Apr 2, 2012, 12:08 PM
striped aardvark
 
50 posts · Mar 2010
dundas, ontario, canada
theoretically, shouldn't this be working?

div.searchbox {
position: absolute;
top: 130px;
right: 25px;
-webkit-top: 120px;
}
  #5  
Old Apr 2, 2012, 12:36 PM
juggledad's Avatar
juggledad
 
23,575 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try adding a 'z-index:5;' so it will sit on top.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Apr 2, 2012, 12:44 PM
striped aardvark
 
50 posts · Mar 2010
dundas, ontario, canada
thank-you jugggledad! sadly, still no joy using the css below

div.searchbox {
position: absolute;
top: 130px;
right: 25px;
z-index:5;
}
  #7  
Old Apr 2, 2012, 01:55 PM
juggledad's Avatar
juggledad
 
23,575 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Menu bar fine in IE, misaligned in Firefox? aebrigham Page & Category Menu Bars 11 Dec 1, 2011 11:10 AM
website works fine in IE; BAD in Mozilla Firefox IDNewby Atahualpa 3 Wordpress theme 1 Feb 2, 2011 02:33 PM
[SOLVED] Table works fine in all browsers except Firefox. Please help! Nolie Center area post/pages 1 Nov 15, 2010 12:23 PM
Background won't load in IE8, but loads fine in Firefox ktaylor310 Header configuration & styling 6 May 6, 2010 02:36 PM


All times are GMT -6. The time now is 10:00 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.