Skip navigation
Currently Being Moderated

CSS List style Menu gone wonky

Mar 24, 2012 5:32 PM

Seems to initially loads fine but but layout often explodes when using the links.

Proper layout sometimes, but not always returns when page reloaded

Entire menu table container is loaded from an SSI

No Validator errors related to menu.

www.peattiecapital.com/

 

Any assistance gratefully received, as my brain is now broken.

 

Thanks for looking

 
Replies
  • Currently Being Moderated
    Mar 24, 2012 6:07 PM   in reply to Ken Binney

    Ken,

    Remove spaces and comments from lists. This can create problems.

     

    Look at the list HTML below for an example:

    http://alt-web.com/DEMOS/CSS-Horiz-menu-3.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 1:59 AM   in reply to Ken Binney

    Ken

     

    I think that your navigation list is fine.  Code looks OK to me.

     

    However, you have a second list on your page and that is a bit whacky.  You seem to have it nested in three <ul> </ul>'s

     

    I have to visit my mother now, so no real time to look any further but I do wonder if the extra tags in that list is affecting the other list.  It's worth a look.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 2:17 AM   in reply to Ken Binney

    Ken,

     

    You seem to have a top level of width of 800. This should be adjusted to a more accurate width for the menu.

     

    #navbar li a {

    display: block;

    text-decoration: none;

    background: #240759;

    color: #FFFFFF;

    width: 800; /* adjust as needed or use auto */

    padding: 5px 18px

    }

     

    Another issue is that you have the #navbar width different from the table.

    #navbar{

    position:relative;

    z-index:1002;

    width: 800px;

    padding:10;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    }

    <table width="780" align="center" border="0" cellpadding="0" cellspacing="0" id="navbar">

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points