[Webkit-unassigned] [Bug 25455] New: Position relative breaks CSS3 multi column

Tue Apr 28 12:42:45 PDT 2009

https://bugs.webkit.org/show_bug.cgi?id=25455

           Summary: Position relative breaks CSS3 multi column
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh
        OS/Version: Mac OS X 10.5
            Status: UNCONFIRMED
          Severity: Major
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: garrett at conaty.net

Bug appears when any of the children of a block that is using

webkit-column-width
webkit-column-gap
height 

has a CSS style of position:relative.  Not sure if the height calculation is
getting messed up or ? but the children don't break into the next column. 
Instead they overflow the container.  In fact you can get an odd effect if the
grandchildren have position:relative set.  In that case the children wrap into
the next column, but the grandchildren don't.

This bug also occurs if the child element has style of overflow:hidden.

Furthermore (and this may be a separate bug), if you set the children to have
any margin, they break at innapropriate places (like the middle)

Sample HTML follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>untitled</title>

        <style type="text/css" media="screen">

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, p, blockquote, th, td {
          margin: 0;
          padding: 0;
        }
        h1, h2, h3, h4, h5, h6 {
          font-size: 100%;
        }
        ol, ul {
          list-style: none;
        }
        address, caption, cite, code, dfn, em, strong, th, var {
          font-style: normal;
          font-weight: normal;
        }
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
        fieldset, img {
          border : 0;
        }
        caption, th {
          text-align: left;f
        }
        q:before, q:after {
          content: '';
        }
        html, body {
                /* get rid of that 2px window border in Internet Explorer 6 */
                border: 0;
        }

                .columntest {
                        background-color: red;
                        -webkit-column-width: 300px;
                        -webkit-column-gap: 10px;
                        height: 100px;
                }

                .box {
                        /*position: relative;*/
                        overflow: hidden;
                        width: 300px;
                        height: 25px;
                        background-color: yellow;
                }

        </style>

</head>

<body>
        <div class="columntest">
                <ul>
                        <li><div class="box"></div></li>
                        <li><div class="box"></div></li>
                        <li><div class="box"></div></li>
                        <li><div class="box"></div></li>
                        <li><div class="box"></div></li>
                </ul>
        </div><!-- .columntest -->
</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.