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