Closed Bug 236259 Opened 21 years ago Closed 21 years ago

Problem with overflow:hidden and margin

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: shift, Assigned: dbaron)

Details

Attachments

(1 file)

Testcase (I think)
776 bytes, text/html
Details 
User-Agent:       
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.6) Gecko/20040115

A bug appeared with Mozilla 1.6 and FireFox 0.8 (And strangly with Konqueror 
3.2 too).  
  
 When using overflow:hidden style on a element, margin CSS attributes are not 
respected.  
 Testcase is better tha world :  
 http://shift.freezope.org/css_lab/test/div  
  
 As you can see the boxes A C and B are separated but they will touched 
together. That is the case when removing overflow:hidden.  
  
 -------------- Testcase code ------------------------  
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">  
 <head>  
 <title>overflow : hidden testcase</title>  
 <meta http-equiv="Content-Type" content="application/xhtml+xml; 
charset=iso-8859-15" />  
 <style>  
 div[id] {  
 border : 2px solid black;  
 }  
 #a {  
 float:left;  
 height:100px;  
 width:150px;  
 }  
 #b {  
 float:right;  
 height:100px;  
 width:100px;  
 }  
 #c {  
 height:200px;  
 margin-left:150px;  
 margin-right: 100px;  
 overflow: hidden;  
 }  
 </style>  
 </head>  
 <body>  
 <div>  
 <div id="a">A</div>  
 <div id="b">B</div>  
 <div id="c">C</div>  
 </div>  
 </body>  
 </html>  
 
(See http://bugs.kde.org/show_bug.cgi?id=76612 for Konqueror bug report) 
  
 

Reproducible: Always
Steps to Reproduce:
Go to http://shift.freezope.org/css_lab/test/div 
Actual Results:  
Boxes are separated by a big space 

Expected Results:  
The boxes will have border in common
Attached file Testcase (I think) — 
overflow: visible works as expected.

With overflow: scroll and overflow: hidden, the boxes are being shortened by
the float.  It may seem suprising that overflow: hidden and overflow: scroll
are in the same category, but in Mozilla, overflow: hidden elements are
scrollable through the DOM.  Therefore, the behavior you see is intentional to
avoid floats overlapping scrollable elements.  This bug is therefore invalid, I
think.
"Therefore, the behavior you see is intentional to 
avoid floats overlapping scrollable elements." 
 
I can't see why it should be that way. I can't see why it shouldn't just be 
like override: visible. Can you point to an enlightenment in the CSS spec ? 
Elements with 'overflow: hidden' may be scrollable by, e.g., DOM APIs.
Status: UNCONFIRMED → RESOLVED
Closed: 21 years ago
Component: Style System (CSS) → Layout: Block and Inline
Resolution: --- → INVALID
What does the fact that it is scrollable has to do with the fact that margins 
with floats are messed up ? 
I think that this bug is not invalid too.
Why invalid?
Overflow property is influence the contents of elemnt itself.
So, I think overflow property is not related for float of siblings.

sharparrow1 and David:

You should show the pointer to the spec.
This is invalid. See paragraph 5 of section 9.5 of CSS2.1:
# The margin box of a table or an element in the normal flow that establishes a
# new block formatting context (such as an element with 'overflow' other than
# 'visible') must not overlap any floats in the same block formatting context as
# the element itself. If necessary, implementations should clear the said element
# by placing it below any preceding floats, but may place it adjacent to such
# floats if there is sufficient space.
 -- http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#floats
Aaaaaaaaaaah ! One of these unspecified cases in CSS2 now specified in CSS2.1. 
 
Note to self : take a look to CSS2.1 CR.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: