Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Cool dropdown + autocomplete search hybrid css problem in chrome

    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,

  • #2
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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.
    Last edited by Custard7A; 12-14-2012 at 12:59 PM.

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    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.

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •