User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030 I wrote a bit of code that uses relative positioning to create a form layout using <div> elements. Each relatively positioned element is given a z-index in order to prevent overlapping with certain absoluetly positioned elements that appear in parent elements. I also use the float property on nested divs that appear back to back which does not work! All of this works perfectly in Internet Explorer, but alas not at all in Mozilla! I haven't seen a good example of z-index or float working on relatively positioned elements in Mozilla. Reproducible: Always Steps to Reproduce: 1. Use nested divs each parent is positioned relatively or inheritently. Apply a z-index to each so that each child is farther up on the z-index scale. If you like at some point in the nesting throw in two divs back to back (still z-indexed) and apply a float. Actual Results: The div elements that are positioned relatively do not rise on the z-index scale and do not float! Expected Results: Look at the example URL in IE and on Mozilla, it should be pretty obvious.
Oh I almost forgot.. the example url outputs PHP modified code for Mozilla because The original code was completely chaotic when it rendered! All the elements positioned on top of the form fields and made the page unusable. Here is a bit of code that elaborates more. And you can simply run the code outputted on IE in Mozilla. <div style='position: relative; z-index: 1; width: 100%; background: black; height: 200px; text-align: center; vertical-align: middle;'> <div style='position: relative; z-index: 2; width: 99%; background: white; height: 150px;'> <div style='position: relative; z-index: 3; float: left; background: blue;'> Text text </div> <div style='position: relative; z-index: 3; background: red;'> Text text </div> </div> </div>
If I understand the problem correctly (the float is not visible w/ a pos:rel DIV), this this is similar to bug 217314.
The rendering of that testcase is exactly correct. The red background is painted on top of the black-on-blue div, as it should be (since both are positioned boxes with equal z-index, so are painted in document order). What exactly is the bug? I don't have IE to test with, so you'll need to give a clearer description of the expected results on that testcase.
Safari, Opera and Mozilla agree on the rendering of that testcase. IE puts the float above the position:relative block that follows it but that is, as far as I remember from CSS 2.1 appendix E, wrong.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID
Oh, I see. Yes, IE's behavior is wrong per appendix E. Since both boxes are positioned and have non-auto z-index, they are rendered strictly in document order. The float part only affects stacking relative to the backgrounds of non-positioned elements (to which z-index does not apply, by the way).
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.