Closed Bug 430439 Opened 16 years ago Closed 13 years ago

The tag <button> can not be styled properly: there is always a remaining spacing

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 140562

People

(Reporter: tstumpf, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X; de; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; de; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

The button-tag can not be styled properly. It always remains a not editable kind of spacing in the visual output (rendering).

If one uses an image as content of the button you can not aline two or more buttons without a spacing between them even if the padding and border are set to null. One can just add additional border or spacing by these css attributes.

The input-tag of type image --which is proposed to be substituted by the button-tag containing an image-- does not render with any spacing (at least if this behaviour is requested).

The width of the button is additionally not rendered correctly automatically. It ignores the width of the image i.e. it renders the button to wide.

Reproducible: Always

Steps to Reproduce:
Load html source with inline, speceless, aligned buttons (button, not input) containing images.
No borders, no paddings, no margins (all set to 0).

Additional:
Set width of button to the width of the contained image.
Actual Results:  
Buttons are aligned with a spacing between them.

As ASCII-Art:

 Button1  Button2

 +------+ +------+
 | img1 | | img2 |
 +------+ +------+

Additional:
The button does not show the image completely.

Expected Results:  
Buttons should be aligned without a spacing in a continous flow

As ASCII-Art:

 Button1 Button2

 +------++------+
 | img1 || img2 |
 +------++------+

Additional:
The button should show the image completely.
Can you attach a simple HTML testcase that demonstrates the bug?
This should visualize the problem


<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
    body {
        background-color: #DDD;
    }
    dt {
        margin: 0;
        margin-top: 1em;
        padding: 0.5em;
    }
    dd {
        margin: 0;
        padding: 0.5em 0 0.5em 2em;
    }
    
    .red {
        background: #e99;
    }
    .green {
        background: #9e9;
    }
    
    .border {
        border: 2px outset #ccc !important;
        background-color: #ccc;
    }
    .padded {
        padding: 2px !important;
    }
    
    .no_space,
    .no_space * {
        border: none;
        padding: 0;
        margin: 0;
    }
    </style>
</head>
<body>
    <form>
        <h1>Examples</h1>
        <p>
            Examples with background green are ok,<br />
            examples with background red are not.
        <dl>
            <dt class="green">
                Without padding setup its ok to have the text not "touching"
                the next text and setting a "fancy" border
            </dt>
            <dd class="green">
                <button>|Test|</button><button>|Test|</button>
            </dd>
            
            <dt class="red">
                but not here (because the css author stated his point clearly: no padding, no margin, no border!)
            </dt>
            <dd class="red">
                <button class="no_space">|Test|</button><button class="no_space">|Test|</button><br />
                <button class="no_space">|Test|</button><button class="no_space">|Test|</button>
            </dd>
            
            <hr />
            
            <dt class="red">
                The images should be (almost) touching each other
            </dt>
            <dd class="red">
                <button class="no_space"><img src="http://www.mozilla.org/images/livemarks16.png" /></button><button class="no_space"><img src="http://www.mozilla.org/images/livemarks16.png" /></button>
            </dd>
            
            <dt class="green">
                like here (the minimal padding is in image)
            </dt>
            <dd class="green">
                <input class="no_space" type="image" src="http://www.mozilla.org/images/livemarks16.png" /><input class="no_space" type="image"src="http://www.mozilla.org/images/livemarks16.png" />
            </dd>
            <dt class="green">
                because this is a consistent behaviour for an element that has a image as content<br />
            </dt>
            <dd class="green">
                <img class="no_space" src="http://www.mozilla.org/images/livemarks16.png" /><img  class="no_space" src="http://www.mozilla.org/images/livemarks16.png" />
            </dd>
            <dt class="green">
                And if one would like to have a padding or a border, it can be set up easily
            </dt>
            <dd class="green">
                <input class="no_space padded" type="image" src="http://www.mozilla.org/images/livemarks16.png" /><input class="no_space padded" type="image"src="http://www.mozilla.org/images/livemarks16.png" />
            </dd>
            <dd class="green">
                <input class="no_space border" type="image" src="http://www.mozilla.org/images/livemarks16.png" /><input class="no_space border" type="image"src="http://www.mozilla.org/images/livemarks16.png" />
            </dd>
        </dl>
    </form>
</body>
</html>
Component: General → Layout: Form Controls
Product: Firefox → Core
QA Contact: general → layout.form-controls
You're seeing the padding for painting the focus outline.  And we have existing bugs on this....
Whiteboard: DUPEME
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Resolution: --- → DUPLICATE
Whiteboard: DUPEME
You need to log in before you can comment on or make changes to this bug.