Version: (using KDE KDE 3.1.3) Installed from: RedHat RPMs Compiler: standard RedHat 9 OS: Linux I'm using position:absolute to implement sidenotes. The technique displays correctly in IE and Mozilla, but in Konqueror most of the positioned elements are not in the correct vertical position. Here is a test case: <html> <style type="text/css"> body {margin-left:30%;} span.leftnote {position: absolute; left: 5%; right: 75%;} </style> <body> <p> <span class="leftnote">Sidenote 1</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx <span class="leftnote">Sidenote 2</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx <span class="leftnote">Sidenote 3</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx </p> <p> <span class="leftnote">Sidenote 4</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx <span class="leftnote">Sidenote 5</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx <span class="leftnote">Sidenote 6</span>Here xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx </p> </body> </html> Sidenotes 1, 2, 3, 4 are in the correct positions, but sidenote 5 overwrites sidenote 2, and sidenote 6 overwrites sidenote 3. If we change to only having one paragraph instead of two, all the sidenotes display correctly.
Apologies -- in cutting & pasting the testcase, I rendered it invalid HTML. The top part should of course be <head> <title>absolute positioning vertical error testcase.</title> <style type="text/css"> body {margin-left:30%;} span.leftnote {position: absolute; left: 5%; right: 75%;} </style> </head> plus all the other gubbins, such as DOCTYPE. With or without, the error is still present.
Subject: Re: css position absolute elements display incorrectly. I can confirm that the given test case is not displayed properly in Konqueror, from Debian KDE pre-compiled CVS 20031020 packages. I observ sidenotes 1,2,3, 5 and 6 are overwritten in the rendering while sidenote 4 is displayed correctly.
Created attachment 2898 [details] the test case looks broken
Created attachment 2982 [details] Tooltip Testcase When trying to create Tooltips, i noticed a issue with position:absolute myself I did test with cvs head from 2003.10.29
I think it is this bug that causes the CSS menus at www.wccnet.org (the college my wife is attending) to all be displayed one after the other. This makes it necessary to scroll down through pages of menu items to view the content on every page. Mozilla shows the menus correctly.
Created attachment 3401 [details] very simple testcase. It would seem that absolute positioned elements aren't positioned relative to their containing element, but rather to <body> or something. Attaching a reduced, very simple testcase, reduced from http://www.oyfss.html The red elements should be rendered "on line" with the two black elements. Konqueror, up to an included a fairly recent CVS build, renders the two red spans on top of one another. I've tested this with div's instead of <p>, and with multiple levels of containing blocks with the some result.
Created attachment 3421 [details] Test of position:absolute that fail in Konq. It was pointed out to me that the testcase above was wrong. So here's the correct one! Sorry for the spam.
Look at www.ftd.de. Some menu itmes in the navigation on the left side ("Registrieren", for example) opens a submenu. In IE, Mozilla and Opera they are positioned correctly relative to their containing element (<a href=""></a>), in Konqueror they are positioned on the top of the page. It seems that the positioning is related to the body-element (as described by Esben). I use a current KDE-CVS-Snapshot (2004-01-12), KDE 3.2beta2 is also affected from this bug.
Created attachment 4292 [details] HTML example where style position:absolute fails
> It would seem that absolute positioned elements aren't positioned relative to > their containing element, but rather to <body> or something. Yes, that's often the case. The CSS names are actualy nonsensical; there are in reality five positioning types: nudge (position:relative) relative (position:absolute with a position:relative ancestor) absolute (position:absolute with NO position:relative ancestor) fixed float So the one I call relative is where you position an element relative to another element. The relative, absolute, and nudge positioning methods can all (in all other browsers) be used on just a single axis. So it is, for example, possible to position absolutely on the horizontal axis, while maintaining the original position on the y axis. This is the error you demonstrate in your test case. It's also worth understanding that these different positional methods come with various run-around side effects (how they affect the positioning of other elements), that can not be controlled separately. There are three run-around modes: normal (applies only to float) phantom (applies only to nudge) no run-around (applies to relative, absolute, and fixed) Normal run-around is where the run-around behaviour stays attached to the element you are positioning, and phantom is where the appearance of the element floats of somewhere else but the physical presence remains at it's original location. Sorry if you knew all that, but it took me ages to properly understand CSS positioning because it is so unintuitive, and laden (burdened?!) with unecesarry side effects.
As I mentioned in the previous post, absolute positioning should be possible on only a single axis, where the other axis remains at the original location. Konqueror does actually work this way under some limited circumstances, but this breaks very easily. The following test cases will demonstrate that.
Created attachment 5076 [details] test case In this test case the words 'Hello' and 'World!' are both written in the center box, but the word 'Hello' is positioned relative to the outer box (0px) on the horizontal axis. The vertical axis is computed correcly here (original position).
Created attachment 5077 [details] test case This test case is identical to the one above except that we place some text before the absolutely positioned element. The vertical position is now incorrectly calculated -- it is not even rendered as though the vertical position were defined as 0px, and so I am unsure what exactly is happening.
Created attachment 5078 [details] test case If we place the text after the absolutely positioned element then it works again.
Created attachment 5079 [details] test case Finally, if we place some text before the positioned element, but wrap that element in a fresh block element, it works again. So the key appears to be that the positioned element only works on a single axis when it is the first element within a parent block element. All of these test cases work on the other axis too, though I have not demonstrated that.
With my position:relative on http://radwege.udoline.de/ it depends on the font size. Every page has a menu on the left side of the text. But with most font sizes the menü is not displayed or at right or bottom of the text. All other positioned elements, main menu and text, are ok. Only with huge font size all is OK. My pages are showed 100% OK with IE and Opera. http://www.adfc-oldenburg.de/ has also a menu bar on the left, with position:absolute, and looks ok.
I have some trouble with this bug. It is not fixed in 3.2.2 version. See that : http://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html I used a lot the absolute positionning and then I apply some margin to element to move them verticaly and horizontaly. It fails on Konqueror but works well on Safari 1.1, Opera, IE and Mozilla.
Created attachment 7954 [details] Another testcase with a cool rss overview. This file works well with Mozilla and Opera. "position: absolute" is demonstrated by the tooltips associated with the different headlines. In Konqueror 3.3.1 the tooltips are shown at the top of the page (not the viewport), whereas, they should be shown underneath the headline they belong to.
CVS commit by ggarand: Finish merge of static position calculation for positioned elements As I can't find a single regression anymore, I'd rather commit before Allan wreak havocs on the Render output :) BUGS: 78449, 83748, 88193, 65940, 68303, 73000 M +25 -0 ChangeLog 1.306 M +0 -2 css/cssstyleselector.cpp 1.319 M +20 -4 rendering/bidi.cpp 1.196 M +16 -9 rendering/render_block.cpp 1.50 M +27 -49 rendering/render_box.cpp 1.241 M +11 -1 rendering/render_object.cpp 1.271 M +3 -1 rendering/render_object.h 1.197 M +18 -3 rendering/render_style.h 1.107