Border definition in css screws up the flow

RESOLVED INVALID

Status

()

Core
Layout: Floats
RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: burckardt, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

10 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071618 Iceweasel/3.0.1 (Debian-3.0.1-1)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008071618 Iceweasel/3.0.1 (Debian-3.0.1-1)

if i define a border for an input-field,
then the flow of input-fields goes wrong.

Example:


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>
      Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="language" content="de" />
    <style>
      .inputrow label     {width: 8em; float: left;}
      .inputrow input     {background: #fff215; border: 1px solid #0077bd;}
    </style>
  </head>
  <body>
    <form name="baseform" action="/kontakt/index.htm" method="post" style="margin: 0;">
      <div>
        <div id="namediv" class="inputrow">
          <label for="nameinput">name: &nbsp</label>
          <input id="nameinput" name="name" value="" />
          <br />
        </div>
        <div id="firstnamediv" class="inputrow">
          <label for="firstnameinput">firstname:&nbsp</label>
          <input id="firstnameinput" name="firstname" value="" />
          <br />
        </div>
      </div>
    </form>
  </body>
</html>



Without the border on .inputrow input the flow ist correct.

Example:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>
      Test
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="language" content="de" />
    <style>
      .inputrow label     {width: 8em; float: left;}
      .inputrow input     {background: #fff215;}
    </style>
  </head>
  <body>
    <form name="baseform" action="/kontakt/index.htm" method="post" style="margin: 0;">
      <div>
        <div id="namediv" class="inputrow">
          <label for="nameinput">name: &nbsp</label>
          <input id="nameinput" name="name" value="" />
          <br />
        </div>
        <div id="firstnamediv" class="inputrow">
          <label for="firstnameinput">firstname:&nbsp</label>
          <input id="firstnameinput" name="firstname" value="" />
          <br />
        </div>
      </div>
    </form>
  </body>
</html>


Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Updated

10 years ago
Component: Extension Compatibility → Layout: Floats
Keywords: testcase
Product: Firefox → Core
QA Contact: extension.compatibility → layout.floats
Summary: Border definition in css crashes the flow → Border definition in css screws up the flow
Reporter, do you mean that there should be one pixel space between the two input fields? In that case this is a regression between 2006042015 (works) and 2006042019 (fails).
Regression window is:
http://bonsai.mozilla.org/cvsquery.cgi?module=PhoenixTinderbox&date=explicit&mindate=2006-04-20+14%3A00&maxdate=2006-04-20+20%3A00
could be caused by bug 132561 or bug 309433.
If that's not what you mean could you delete the bug number from the "Blocks" field?
Blocks: 132561
Hardware: PC → All
Version: unspecified → Trunk
Created attachment 334737 [details]
testcase1, attached to the bug
Created attachment 334738 [details]
testcase2, attached to the bug

This is what the reporter indicates, is the right layout.
This seems more like a bug on branch to me.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 443229
Er, this isn't a dup, since that bug is quirks-only.  It _is_ invalid, since the input is shorter than the text with the border set like that.
Resolution: DUPLICATE → INVALID
(Reporter)

Comment 7

10 years ago
I see, that you no realize the problem and so you can't fix it.
Let me explain again:

Testcase1 shows the problem the flowing-error and
Testcase2 showes how it has to flow.
The difference is only the border-declaration in the style.

The border-declaration in the style definition destroys the left flow.

There is no one pixel problem.
Status: RESOLVED → VERIFIED
The border is a problem because it makes the float bands overlap vertically.  The one-pixel thing mentioned above is not what Martijn's testcases show, nor why I marked the bug invalid.

The bug is invalid because the behavior is correct given your styling.
(Reporter)

Comment 9

10 years ago
Steps to Reproduce:

1.
Look at the output of the Testcase1
You see there is the border colored
and no flow.

2.
Look at the output of the Testcase2
That way it has to flow.
Status: VERIFIED → UNCONFIRMED
Resolution: INVALID → ---
That's not what the CSS spec says, actually.  Please read the section on float positioning carefully.

This bug really is invalid.  Please don't reopen it again.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago10 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.