Treehouse: 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:
    Mac with Safari- buttons are in the correct position in the header:
    PC with Firefox3- buttons are well below the header:
    PC with IE- buttons are so far below header they are UNDERNEATH a login box:

    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


    # November 7, 2009 at 2:32 pm


    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:


    # 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.

    #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.