IE doesn't render navbar popouts

[lorikeet]

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

[DCS]

search for suckerfish menu. there is some JS code there you need to make this work in IE

[lorikeet]

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.

[Tyssen]

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.

[Paul O'B]

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.

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.

[lorikeet]

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;
}

[Paul O'B]

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.

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

[lorikeet]

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

#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.

[Paul O'B]

Your link to the html seems to be incorrect.

[Paul O'B]

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,

[lorikeet]

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

[Paul O'B]

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).

/* 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*/