Bug 65940 – [test case] css position absolute elements display incorrectly.

First Last Prev Next No search results available Search page

Bug 65940:

[test case] css position absolute elements disp...

Product:	konqueror
Component:	khtml renderer
Status:	RESOLVED
Resolution:	FIXED
Target:	---

Version:	unspecified
Priority:	NOR
Severity:	normal

Votes:

Description:
Opened: 2003-10-13 03:37 Last Changed: 2004-10-19 20:04:26

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.

Comment #1 Jonathan Ingram 2003-10-13 03:41:38

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.

Comment #2 Pablo Pita Leira 2003-10-26 21:33:48

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.

Comment #3 Stephan Kulow 2003-10-27 13:52:49

Created an attachment (id=2898) [details] the test case looks broken

Comment #4 Wolfgang Scheicher 2003-11-02 14:40:11

Created an attachment (id=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

Comment #5 Josh Metzler 2003-11-12 02:33:57

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.

Comment #6 Esben Mose Hansen 2003-11-25 17:23:09

Created an attachment (id=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.

Comment #7 Esben Mose Hansen 2003-11-26 19:26:27

Created an attachment (id=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.

Comment #8 Samuel Edlmeier 2004-01-13 17:44:54

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.

Comment #9 Philippe Bourdeu d'Aguerre 2004-01-22 16:17:00

Created an attachment (id=4292) [details] HTML example where style position:absolute fails

Comment #10 Dominic Chambers 2004-03-08 02:48:50

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

Comment #11 Dominic Chambers 2004-03-08 02:54:54

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.

Comment #12 Dominic Chambers 2004-03-08 03:00:41

Created an attachment (id=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).

Comment #13 Dominic Chambers 2004-03-08 03:05:57

Created an attachment (id=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.

Comment #14 Dominic Chambers 2004-03-08 03:09:55

Created an attachment (id=5078) [details] test case If we place the text after the absolutely positioned element then it works again.

Comment #15 Dominic Chambers 2004-03-08 03:15:55

Created an attachment (id=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.

Comment #16 Udo Steinbach 2004-04-02 22:22:41

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.

Comment #17 faden altern org 2004-08-29 12:15:03

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.

Comment #18 Jos van den Oever 2004-10-19 13:23:45

Created an attachment (id=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.

Comment #19 Germain Garand 2004-10-19 20:04:26

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

Platform:	RedHat RPMs
OS:	Linux
Keywords:

People

Reporter:	Jonathan Ingram
Assigned To:	Konqueror Developers
CC:

Related actions

Note

You need to log in before you can comment on or make changes to this bug.

Attachments
the test case (1.80 KB, text/html) 2003-10-27 13:52, Stephan Kulow	Details
Tooltip Testcase (1.03 KB, text/html) 2003-11-02 14:40, Wolfgang Scheicher	Details
very simple testcase. (546 bytes, text/html) 2003-11-25 17:23, Esben Mose Hansen	Details
Test of position:absolute that fail in Konq. (377 bytes, text/html) 2003-11-26 19:26, Esben Mose Hansen	Details
HTML example where style position:absolute fails (438 bytes, text/html) 2004-01-22 16:17, Philippe Bourdeu d'Aguerre	Details
test case (210 bytes, text/html) 2004-03-08 03:00, Dominic Chambers	Details
test case (238 bytes, text/html) 2004-03-08 03:05, Dominic Chambers	Details
test case (238 bytes, text/html) 2004-03-08 03:09, Dominic Chambers	Details
test case (281 bytes, text/html) 2004-03-08 03:15, Dominic Chambers	Details
Another testcase with a cool rss overview. (138.79 KB, text/html) 2004-10-19 13:23, Jos van den Oever	Details
Hide Obsolete (1) \| View All Add an attachment (proposed patch, testcase, etc.)

Depends on:
Blocks:
	Show dependency tree - Show dependency graph

First Last Prev Next No search results available Search page

Actions

Reports

My Account