SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE doesn't render navbar popouts

    Question about a sidenav here.

    This vertical menu shows popouts in FF just fine, but I'm confused about what script needs to be added for it to render correctly in IE. I've read alot of different things, so if a short sweet code exists I'd love someone to share it!

    L.
    verticalBar.html

  2. #2
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    search for suckerfish menu. there is some JS code there you need to make this work in IE

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry,

    But the code from the Suckerfish site did not seem to solve my problem, (probably b/c I didn't use their original code to create the list). Any suggestions what could be changed? Should I just start over?
    Stylesheet

    -L.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script is looking for <li>s that are contained within an element with an ID of navigation. You've got the ID on the div holding the ul rather than the ul itself.

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

    I think the main problem is that you don't have any code for ie to make the flyouts appear.

    The linked ie stylesheet doesn't appear to be in the location you linked to. You need to be offering ie the class of sfhover in the places that other browers get li:hover.

    e.g.
    Code:
    div#navigation li.submenu:hover ul.level2,
    div#navigation li.sfhover ul.level2 {  etc...}
    There is little need in nested ul's to class each nested list as they can be target by position. eg. #navigation ul li, #navigation ul li li etc.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick help!

    I can at least see the submenu items in IE now, even thought they don't seem to line up very nicely so I can't grab 'em yet. This method of styling the lists is a little hard for me to follow, (with all the classes) but I'll keep at it. Can't figure out why this border doesn't show in IE either so far.

    /*Level 1 list*/
    #navigation ul.level1 li {
    position: relative; /*same as div#nav li?*/
    border-bottom: 1px solid #666;
    }

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

    You need to force "layout" in Ie (see faq). You can either provide a correct dimension or use the height:1% hack if a dimension is too awkward.

    Code:
     /* mac hide \*/
     * html #navigation li {	height:1%}
     /* end hide */

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    started over with Suckerfish!

    Thanks for the suggestions, which did help somewhat. I still couldn't get that particular coded list to render correctly, so I scrapped it and went back to trying Suckerfish (of course). Things are much better, but here's one quirk: in IE 2nd level list items are partly covered by level 1 items. I can't get it to show on the external server, but here's a snapshot - localBrowser_IE

    Changing 'zindex' in this line fixes it in FF, but I'm sure that's not ideal
    Code:
    #Vnav li ul {/* second-level lists */			
    	position: absolute;
    	left: -999em;			
    	margin-left: 139px; 	
    	margin-top : -2.1em;
    	z-index: 5;		/*fixes in FF, but not IE*/
    Also, why does the width of Level 1, item 1 render shorter than the other items in FF? It is not meant to be an anchor, but should still be the same width, right? The page and stylsheet in all their proper layout are here:verticalRevised.html, verticalBarRevised.css

    One of these days, these CSS lists may seem easy but until then, much appreciation to you experts out there! -L.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Your link to the html seems to be incorrect.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Your link still isn't working so I can't see the page.

    Regarding the flyouts not overlappping the main menu then the problemis that the first level lists have the same z-index and therefore its up to the browser to determine which should go on top. It makes no difference if the child has a higher z-index because its the value of the parent that determines the stacking priority.

    Ie assumes that the first level list elements that come later in the html will have a higher priority when they have the same z-index. therefore the only way to get ie to behave is to class each first level list and apply a descending z-index structure so that each list has a lower z-index than the one above.

    e.g.

    www.pmob.co.uk/temp/dropdown-vertical4.htm

    For this reason its usually best not to overlap the menus but have then display at the edge,

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    GC, Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Navbar better, but neighboring DIV affected?

    Thanks so much for the info and links!

    My vertical navbar appears to be in order now. Not sure if this is related, but the DIV to the right of it seems to have been "pushed down" further than it should be. (#Vnav has top margin 22, #content has top-margin 0 but is jumping down to line up w/ #Vnav)

    Could it be a problem with the absolute/relative positioning applied to the #Vnav? Updated links:verticalRevised.html, stylesheet

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

    The problem is because the nav contaniner #Vnav isn't floated and therefore any static content will start in line with this. If you float #Vnav then the content will rise up.

    Because you are using s free server you will find they they are inserting code above the doctype which will put ie into quirks mode and all your box model hacks will be incorrect because in quirks mode ie6 uses the broken box model in the same way that ie5.+ always does.

    You really need to get your own web space so that you have control over things like this. It's cheap enough these days so there is no real excuse .

    You can fix the nav widths problems like this (plus the margin problem also).

    Code:
    /* SIDE NAVIGATION BAR */
    #Vnav{
    	/*Away from edge of #main*/
    	margin: 22px 0 0 20px;	/* +main padding = 30 down, 20 lft*/
    	padding: 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	font-size: 10px;
    	float:left;
    	display:inline;/* ie double margin bug*/
    	width: 138px;
    }
    /*Anchors for all lists*/
    #Vnav li a {
        /* removed widths from here*/
    	display: block;		/*makes entire area around link clickable*/
    	color: #FFFFFF;
    	background-color: #22323B;
    	text-decoration: none;
    	text-align: left;
    	border: 1px #000 solid;
    	padding: 4px 0 4px 9px;
    }
    /* mac hide \*/
    * html #Vnav li a{height:1%}
    /* end hide*/	


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
  •