Open Bug 702163 Opened 12 years ago Updated 1 year ago

negative top positioning within containers


(Firefox :: General, defect)

7 Branch
Windows XP





(Reporter: cool_ali786, Unassigned)


User Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.120 Safari/535.2

Steps to reproduce:

To be honest, im not sure if this is a valid rendering issue, or it works like its supposed because im not sure how its supposed to work, but i came accross it because it didnt work the way i needed it to, plus it seem fine on webkit/opera, although IE8/9 has almost the same issue.

follow the stackoverflow link for a proper description.

first solution is my "workaround" but atleast i 'think' its a rendering fault. Why would pixel defined negative positioning not work?

thought to post this in the case it may be an issue.

Actual results:

As above

Expected results:

All in the link
Ignore my link, a moderator deleted my post there, Here's a copy of my post so you don't waste your time.

I can't do negative top positioning in IE9 and firefox properly in a nested table, heres a jsfiddle i mocked up of mine,

Notice that the green box DOES go negative 15px above its parent, what is that? after a little messing around it turns out its height of the paragraph's first line. If i empty the paragraph like so

The green box will not go to a negative top position, ive even tried negative margins.

Hopefully someone has an idea or work around.

EDIT: its seems ( i dont know why) content will only go negatively positioned to its parents:

A) If there is a line of text within it, AND

B) the maximum displacement will still be the LINE HEIGHT value of that text.

have no idea why, PS: THIS IS also a problem is firefox! Webkit browsers are safe.

EDIT 2: i made a hack/work around for this. follow the following steps and let me know if it works for you.

1) in the parent container add an empty

<pre style="line-height: Xpx;"></pre>

element where X is equal to the size of the negative top positioning.

2) if the parent has any children do the following else skip this step. If there is one child give it the following style, "position: relative; margin-top: -Xpx;" where X is the displacement again. (what this will do is move this element to the same place as the pre removing any relative placement issue where pre is pushing content away) If there are more children give them an extra container div and do the above to that container.

NOTE: make sure the parent container still has the negative top position equal to X.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.