Bug 4917

Summary: marginheight/marginwidth attributes on frame override marginheight/marginwidth on body tag
Product: WebKit Reporter: edsbugs
Component: CSSAssignee: Maciej Stachowiak <mjs>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, emacemac7, ian, karlcow, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 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="*,*"> <!-- It is these attributes taking preference that causes the problem --> <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 &lt;body&gt; attributes, and thus should appear up against the frame borders. Safari handles this case incorrectly, giving priority to the marginwidth/marginheight attributes of the &lt;frame&gt; element instead.</p> </body> </html>
Note You need to log in before you can comment on or make changes to this bug.