why does doctype change 'display:table-cell'' behaviour

StackOverflow https://stackoverflow.com/questions/17877537

  •  04-06-2022
  •  | 
  •  

Question

I have made a form with inputs. The widths of these inputs are 100%, 75%, 50% and 25%, and I should be able to combine them to a row (so a 50/50, 25/25/25/25).

These inputs can't have fixed sizes, the div arround the wrapping form can be any width. The problem is that there are borders and paddings which are in pixels and CSS does not allow width: 100%-10px;.

The solution I've found was adding display: table-cell to a wrapping and the div wrapping that display: table. Small example:

<div>
    <span class="Half"><input class="" value="Half"/></span>
    <span class="Half"><input class="" value="Half"/></span>
</div>

With my css this works .perfectly. If I add padding to the input, the padding just makes the width smaller.

The problem: When I add <!DOCTYPE html>, the padding makes the input overflow the span. No doctype=no problem, but I want to keep using it.

I've made an example: http://jsfiddle.net/35SSR/

As you can see, there are no gaps between the inputs, and the inputs overflow the form. This is because jsFiddle also uses the doctype

Anyone got some ideas?

Example (I want the 'no doctype' looks in a 'with doctype' page, has to be crossbrowser):
example image of problem
(source: lab35.nl)
.

Was it helpful?

Solution

Two problems here:

  1. In order to emulate quirks mode (ie the mode without a doctype) in standards mode, you need to include the box-sizing:border-box style. Note, if you want to support Firefox, you also need the prefixed version (-moz-box-sizing). Older webkit browser might also need a prefix.

    You can to apply this to the global selector so that it affects all elements or just to the span elements (since those are the ones that need it).

    The reason you need this is because the spans are set to percentage widths, that you want to add up to 100%. But in default behaviour in standards mode, borders, padding and margin are added outside of the box, so your 50% width actually becomes 50% plus and extra 5px for the border, etc. This is why it overflows off the side.

    The border-box setting switches it into a mode that works very similarly to how quirks mode worked, ie the borders etc are put inside the box, so that if you ask for a 50% wide box, it will be 50% wide, even when it has a border or padding.

  2. The second point is that display:table and display:table-cell don't always work as expected unless you also have another layer of markup between them set as display:table-row. So if you want to continue using the table layout styles, you should add this.

    However your layout doesn't really lend itself to a table format anyway; it's a perfect example of where float:left should be used. I'm normally not a fan of floats, but this is one case where I would say to use it because it's pretty much exactly the use-case they had in mind when they invented them.

With those points in mind, I've completely rewritten your jsFiddle code using floats and box-sizing, and produced CSS code for you that looks exactly like your intended effect, without any changes to the HTML markup.

Here's the updated fiddle: http://jsfiddle.net/35SSR/5/

Hope that helps.

OTHER TIPS

If you use box-sizing: border-box; for your inputs you can have width:100% and padding:10px;

Okay, here you go: http://jsfiddle.net/cmex/35SSR/4/

I've added -moz- and -webkit- properties so it works now in Chrome 28, Firefox 22, IE (8-10), Safari 5.1.7(Win)

If you need to support earlier versions of IE you can use https://github.com/Schepp/box-sizing-polyfill for support of box-sizing

Sometimes i am solving this by using tables. It's easier to style with.

in HTML,

<fieldset>
    <table>
        <tr>
            <td colspan="4"><input class="Full" value="Full"/></td>
        </tr>
        <tr>
            <td colspan="2"><input class="Half" value="Half"/></td>
            <td colspan="2"><input class="Half" value="Half"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
        <tr>
            <td><input class="Quarter" value="Quarter"/></td>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
        </tr>
        <tr>
            <td colspan="3"><input class="ThreeQuarter" value="ThreeQuarter"/></td>
            <td><input class="Quarter" value="Quarter"/></td>
        </tr>
    </table>
</fieldset>

then in css, just a simple

table {
    width: 500px;
}
input {
    width: 100%;
}

required. then you get all in one fieldset box. See example here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top