Skip navigation
Ken Binney
Ken Binney
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

691 Views   7 Replies   Latest reply: Ken Binney, Mar 25, 2012 6:50 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Mar 24, 2012 6:07 PM   in reply to Ken Binney
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    2. Ken Binney,
    Mar 24, 2012 7:05 PM   in reply to Nancy O.
    Report

    Thanks Nancy, removed all the spaces and comments which seems to have improved it,

    but still being erratic.

     

    The screwy display looks like I missed one of the closing cell tags, but haven't found it yet.

    Any eagle eyes willl be much appreciated.

     

    Thanks again.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    3. Ken Binney,
    Mar 24, 2012 8:06 PM   in reply to Nancy O.
    Report

    Found and added what I think were a couplw missing tags below the include

    </td></tr>

     

    But alas, menu still wacky and I am demoralized.

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

    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:
  • Rik Ramsay
    Currently Being Moderated
    5. Rik Ramsay,
    Mar 25, 2012 2:17 AM   in reply to Ken Binney
    Report

    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:
  • Ken Binney
    Currently Being Moderated
    6. Ken Binney,
    Mar 25, 2012 6:47 AM   in reply to Ken Binney
    Report

    Hi Martin -

     

    Trust Mom is well.

     

    Not to worry about the triple UL's, it's not part of the navigation, just a deep blockquote to achieve

    the square list bullets in the content text on home page only. The problem occurs erratically on all pages,

    so I am sure it's related to the SSI menu HTML table cells or the CSS padding.

     

    *sigh*, I may have to revamp the whole thing

     

    Very much appreciate your taking the time to look.

     

    Ken

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    7. Ken Binney,
    Mar 25, 2012 6:50 AM   in reply to Rik Ramsay
    Report

    Many thanks Rik -

     

    I will spend today tweaking HTML and CSS padding.

     

    Ever grateful for your time and insight,

     

    Ken

     
    |
    Mark as:
Actions

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