Topic: auto_complete suggestion box alignment problems

I'm wondering if anyone has seen this before... I'm using auto_complete and it works/looks great in safari.  In Firefox (v3), however, the auto_complete selection list appears about an inch below the input field it's linked to.  It's still working, but it's just floating around down there appearing about half-way overlapping the the third input below it.  I've gone through the CSS a hundred times trying to find a culprit, but am coming up blank.

Anyone seen this with auto_complete before?  Or is it likely just something in my CSS file that's killing this?

Thanks for any ideas...
M@

Re: auto_complete suggestion box alignment problems

I should mention that this happens on every auto_complete on the page (there's 4 fields setup with it) - each appears the same distance below it's parent input box...

Re: auto_complete suggestion box alignment problems

Tech,

Try setting the margin and padding for those elements to 0 and see what happens. I have run in to similar problems when working with product tables in FF. It seems like if the padding is not defined at all, Firefox has a mind of it's own when displaying it.

Jeff

Re: auto_complete suggestion box alignment problems

I'd start with a simple example. My autosuggest samples look identical in FF and Safari, neither show any space gap between the input and the autosuggest div.

I'd also suggest using the reset styles and reset fonts from the YUI library. That's the first thing I do when creating new apps, to reduce cross browser inconsistencies. Here's a great article summing up the why's behind reset stylesheets.

http://2tbsp.com/content/getting_starte … _and_fonts

Thanks!

Last edited by Michael Sullivan (2009-03-04 02:16:16)

"Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. " - Alan Perlis

Re: auto_complete suggestion box alignment problems

Michael is right, and that is the point I was trying to make. However, try my suggestion first, as it will not effect other elements on your page.