Hello, I´m trying to redo my site's layout and have achieved quite a bit already. This is my test page I´m working on. But there's one problem I can not solve. It has to do with the menu on the left-hand. In IE/ the flyout isn´t positioned where it should be, it shows too low. This only ocurrs when I add border: 1px solid #000; Code (markup): to #navigation ul li a:hover { /* Hover Styles */ text-decoration: underline; color: #E2144A; background: #f9f9f9; padding: 4px 0 5px 0; } Code (markup): If I remove it the flyout shows at the same position as it does in IE6 and FF wÃth the border: 1px solid #000; Code (markup): Another issue with that same menu shows in all browsers, it is the right border of the main ul on hover. The black border don´t show. I have spent many hours trying to get that menu showing well in IE6, IE7 and FF but have run out of resources. Anybody willing to have a look and able to spot the cause of these issues? Thanks for your attention and greetings.
hi i saw ur site and left navigation, u meant that u wnted to set position of ur pop up menu along with main menu boxes, but when u add border style u failed, is this right? well if this is right u have to make changes in ur css code,,,,,,, by giving marging of "li" style u could get this by right way
Yes, That´s right. I want to align the top border of the fly out box with the top border of it´s parent. This works in all browsers, except for IE7 when I add a border to the #navigation ul li a:hover. This makes the fly out box's top border align with the next main menu element's top border. Very strange.
did u change left margine, is about inhance it value, if it won't work inhance related body div width and adjust the lack of space in ur site page
Hmm, yeah, I think that right border isn't showing because the sub is covering it-- or maybe because of the width: 100% and then adding some padding and borders-- that could cause any browser to wonder if there's room enough. I mean, your subs are inheriting that width: 100% from the first-level a's, right? left: 131px; /* Set 1px less than menu width */ margin-top:-28px; display: none; Code (markup): Now I dunno what the exact problem is with this in IE7, maybe some version of "staircase" or something popping up, but I remember IE having issues with change of display states-- which you're using to make the subs appear. Instead of display: none and display: block, is there any reason why you can't use the off-screen on-screen positioning method as used by Sons of Suckerfish? I noticed also, for the li, you are triggering haslayout (I assume) for the li with position: relative. When working on the Suckerfishes, I found it didn't work in IE7 if I took the Javascript out (and the JS was only for IE6, remember, not 7) so it seems the JS had been triggering haslayout. Suzy (here, also at webmaster forums) found that setting a trigger on the HOVER made IE7 work : ) In a version of suckerfish I have, I did this (copied pretty much from Suzy): #navigation li:hover { something here; } That sits alone, in a separate declaration, just like you did with the #navigation li {position: relative;] comment. Which, btw, you remove. Just have it on the hover, unless you're using it for the abso-po'd subs. So, maybe try floating the li's left, and giving the hover styles to the li as much as possible-- and set their widths either not to 100% or something smaller when hovered, so there's room for new padding and borders (or you could set the a's also to display block, but don't say a width, so they'll just be 100% wide but you can add borders and padding because you didn't explicitly state width: 100%...) and try to change position instead of display states, and see if that helps IE7. Now that I think about it, the problem in IE7 with the trigger was that the subs didn't show up at all! So maybe this isn't your problem, but you can try those things one at a time and see if any of them help. Not a great example cause it's the horizontal menu: http://stommepoes.jobva.nl/Menus/suckerfish4ie7.html but I can has borders. BTW, why is a spanish site using Dutch in the testing names? : )
Hello Stomme, Thanks for your interest and info. Together with your indications and some trial and error I managed to get pretty close to perfection. I can´t tell exactly what I did but somehow I managed to fix the issue, almost completely. There's only a 1 pixel thingy left the figure out in IE7, but I'll find the fix for that and I can live with it. Anyway, I´m working on this new layout/setup without any hurry, I recently changed my layout and this will be the next step. What I like most about the new setup is that it will be completely fluid. I also believe the three columns will make navigation clearer as it allows for separating navigation into various sections. BTW, I'm a dutch emigrant living in Spain, those roots make me remember my language. : )
Funny thing, I just tried my first vertical Suckerfish for some kid's photo site, on another forum, and he had a border, and actually... I did it on my new notebook, which has every browser except JAWS screen reader and IE7. So, I can't remember now, but isn't this a similar menu? And I still don't have IE7 til I'm back at work tomorrow, does this have the same issue? http://stommepoes.nl/JPKrein/jpkrein.html apologies for the sh*tty images, I was trying some tests for the guy. But his was JS and I wanted to see if the Suckerfish version worked as well. His was, I think, jpkrein.net ? Succes met je nieuwe hondensite! : )
Hehe, Quite a coincidence, it has a very similar issue in IE7 as mine had. As my menu has a flyout on every <li> and yours only on one <li> I don´t know if this causes the difference. My issue was that with the border on a:hover the flyout aligned with the top of the <li> that came after the hovered <li>. In your menu the flyout aligns with the bottom of the bottom <li>. You were right, I found his site and on his menu with the js the issue doesn´t show. His menu has the problem that the hovered <li> goes white. I don´t have enough knowledge to tell what causes your issue. But I do know that my menu seems to be almost perfect, the only issue I can find as it is right now is that there´s a 1 pixel thingy on :hover in IE7. Los groetos.
Hey Dogs, I finally checked in IE7-- it wasn't lining up with the bottom, but instead the header image with his name/logo thingie was simply covering op the majority of his submenu... which might have been the IE z-index bug or not (didn't see it in my Virtual IE6) but by adding some position: relative and z-index: 500 to the #mainmenu, problem solved on my machine. text isn't vertical-aligning but that's IE for you : ( http://stommepoes.nl/JPKrein/jpkrein.html I'll reduce that right padding on the .sub li too so I don't have the arrow so close to the edge in IE7...
I see how it was meant to be, thought the menu was supposed to be below his header image. Now it´s looking perfect, cheers.