Home/ Questions/Q 4244776
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T03:45:10+00:00

Could someone help me resolve the discrepancies between the following two cases. In both

  • 0

Could someone help me resolve the discrepancies between the following two cases. In both cases I have split an image into several pieces and placed them in a table so that it still appears to be a single image.

However, in one case, I have set the doctype to and in the other there is no doctype set. My expected result is shown when there is no doctype set ( no border-spacing or cellspacing or any other spaces between the cells and the rows). However, when the doctype is set, there is a 1px padding in-between rows.

The HTML for both cases is the same except for the doctype

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>

could someone explain to me why there is a 1px gap between the rows when the doctype is set to HTML ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @Shafee: Try —

    .row img {
    display: block;
}

    Edit

    Short explanation: your code with the DOCTYPE was triggering strict mode in your browser which handles the display of images differently.

    Longer explanation:

    In the early days, experiments with
    strict mode invariably raised the
    comment that images suddenly got an
    odd bottom margin that couldn’t be
    removed. The cause was that in strict
    mode <img /> is an inline element,
    which means that some space should be
    reserved for possible descender
    characters like g, j, or q. Of course
    an image doesn’t have descender
    characters, so the space was never
    used, but it still had to be reserved.

    The solution was to explicitly declare
    images block level elements: img
    {display: block}    .

    Nonetheless browser vendors, Mozilla
    especially, thought this was such a
    confusing situation that they
    introduced “almost strict mode”. This
    was defined as strict mode, but with
    images continuing to be blocks, and
    not inline elements.

    Most common doctypes, including the
    one I use, trigger almost strict mode.
    The treatment of images is by far the
    most important difference between
    almost strict mode and really strict
    mode.

    Source: http://www.quirksmode.org/css/quirksmode.html

    • 0