#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    CSS display eror


    I have a test page at www mewalker co uk/sgc_cssmenu that has a CSS dropdown horizontal navigation bar. This menu displays as expected.

    Because of differing browser considerations I redid my test page using scripts from the about.com javascript forum; the reworked page is at www mewalker co uk/sgc_sfmenu. I have had several problems in having the navigation bar display correctly within the page and I have solved all but one. My request for assistance in about.com has not received a response.

    I have one problem left to solve and my efforts to do so have proved futile. The navigation bar is displayed from the left hand side of the page while the page itself is centred. Evidently it is related to position but when I comment out the link position the bar breaks into a menu and submenus.

    Help would be much appreciated.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    276
    First thing I recommend is going HERE and validating your code for any errors.

    Next thing I would do is stop using TABLES for doing your layout and start using proper HTML/CSS.

    Now, as for fixing your navbar placement issue, in your CSS for your #hnavbar you have "position:fixed;"...change that to "position:relative;" and watch the navbar snap back inside your content.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0
    DonR

    Thank you for your response. I had already tried your suggestion and only the main links move into the page. Two of the submenus remain positioned to the left. My apologies for not mentioning this in my original post.

    Following your lead I think the problem may arise from:

    * html #hnavbar {
    position: absolute;

    It's there perhaps where position: relative; would work.

    The page at: www mewalker co uk/sgc_sfmenu had been validated, both the HTML and CSS, before posting my request for assistance. Warnings in the CSS mainly related to redundancies had been dealt with. In the HTML there is one warning in the code that comes with the weather widget.

    Edited to note that the test page now appears to be working as expected. Thank you for your guidance.

IMN logo majestic logo threadwatch logo seochat tools logo