CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Rui Carneiro
Rui Carneiro

Reputation: 5671

Setting a fixed height to a block breaks the 100% width

The problem is when I try to set height: 20px to all rows this breaks the natural width: 100% from a block element. This bug only occurs on IE7 (tested on FF, Chrome and IE8).

HTML

<div id="container">
   This must be adjusted to content
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
    <div class="row">row #</div>
</div>

CSS

#container {
    border: 1px solid black;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
}
.row {
    border: 1px solid blue;
    margin-top: 2px;
    height: 20px;
}

Demo

http://jsfiddle.net/97fax/3/

Notes

Upvotes: 0

Views: 144

Answers (2)

Zuul
Zuul

Reputation: 16269

Good to find a fellow country man :)

Just tested with "line-height: 20px;" instead of "height: 20px;" and worked just fine on:

  1. IE 7
  2. IE 8
  3. FF3+
  4. Safari
  5. Chrome
  6. Opera

Doc-Type used for this test was "strict".

Upvotes: 1

cryo
cryo

Reputation: 14505

This might not be the answer you're looking for (a table, ugh), but here goes...

<div id="container">
    <table><tbody><tr><td>
        This must be adjusted to content
        <div class="row">row 1</div>
        <div class="row">row 2</div>
        <div class="row">row 3</div>
        <div class="row">row #</div>
    </td></tr></tbody></table>
</div>

I spent 1/2 an hour trying various combinations of hasLayout and position: relative and inline/inline-block etc, but a table was all I could get working I'm afraid :-(

Upvotes: 1

Related Questions