Bug 4917

Summary:

marginheight/marginwidth attributes on frame override marginheight/marginwidth on body tag

Product:

WebKit

Reporter:

edsbugs

Component:

CSS

Assignee:

Maciej Stachowiak <mjs>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, emacemac7, ian, karlcow, rniwa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

HasReduction, InRadar

Version:

420+

Hardware:

Mac

OS:

OS X 10.4

URL:

http://home.deloitte.com

Attachments:

Description	Flags
Test Case for IE Margins Bug	none
rendering in safari, firefox, chrome	none

edsbugs

Reported 2005-09-10 09:46:18 PDT

Go to the URL home.deloitte.com. Notice on the left hand frame that there are no links displayed, also notice the top frame is messed up. Open mozilla or IE and you can see the difference.

Attachments
Test Case for IE Margins Bug (3.51 KB, application/octet-stream) 2005-10-21 12:53 PDT, Daniel Udey	no flags	Details
rendering in safari, firefox, chrome (286.67 KB, image/png) 2024-03-21 22:11 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Joost de Valk (AlthA)

Comment 1 2005-09-10 14:28:35 PDT

Confirmed, a damn nasty bug to reduce, since i've thrown about an hour at it and can't seem to pinpoint what's happening, Olliej and my guess is that this is a problem with frames and absolute positioning....

Daniel Udey

Comment 2 2005-10-21 12:53:08 PDT

Created attachment 4440 [details] Test Case for IE Margins Bug The issue here is quite a simple one, and has to do with the order in which Safari resolves various overlapping commands. In the page given as an example (home.deloitte.com), there are two properties used in the <frame> elements, marginheight and marginwidth. These properties refer to the margin from the top/bottom of the frame and the margin from the left/right of the frame, respectively. That is to say, if a frame has marginheight=20, then any pages loaded in that frame will have a 20px margin on the top and bottom. This is part of the HTML standard. This margin can also be set inside the document itself using CSS (generally a padding or margin on the <body> element), but it is also set by proprietary attributes invented by the IE team, the margintop and marginleft attributes which can be applied to the <body> tag. The reason Safari's behaviour differs is that IE and Firefox treat these proprietary attributes with more priority than the marginheight/marginwidth attributes on the <frame> element, while Safari honours the (compliant) attributes on <frame> in preference to the (non-compliant) attributes on <body>. Test case usage: The top frames have no margin specified in <frame>; the bottom frames do. The left frames have their margin:0 set via proprietary elements; the right frames use CSS. Top-left is proprietary, no margin; top-right is CSS, no margin; bottom-left is proprietary, margin; bottom-right is CSS, margin. Resolution: <body margintop=? marginleft=?> should take priority over <frame marginheight=? marginwidth=?> instead of vice-versa. Workaround (1): Remove unwanted marginheight=X marginwidth=Y attributes on <frame> elements in the frameset. Workaround (2): Use CSS to remove padding/margins instead of proprietary attributes.

Ahmad Saleem

Comment 3 2022-06-10 17:08:38 PDT

Based on attached test case, I am only able to reproduce one case (it mentions that two of cases, where Safari does not work properly) and it matches "Chrome Canary 104" in the particular. Firefox Nightly 103 renders all four frames within frame-set same. While Safari and Chrome differs on one. Thanks!

Radar WebKit Bug Importer

Comment 4 2022-07-06 13:06:19 PDT

<rdar://problem/96542881>

Karl Dubost

Comment 5 2024-03-21 22:11:47 PDT

Created attachment 470477 [details] rendering in safari, firefox, chrome safari and chrome share the same rendering Firefox is different.

Karl Dubost

Comment 6 2024-03-21 22:27:33 PDT

Reduced Test case for the difference in between Safari/Chrome AND Firefox <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Frames Margin Testcase</title> </head> <frameset rows="*,*"> <frameset cols="*,*">  <frame marginheight="20" marginwidth="20" src="frame-margin.html"> </frameset> </frameset> </html> AND <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > <p style="background-color: gold;">This content is set with a 0 margin using IE's proprietary <body> attributes, and thus should appear up against the frame borders. Safari handles this case incorrectly, giving priority to the marginwidth/marginheight attributes of the <frame> element instead.</p> </body> </html>

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