SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation problems

    Hi pixelstation,

    I seem to be having a similar issue and looking at it for a few days just make me see matrix code!

    Nonetheless, after many problems with csshover.htc file I've resulted to using js for the nav. It works fine in FF (fabulous! as always!!) but IE as usual has it's flaw.

    Below is my css. If anyone can help! please please please let me know what I'm doing wrong!

    Code:
    #mainpanel #mainarea #menu ul {
        list-style-type: none;
        margin: 0px;
        width: 150px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: none;
        border-right-style: solid;
        border-bottom-style: none;
        border-left-style: solid;
        border-top-color: #999999;
        border-right-color: #999999;
        border-bottom-color: #999999;
        border-left-color: #999999;
    }
    
    #mainpanel #mainarea #menu li {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: White;
        width: 150px;
        margin: 0px;
        padding: 0px;
        min-height: 15px;
    }
    
    #mainpanel #mainarea #menu a {
        text-decoration: none;
        background-image: url(/images/1.5/arrow_small.gif);
        background-repeat: no-repeat;
        background-position: 3px center;
        padding-left: 13px;
        display: block;
        margin-left: 0px;
        color: White;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        padding-top: 1px;
        min-height: 15px;
        padding-top:3px;
    }
    
    html #mainpanel #mainarea #menu a {
        height: 15px;
        font-weight: normal;
    }
    
    #mainpanel #mainarea #menu a:hover {
        background-image: url(/images/1.5/arrow_small_over.gif);
        color: #000000;
        background-color: #E1E1E1;
    }
    
    #menuv                                         /* position, size, and font of  menu */
        {    
        position:absolute;    
        top:19em;
        left:6em;
        z-index: 10;
        width: 8em;                                  /* [1] width of menu item (i.e., box) */
        text-align: center;
        font-size: 0.9em;
        font-family: helvetica, arial, geneva, sans-serif;
        }
    
    #menuv a
        {
        width: 100%;
        display:block;                        
        padding-top: 0.2em;                        /* expands menu box vertically*/
        padding-bottom: 0.2em;
        border-bottom:1px solid #555;        /* adds bottom border */
        white-space:nowrap;
        }
    
    #menuv a, #menuv a:visited                /* all menus at rest */
        {
        color: white;
        background-color: royalblue;
        text-decoration:none;                       /* removes underlines from links */
        }
    
    /* attaches parent-arrow on all parents */    
    #menuv a.parent, #menuv a.parent:hover{
        background-image: url(nav_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }
    
        /* all menus on mouse-over */
    #menuv a:hover{
        color: white;
        background-color: cornflowerblue;
        }
    
    /* removes bullets */    
    #menuv li{
        list-style-type:none;                    
        }
    
    #menuv ul li{
        position:relative;
        }
    
     /* distance from  left menu (this should be the same as width value in #menuv [1]) above */    
    #menuv li ul{
        position: absolute;
        top: 0;
        left: 8em;                                
        display: none;
        }
    
    div#menuv ul, #menuv ul ul, div#menuv ul ul ul{
        margin:0;                               /* keeps the menu parts together */
        padding:0;
        width: 8em;                          
        }/* width of sub menus  (this should be the same as width value in #menuv [1]) above */
    
    div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul{
        display: none;
        }
    
    div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul{
        display: block;
        }
    ...Apologies for jumping on your thread pixelstation, but we are thread related!

    Many thanks inadvance!
    Last edited by Paul O'B; Nov 16, 2007 at 11:03. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    We'll need the html and javascript you are using as the issue could be anywhere.

    You don't seem to be using the usual suckerfish menu js as I can't see the ie hover styles.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not only that, but what does the HTML look like? There's a lot of CSS code in there, a lot of which probably isn't doing anything productive (or useful).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •