Grow your CSS skills. Land your dream job.

Cross-Browser Positioning Problem

  • # November 7, 2009 at 3:29 am

    Thanks for providing this forum, and thanks in advance for any guidance offered.

    The dilemma, in a nutshell, my navigation buttons show up in various places, depending on the platform and browser.

    Mac with Firefox3- buttons are in the correct position in the header: http://img.skitch.com/20091107-mn325jttjkmbqg82yb61gbcb8s.jpg
    Mac with Safari- buttons are in the correct position in the header: http://img.skitch.com/20091107-gca37kgasiqjmj3yg5qxcfja9s.jpg
    PC with Firefox3- buttons are well below the header: http://img.skitch.com/20091107-rh4e9qnmrbr58qfs3pgxb94hx7.jpg
    PC with IE- buttons are so far below header they are UNDERNEATH a login box: http://img.skitch.com/20091107-gbxp9f9sc3ua9hdrhrdnkh4qnt.jpg

    Obviously, there’s something I’m not understanding in regards to cross-browser css functionality. A push in the right direction is greatly appreciated. Thanks!

    # November 7, 2009 at 4:30 am

    Link?

    # November 7, 2009 at 2:32 pm

    Yup.

    either a link to the live-page, or pastebin the html/css in here.

    # November 7, 2009 at 10:17 pm

    Sorry. Here you go:

    http://junkcloud.com/

    Thanks!

    # November 8, 2009 at 4:00 am

    The navigation should be an unordered list and it should have a specific width to float it right. The three list items inside it should also be floated and set to display:inline. By rights the links should be plain text and then replaced with the images via the stylesheet.

    # November 9, 2009 at 10:45 am

    If you are going to do it the way you are right now. I believe a simple bit of css should fix it.

    Code:
    #navigation a { display:block; float:left; }
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".