Alan K Baker wrote: > As a courtesy to you I have 'bottom' posted, but 'top posting' > is my 'style'. No-one else has a problem with it, and I can't > keep changing it to suit everyone. :-) > > Yes, I did alter your code because at first it would not work > in any browser, which may have been something to do with where > I placed the HTML. > > I've tried your code again and I've tried variations on it, > but it still won't work in IE6 and IE7 does 'strange' things!
Take the test. :-) [...] > The live site is at: www.allsaintshove.org with my altered > code. Please excuse the religious content, I'm working > on the website as a favour. :-) > > Regards, > > Alan. Seeing live code makes this job so much easier. In another thread you mentioned about Firefox render incorrectly. The reverse is actually true in all most all cases. You have already run into several bugs with IE6, IE7 and IE8. Each version will show differences. As you progress in your coding will realize that you have to jump through the loops for IE but each version of IE has a different set of loops you have to jump through. Welcome to this list Alan and welcome to the strange and wonderful world of Internet Explorer. */**/+/**/:-)/*/*/ ;-) OK, Test 1. <http://css-class.com/test/bugs/ie/stacking-level-bug1.htm> Good browsers, IE7 and IE8: We have the selectable anchor with transparent and yellow stripes. We can hover the area (pointer will show) and those "Another heading" which are also links can not be hovered since they are under the selectable anchor layer. IE6: This (selectable anchor at the bottom) could be what is happening in your example. On to Test 2. <http://css-class.com/test/bugs/ie/stacking-level-bug2.htm> IE6: Now the selectable anchor is showing correctly, I forgot something. I had to give a height and position to the body element. * * body {height:100%;position: relative;} /* Only seen by IE5~IE6 */ I shouldn't have to do this since the viewpoint is the principle containing block [1] already. On to Test 3. <http://css-class.com/test/bugs/ie/stacking-level-bug3.htm> IE6 and IE7: Something is dreadfully wrong since I have given my container position absolute with a width of 100% but both these browsers will offset my whole container wrong. Take a sneak back at the good browsers and notice that they are still the same (correct offset). You may be asking where did the blue box go in IE6 and IE7. Hint just scroll the right. Check in with the good browsers and notice that they are the same as test 1 and 2. On to Test 4. <http://css-class.com/test/bugs/ie/stacking-level-bug4.htm> Now first check in with the good browsers. Notice that you can now hover the selectable anchor and clicking it will show the outline of the link. View the CSS in the source and notice that I now have just this. a.selectable { width: 90%; height:90%; display: block; z-index: 1; position: absolute; bottom:5%; left:5%; } I gave you sort of solution but I didn't mention that the good browsers don't need a transparent background or a:hover to work. While in test 4 work out where on the page you have to hover to get IE6 and IE7 to see the selectable anchor. /* Hacks for IE5~IE7 only */ *+html/*/*/ a.selectable:hover { /* this value is seen by IE7 and hidden from IE8 */ background: url(../../images/tb/yellowtran4.gif); } * html a.selectable:hover { /* this value is seen by IE6 */ background: url(../../images/tb/yellowtran4.gif); } Yes once you hover the green float in IE6 and IE7 the selectable anchor will show. Alan, don't get fizzled by IE, yay must train oneself to get IE to work (throw garbage at it IE :-). On to Test 5. <http://css-class.com/test/bugs/ie/stacking-level-bug5.htm> Now I have have removed position:absolute from the container div. Before you use position:absolute or position:relative on a container you start a procession of bugs in IE6 and IE7 which must be address by well place fixes. A absolutely position element ie. selectable anchor will position itself in respect to it nearest ancestor with position:relative. This is the body element since it is the initial containing block (viewpoint). Both IE6 and IE7 (also IE8 but differently) still has it wacky behavior where only particular parts of the page is will bring the selectable anchor into view. It's important what content or backgrounds are present already. My solution will completely crash once the page content exceed the viewpoint. Looking in my inbox I see Georg has also noted this where he has changed the height to 10000px. This is why live code can come in use since anyone can come up with many many solution for IE. My solution is perfect for a page that is alway 100% in height. On to Test 6. <http://css-class.com/test/bugs/ie/stacking-level-bug6.htm> Now I have removed position relative and height for IE6 and given the selectable anchor 10000px. [1] <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> Alan http://css-class.com/test/ ______________________________________________________________________ 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/
