Re: [css-d] menu test
On 12/11/10 6:45 AM, Erik Visser wrote: Please give me your remarks. And how this menu behaves in the different browsers and/or pplatforms you use. Thanks, Erik uri, Erik? -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
David Laakso schreef op 12/11/10 12:49 PM: On 12/11/10 6:45 AM, Erik Visser wrote: Please give me your remarks. And how this menu behaves in the different browsers and/or pplatforms you use. Thanks, Erik uri, Erik? eeehhh.. http://beta.ottermeerhoeve.nl/index.php __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
On 12/11/10 6:45 AM, Erik Visser wrote: Please give me your remarks. And how this menu behaves in the different browsers and/or pplatforms you use. Thanks, Erik http://beta.ottermeerhoeve.nl/index.php Always a pleasure to land on a page with primary content set at default:-) . O.K. Safari and Camino and SeaMonkey. However, this line beneath the menu not seen, and is clipped in landing in Opera, FF, IE 8/7/6: h4 class=teasera href=/familieavontuur.php view-source:http://beta.ottermeerhoeve.nl/familieavontuur.phpOok in 2011br/ Ottermeer Famlieavontuur !/a/h4 If of concern, in FF the long-words walkout the menu with + font-scaling [same in IE 8/7/6 at text-size largest.] aside You may want to flip the font-family so Macs get Helvetica and PCs get Arial. Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up-Revised
Revised-forgot the closing bracket for:
body {behavior: url(csshover.htc);} !--Here--
Maybe this would have helped, using inline CSS to fix IE7 bugs and below:
!--[if lt IE7]
style type=text/css media=screen
body {
behavior: url(csshover.htc);
}
#menuh ul li ul li {
float: left;
clear: left;
width: VALUE (8em or 100%);
}
/style
![endif]--
/head
Sorry for the errors on the previous post.
Regards,
elias
You have an [if lt IE 7] style-block in the page head, and those styles
will of course override what's in the stylesheet and make everything
fail in IE6 and older versions.
Of course: my first example worked just fine, since I had placed all
corrections in a style-block _after_ the [if lt IE 7] style-block. It is
a matter of order and specificity - that I overlooked.
Again: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html
1: All new styles moved to the stylesheet where they have replaced the
old ones...
http://www.gunlaug.no/tos/alien/jg-2/nav.css
...and my styles are easy to see since I don't use indentations - a
personal preference thing.
2: I've deleted all unnecessary and disturbing styles in the [if lt IE
7] style-block in the page-head, so IE6 gets its corrections but will
otherwise follow what's in the stylesheet. It is *important* that you
transfer my corrections to your own page, or else it will fail in IE6 again.
3: I unexpectedly found that my contain floats method misfired in one
browser - disturbing the dropdown, so I've changed that to the
easyclearing[1] method - and tested again.
4: The use of 'font-size: small' on #menuh triggers IE/win's font
resizing bug[2], so I changed that to 'font-size: 82%'. Choose another
value if you like, but avoid the use of keywords if you want bug-free
and somewhat identical font size across browser-land.
regards
Georg
[1]http://www.positioniseverything.net/easyclearing.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
I just joined, sorry for the late reply.
Maybe this would have helped:
!--[if lt IE7]
style type=text/css media=screen
body {behavior: url(csshover.htc);
#menuh ul li ul li {
float: left;
clear: left;
width: VALUE (8em or 100%);
}
![endif]--
/head
Again, sorry for not replying sooner.
If anyone else is interested, Stu Nichols of CSS Display.co.uk has an
example of a Pure CSS Multi-Level Drop Down Menu, including IE 6 7
conditional bugs/fixes/hacks and workarounds.
Best,
elias
On 9/27/07 10:11 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
As promised, I've gone through the entire set of styles again, and found
that the simplest factors are the easiest to miss :-)
You have an [if lt IE 7] style-block in the page head, and those styles
will of course override what's in the stylesheet and make everything
fail in IE6 and older versions.
Of course: my first example worked just fine, since I had placed all
corrections in a style-block _after_ the [if lt IE 7] style-block. It is
a matter of order and specificity - that I overlooked.
Again: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html
1: All new styles moved to the stylesheet where they have replaced the
old ones...
http://www.gunlaug.no/tos/alien/jg-2/nav.css
...and my styles are easy to see since I don't use indentations - a
personal preference thing.
2: I've deleted all unnecessary and disturbing styles in the [if lt IE
7] style-block in the page-head, so IE6 gets its corrections but will
otherwise follow what's in the stylesheet. It is *important* that you
transfer my corrections to your own page, or else it will fail in IE6 again.
3: I unexpectedly found that my contain floats method misfired in one
browser - disturbing the dropdown, so I've changed that to the
easyclearing[1] method - and tested again.
4: The use of 'font-size: small' on #menuh triggers IE/win's font
resizing bug[2], so I changed that to 'font-size: 82%'. Choose another
value if you like, but avoid the use of keywords if you want bug-free
and somewhat identical font size across browser-land.
regards
Georg
[1]http://www.positioniseverything.net/easyclearing.html
[2]http://www.gunlaug.no/contents/wd_additions_13.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - thank you!
Wow, I can't believe you went to all of this trouble, thank you!! Thank you for the links - I read the information (understood about 1/2 but will read again) I have everything up and working - thanks to this group and Georg. Thank you again, Jennifer PS I hope to some day be knowledgeable enough to pay forward the help I have received. Of course: my first example worked just fine, since I had placed all corrections in a style-block _after_ the [if lt IE 7] style-block. It is a matter of order and specificity - that I overlooked. I can't believe I missed this! Again: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html 1: All new styles moved to the stylesheet where they have replaced the old ones... http://www.gunlaug.no/tos/alien/jg-2/nav.css ...and my styles are easy to see since I don't use indentations - a personal preference thing. 2: I've deleted all unnecessary and disturbing styles in the [if lt IE 7] style-block in the page-head, so IE6 gets its corrections but will otherwise follow what's in the stylesheet. It is *important* that you transfer my corrections to your own page, or else it will fail in IE6 again. 3: I unexpectedly found that my contain floats method misfired in one browser - disturbing the dropdown, so I've changed that to the easyclearing[1] method - and tested again. 4: The use of 'font-size: small' on #menuh triggers IE/win's font resizing bug[2], so I changed that to 'font-size: 82%'. Choose another value if you like, but avoid the use of keywords if you want bug-free and somewhat identical font size across browser-land. regards Georg [1]http://www.positioniseverything.net/easyclearing.html [2]http://www.gunlaug.no/contents/wd_additions_13.html -- http://www.gunlaug.no Got a little couch potato? Check out fun summer activities for kids. http://search.yahoo.com/search?fr=oni_on_mailp=summer+activities+for+kidscs=bz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - My Pleasure
Chris- My pleasure...no worries. I hope you find the solution you're looking to accomplish. No worries about the link. Whatever I can do to help, anyone, 'if' I know the answer. Took a hiatus for a bit, now back-in full-time. Just transferred my domain and revising my site. I'll let you know when I set up shop. All I ask is to 'pay it forward' when you become a CSS guru, cool? Help others who ask for help, if you can. Until we speak again, Chris. Thanks for the kind words! Cheers, elias Washington D.C. On 9/28/07 11:07 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: This is a great discussion group and I have learned a lot from being here. I am new at all this. It's css veterans like you that make this such a great place and wonderful resource and we really appreciate your being here. There is the occasional grouchy person but that's rare. The moderators have a sharp eye and a sharp wit about off topic. Sometimes I consider baiting them just to see what they would say but I don't like to waste anyone's time and they are very business-like about keeping the discussion list focused. Thank you for the link. I thought it would be something like that but lack of sleep lured me into asking rather than figuring out for myself. Thank you for obliging a tired guy. You obviously know your way about this stuff. Do you have a website or blog of your work? It would be interesting to see some of your work. Take care, Chris Johnson Washington by Seattle USA - Original Message - From: Elias Abunassar mailto:[EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Friday, September 28, 2007 6:37 AM Subject: Re: [css-d] menu test - Link to Stu Nichol's 'Pure CSS Multi-Level Drop-down Menu My pleasure and thanks for welcoming me. Apologies for not including Stu Nichols link: http://www.cssplay.co.uk/menus/dd_valid.html He has a different workaround for the Multi-level Drop Down Menu than the (csshover.htc) hack. Visit his page then go to 'Menu' in the top nav. Enjoy, hope this helps. Cheers, elias On 9/28/07 9:26 AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Thanks for joining! Sorry to be obtuse here... what is a link for Stu Nichols? Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
Thank you so much! When you wrote: Float the entire #menuh right, and _contain_ it. - what did you mean by and contain_it? I had to leave the float:right style on the page. If I moved it to the style sheet it didn't work. I think I remember hearing that to do a float you needed to declare the position, but when I declared the position on the menuh div it still didn't work. So for now I am leaving the float declaration on the page. Thank you again for your help. I did a Google search for the IE6 auto-expansion bug and it appears that maybe you coined the phrase - I am impressed. I will be reading up on it and trying to understand it all. Jennifer JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. Wrong width on menu, combined with IE6' auto-expansion bug. A lethal combination. IE6 also needs to establish a relation between #menuh-container and #menuh. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Float the entire #menuh right, and _contain_ it. Background color goes on #menuh-container. Example: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html New styles for the relevant elements are found in page-head. Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23. regards Georg -- http://www.gunlaug.no Luggage? GPS? Comic books? Check out fitting gifts for grads at Yahoo! Search http://search.yahoo.com/search?fr=oni_on_mailp=graduation+giftscs=bz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm When you wrote: Float the entire #menuh right, and _contain_ it. - what did you mean by and contain_it? Contain here means to make the parent element expand (or stretch) to contain floats, and the parent element in your case is #menuh-container. Otherwise the parent-element can't be used for adding background-colors behind and around its floating child - the #menuh. The buggy auto-containment effect in IE/win isn't replicated by any of the good browsers, so we have to tell the good browsers directly that they must contain floats. Of the many ways we can do that (tell them what to do), only a few will actually work in your case because you have a dropdown in that menu. I used 'display: table', which has no negative effects in your case because of how CSS tables work. IE/win doesn't understand that 'display: table' property at all, but this is one of those cases where IE's own 'hasLayout' bug comes to its rescue. I had to leave the float:right style on the page. If I moved it to the style sheet it didn't work. I think I remember hearing that to do a float you needed to declare the position, but when I declared the position on the menuh div it still didn't work. So for now I am leaving the float declaration on the page. Floats should not be given any positions - unless one also want to offset it with 'position: relative'. Absolute or fixed positioning of floats (as found in some stylesheets) simply mean the float-property will be ignored by browsers. I'll check that I didn't miss any of your existing styles. In my demo they are co-existing with my styles since I never touched your stylesheet. I'll be back on that once I have had time to dissect your styles down to the smallest details. Thank you again for your help. I did a Google search for the IE6 auto-expansion bug and it appears that maybe you coined the phrase - I am impressed. I will be reading up on it and trying to understand it all. Do that. FYI: the auto-expansion bug makes any element act like it were an HTML table-element on drugs. It works different on horizontal and vertical dimensions, since it doesn't keep the elements children in check the same way in both directions. Fun :-) Also: since the patch they have used to fix the auto-expansion bug in IE7 often has worse effects than the original bug itself, we may have to deal with that IE/win bug and the buggy patches for a long time. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - 2nd follow up
As promised, I've gone through the entire set of styles again, and found that the simplest factors are the easiest to miss :-) You have an [if lt IE 7] style-block in the page head, and those styles will of course override what's in the stylesheet and make everything fail in IE6 and older versions. Of course: my first example worked just fine, since I had placed all corrections in a style-block _after_ the [if lt IE 7] style-block. It is a matter of order and specificity - that I overlooked. Again: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html 1: All new styles moved to the stylesheet where they have replaced the old ones... http://www.gunlaug.no/tos/alien/jg-2/nav.css ...and my styles are easy to see since I don't use indentations - a personal preference thing. 2: I've deleted all unnecessary and disturbing styles in the [if lt IE 7] style-block in the page-head, so IE6 gets its corrections but will otherwise follow what's in the stylesheet. It is *important* that you transfer my corrections to your own page, or else it will fail in IE6 again. 3: I unexpectedly found that my contain floats method misfired in one browser - disturbing the dropdown, so I've changed that to the easyclearing[1] method - and tested again. 4: The use of 'font-size: small' on #menuh triggers IE/win's font resizing bug[2], so I changed that to 'font-size: 82%'. Choose another value if you like, but avoid the use of keywords if you want bug-free and somewhat identical font size across browser-land. regards Georg [1]http://www.positioniseverything.net/easyclearing.html [2]http://www.gunlaug.no/contents/wd_additions_13.html -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - follow up +more
Thank you to everyone who took the time to test my menu! Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. You can see it here - http://www.jgardnerdesigns.com/web-design-services.htm If anyone has any suggestions, please send them my way. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Thank you again for taking the time to help me with this! Jennifer os x 10.4.01 I think the menu is as intended in safari, ff, and camino: but +1 breaks it in all. In opera, the menu is aligned left with the about block breaking left approximately 30px out of the outermost page container. xp ie6 and ie7 on parallels/os x 10.4.01 In ie7 the link blocks break the top of the nav background band approx. 8px. At text-sixe largest they break out the bottom of the background band. In ie6 the menu is the same as opera/mac (it is aligned and breaking left). And, as well, the link blocks break the top of the nav background band approx. 8px. Sorry for all the bad news... Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Looking for a deal? Find great prices on flights and hotels with Yahoo! FareChase. http://farechase.yahoo.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test - follow up +more
JGardner wrote: http://www.jgardnerdesigns.com/web-design-services.htm Per the problems below I made some changes, which I think solved the +1 break, but something caused some extra padding/margin, something in IE6. So now the page has all of this extra which space on the right side. Wrong width on menu, combined with IE6' auto-expansion bug. A lethal combination. IE6 also needs to establish a relation between #menuh-container and #menuh. Also, due to the changes the navigation now is on the left side, I had wanted it aligned on the right side. I can live with it since it is more functional now, but if anyone knows how I can get it to align to the right side of the page that would be a big bonus! Float the entire #menuh right, and _contain_ it. Background color goes on #menuh-container. Example: http://www.gunlaug.no/tos/alien/jg-2/test_07_0926.html New styles for the relevant elements are found in page-head. Only tested in IE6, IE7, Firefox 2.0.0.7 and Opera 9.23. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
Jennifer Gardner wrote in reply to Georg Sorten Thank you so much!! Other than a slight positioning problem it seems to all be working now. Is there a specific place (or book) that will explain how you knew what to do? I did it and it worked but I don't know why it worked or more importantly how I would know when it would solve a problem in the future. Thank you all for taking the time to test the menu for me. This group is amazing!! Jennifer P.S. Sorry Georg I forgot to reply to all the first time. Hi Jennifer I don't have IE6 or even understand how it handles z-index since it has problems also when a container doesn't have layout [1]. The simple answer in why Georg's solution works is that how z-indexing can work. The are several solutions which work in good browsers but this is the only solution that works for IE. In IE, if two sibling rp containers have ap children, no matter what z-index is given to the ap elements, the layering of each ap element relative to each other stays the same since they belong to different rp parents. In IE a z-index of 1 plus should instead be given to at least the first rp element. See example 6F in this test page [2]. To get a better idea in z-indexing see this page in the wiki [3]. The specs [4] are very clear, part of which I have quoted below. An element that establishes a local stacking context generates a box that has two stack levels: one for the stacking context it creates (always '0') and one for the stacking context to which it belongs (given by the 'z-index' property). The part where it say stacking context to which it belongs is referring to the rp #header-inner element belonging the the root stacking context html. And when Georg gave the rp #header-inner element a z-index:1 he created a new local staking content for it's descendantnts or the part that says in the specs stacking context it creates. Now with z-index:1 the #header-inner element is now layered higher than any other element on the page outside of it since no other of these elements have a z-index. 1. http://www.brunildo.org/test/ap_contbox1.html 2. http://css-class.com/test/z-index.htm 3. http://css-discuss.incutio.com/?page=OverlappingAndZIndex 4. http://www.w3.org/TR/REC-CSS2/visuren.html#q30 I hope this helps. Kind Regards, Alan http://css-class.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
It seems like sometimes in IE 6 when you hover over the drop down links they disappear. Please let me know if this happens to you and if so what browser you are using. In IE 6, the menu is going under the content, so it loses focus when you hover over the lower menu items. Set the menu to have a higher z-index. Also, the menu bar is positioned too high (vertically, not z-index) in IE 6. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
JGardner wrote: Hi, For whoever has a second (risky question :-)) could you test the drop down function on the menu (there is only a drop down section under services). You can find the menu here - http://www.jgardnerdesigns.com/web-design-services.htm It seems like sometimes in IE 6 when you hover over the drop down links they disappear. Please let me know if this happens to you and if so what browser you are using. I am also still having the positioning problem in IE6 - the menu you will not move over to the left as it does with FireFox, and IE7. So if you see this problem on a different browser please let me know. Thanks for your time. Jennifer os x 10.4.01 I think the menu is as intended in safari, ff, and camino: but +1 breaks it in all. In opera, the menu is aligned left with the about block breaking left approximately 30px out of the outermost page container. xp ie6 and ie7 on parallels/os x 10.4.01 In ie7 the link blocks break the top of the nav background band approx. 8px. At text-sixe largest they break out the bottom of the background band. In ie6 the menu is the same as opera/mac (it is aligned and breaking left). And, as well, the link blocks break the top of the nav background band approx. 8px. Sorry for all the bad news... Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
JGardner wrote:
http://www.jgardnerdesigns.com/web-design-services.htm
It seems like sometimes in IE 6 when you hover over the drop down
links they disappear. Please let me know if this happens to you and
if so what browser you are using.
IE6 and IE7 can't stack absolute positioned elements properly, so the
drop down ends up behind the text below instead of in front of it. This
of course leads to loss of focus on :hover when text gets in front of
the drop-down.
To fix this IE/win bug, add...
#header-inner {position: relative; z-index: 1;}
...to stack the entire header higher than the content.
I am also still having the positioning problem in IE6 - the menu you
will not move over to the left as it does with FireFox, and IE7. So
if you see this problem on a different browser please let me know.
I didn't check how wide 'width: 100%' is supposed to be, but Opera 9
interprets your styles same as IE6.
Change to...
#menuh {width: auto;}
...and they will all agree and send the menu to the same spot on the
right side.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu test
Thank you so much!! Other than a slight positioning problem it seems to all be
working now.
Is
there a specific place (or book) that will explain how you knew what to
do? I did it and it worked but I don't know why it worked or more
importantly how I would know when it would solve a problem in the
future.
Thank you all for taking the time to test the menu for me. This group is
amazing!!
Jennifer
P.S. Sorry Georg I forgot to reply to all the first time.
- Original Message
From: Gunlaug Sørtun [EMAIL PROTECTED]
To: JGardner [EMAIL PROTECTED]
Cc: CSS List css-d@lists.css-discuss.org
Sent: Friday, September 21, 2007 1:15:17 PM
Subject: Re: [css-d] menu test
JGardner wrote:
http://www.jgardnerdesigns.com/web-design-services.htm
It seems like sometimes in IE 6 when you hover over the drop down
links they disappear. Please let me know if this happens to you and
if so what browser you are using.
IE6 and IE7 can't stack absolute positioned elements properly, so the
drop down ends up behind the text below instead of in front of it. This
of course leads to loss of focus on :hover when text gets in front of
the drop-down.
To fix this IE/win bug, add...
#header-inner {position: relative; z-index: 1;}
...to stack the entire header higher than the content.
I am also still having the positioning problem in IE6 - the menu you
will not move over to the left as it does with FireFox, and IE7. So
if you see this problem on a different browser please let me know.
I didn't check how wide 'width: 100%' is supposed to be, but Opera 9
interprets your styles same as IE6.
Change to...
#menuh {width: auto;}
...and they will all agree and send the menu to the same spot on the
right side.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Be a better Heartthrob. Get better relationship answers from someone who knows.
Yahoo! Answers - Check it out.
http://answers.yahoo.com/dir/?link=listsid=396545433
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
From: tedd [EMAIL PROTECTED] Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h The CSS seems in order. The menus themselves are difficult to use because they snap shut so fast and there is no timing mechanism to allow them to remain open or allow diagonal mouse movements with premature closing. Tab key support is not there - neither to light the menu items up nor to open the menus - (this could be good interms of accessibility, though) so an actual site would need to have the child level links accessible outside the menu to support keyboard surfing. This article describes some CSS and accessibility issues relevant to these types of menus, which might prove helpful: http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm Good luck. Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
On 07/10/2005 13:27, tedd wrote:
Please test the following --
http://www.webbytedd.com/menu_v
http://www.webbytedd.com/menu_h
Work well in FF - perhaps you could change your #menu ul ul rule to
something like:
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:15px;
margin:-15px 0 0 -15px;
}
That way you get a little room for mouse slip ups around the edges of
the menu. And it feels a bit more like a real menu because the margin
makes it feel like theres a delay to the menu disappearing. Havnt tested
this anywhere except FF.
Marcus
--
Marcus Williams -- http://www.cad-schroer.co.uk
CAD Schroer UK, 39 Newnham Road, Cambridge, UK
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
On (07/10/05 08:27), tedd wrote: Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h As far as I could see, everything working 100% perfectly with Opera 8.5 on GNU/Linux. Menu are lined up as desired, no margin/padding problem, and the dropdown are working smooth. Having some minor problem with Firefox 1.0.6 on GNU/Linux, concerning some empty pixels that seem to appear random between some of the dropdown menu. For example on the orizontal one I see them among Sub1.1-Sub1.2, Sub1.4-Sub1.5 and on some of the others SubX.X. Seems like there is a border of 1 maybe 2px among these submenus. Almost same problem with vertical one, where I see a line like that also between Item3-Item4 and at least one on each dropdown in correspondace with this one, so is Sub1.3-Sub1.4, Sub2.2-Sub2.3, Sub3.2-Sub3.3 and (?) Sub4.3-Sub4.4. That's all, the dropdown still works without problem, seem to be just a graphic issue. Also, remember that as far as I know, these are not supposed to work on IE (Win+Mac) without using a JScript. bye -- curson Fear is the mind killer, fear is the little death that brings total obliteration. -- Email.it, the professional e-mail, gratis per te: http://www.email.it/f Sponsor: Erbe e tisane di primissima qualità. * Inoltre 1800 articoli erboristici. Tutti a portata di un click ! * Clicca qui: http://adv.email.it/cgi-bin/foclick.cgi?mid=1309d=7-10 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
On 07/10/2005 14:21, Marcus Williams wrote: Work well in FF (Deer Park beta 1) -- Marcus Williams -- http://www.cad-schroer.co.uk CAD Schroer UK, 39 Newnham Road, Cambridge, UK __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h -- and report each menu's operation. IE6 XPsp2 - Appears to function perfectly, all menu elements were aligned with pixel precision even with changing the font size. What are you calling this? Grandson of Suckerfish? Chris: I'm not calling it anything just yet -- maybe simple menu. However, please understand that I'm not doing anything original -- I'm just trying to make what's been accomplished by others simpler. When I have finished simple product, I'll post it on my web site for others to review and possibly use. As far as the pixel precision you noted, that's due to using ems. Once you get used to using ems for everything, things like that just work. Many thanks for your review and comment. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
Having some minor problem with Firefox 1.0.6 on GNU/Linux, concerning some empty pixels that seem to appear random between some of the dropdown menu. For example on the orizontal one I see them among Sub1.1-Sub1.2, Sub1.4-Sub1.5 and on some of the others SubX.X. Seems like there is a border of 1 maybe 2px among these submenus. Almost same problem with vertical one, where I see a line like that also between Item3-Item4 and at least one on each dropdown in correspondace with this one, so is Sub1.3-Sub1.4, Sub2.2-Sub2.3, Sub3.2-Sub3.3 and (?) Sub4.3-Sub4.4. curson: Yeah, FF appears to handle borders a bit differently than other browsers. I don't know what that's all about. However, one fix is to place a border around the entire menu-item-box and not just the top and right. It makes the menu-item-boxes slightly larger than what I want. But, the net is a lesson in compromise. Many thanks for your review and comment. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
From: tedd [EMAIL PROTECTED] Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h The CSS seems in order. The menus themselves are difficult to use because they snap shut so fast and there is no timing mechanism to allow them to remain open or allow diagonal mouse movements with premature closing. Tab key support is not there - neither to light the menu items up nor to open the menus - (this could be good interms of accessibility, though) so an actual site would need to have the child level links accessible outside the menu to support keyboard surfing. This article describes some CSS and accessibility issues relevant to these types of menus, which might prove helpful: http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm Good luck. Al Sparber Al: Great reference -- I'll try to digest. Many thanks for your review and comment. tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
On 07/10/2005 13:27, tedd wrote:
Please test the following --
http://www.webbytedd.com/menu_v
http://www.webbytedd.com/menu_h
Work well in FF - perhaps you could change your #menu ul ul rule to
something like:
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding:15px;
margin:-15px 0 0 -15px;
}
That way you get a little room for mouse slip ups around the edges
of the menu. And it feels a bit more like a real menu because the
margin makes it feel like theres a delay to the menu disappearing.
Havnt tested this anywhere except FF.
Marcus
Marcus:
Good suggestion -- done -- except I changed it to ems.
Thanks for your review and suggestion.
tedd
--
http://sperling.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
tedd wrote: Hi: Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h -- and report each menu's operation. Thank you. tedd XP_SP2 IE6/FF/Moz?Opera Both are fine on my end with and without zoom @ 1280, Ted. Nice job. (BTW, slow catching up with back mail, sorry). ~dL -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu test
David Laakso wrote: tedd wrote: Please test the following -- http://www.webbytedd.com/menu_v http://www.webbytedd.com/menu_h -- and report each menu's operation. tedd XP_SP2 IE6/FF/Moz?Opera Both are fine on my end with and without zoom @ 1280, Ted. Nice job. (BTW, slow catching up with back mail, sorry). ~dL Ted, FWIW, you may want to cover for the forthcoming IE7 with this |!--[if lte IE 6] instead of what you've got. ~d| -- David Laakso http://www.dlaakso.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
