Cool dropdown + autocomplete search hybrid css problem in chrome

Salami1_1 · 12-14-2012, 10:34 AM

Ok,

So I always develop for Firefox and then check IE to make fixes..
Then at the end I usually check other browsers such as Chrome.. normally FF and Chrome are always the same until now..

I build a a simple but (I think) cool tool which can be used to search with autocomplete and also as dropdown box directly. It looks and works good in FF (latest) and IE9 (haven't yet checked earlier versions) but in chrome its wrong..

I hate hack but I've even tried one but still didn't get it right..

Site: http://www.unlocksamsungonline.com/u...codes_alt1.php

The input box at: 'Select your Samsung Device:' the 'drop down arrow' position is the problem in Chrome.

Thanks for your input!

Best regards,

Custard7A · 12-14-2012, 12:53 PM

Toggling the top property in Chrome seemed to move it up to the same position as the other browsers (It was still off a tad to the side), toggling the top property in Firefox didn't do anything. Perhaps you should re-think your positioning. Maybe placing it inside the input element and floating it right would work nice.

Edit: Although, doing that might let text be typed behind it. Sorry, this is just musing input, it may or may not help.

Salami1_1 · 12-15-2012, 04:25 AM

Hey custard7a,

Thanks for your reply.. I've been changing a lot and trying.. and now I finally ended up having the dropdown image on same height in the different browser just the horizontal position is still incorrect..

At the moment is is correct in FF and wrong in Chrome & IE9.. however it is the same in Chrome and IE9..

again not really sure how to go from here.. I read somewhere that pixel size is different in FF and Chrome.. never heard of that before but would be completely ridiculous..

Custard7A · 12-15-2012, 09:06 AM

The dropper arrow position in IE9 looks the same as in Firefox to me now, but Opera is even farther off than Chrome.

I noticed both the elements are relatively positioned. Usually when elements are over-lapping one should be absolutely positioned.

Salami1_1 · 12-16-2012, 02:14 AM

yeah that actually works better then when it is positioned absolute as with absolute the differences are bigger..

I now managed to make it look perfect in FF and IE9
In chrome it looks ok.. not perfect but good enough..

Haven't checked Opera yet.. going to check my website stats if I should also check for Opera / safari on this..