Forum Moderators: not2easy

Message Too Old, No Replies

Seriously annoying little styled list menu problem

IE at fault as usual

         

Robin_reala

5:53 pm on Nov 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OK, so I'm building a horizontal dropdown menu. I'm (obviously) using styled lists, but float:left rather than display:inline to support IE5. My menu has a 2px border on the bottom. The submenu pops up at a point where it sits on top of the border, so a small gap appears (the popup and the main menu share a background colour).

In Firefox this works fine. Of course though it breaks in IE. The main functionality works well, but here's the annoying part: the next list item in the main menu overlaps the dropdown menu, which has the effect of overlaying it's border over the top of the right hand side of the dropdown. This, frankly, looks ugly.

I've experimented with z-index values to try and fix it, but no dice. If I can't fix the current method then I'll have to push the dropdown down by the border width so that no overlap can happen, but I don't want to do that if I can get around it.

Unfortunately I'm not sure how much of my code I'm allowed to post, as this is an in-house menu :( If I can wangle it I'll try and put up some snippets on Monday if that will help. Sorry.

So anyone seen this before?

Robin_reala

9:15 pm on Nov 14, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No-one? OK, I'll try and post a simplified testcase tomorrow.

Robin_reala

4:56 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry about the lack of a testcase. After reading a load of stuff on CSS-D [archivist.incutio.com] it seems that if you start defining stuff as position:relative then they each gain their own stacking order in IE (?!). Looks pretty unsolvable without rebuilding the menu from scratch. Oh well.