[CSS & IE] Mooie workaround voor 'min-height'?

[Zoefff]

Op mijn fotosite (wip) kan je ook reageren op foto's. Elke reactie wordt omgeven door een div met wat grijzige achtergrond. Omdat ik de avatar en datum uit de flow haal, rekken die de div niet op. Dit doet de paragraaf met tekst, maar het kan wel eens zijn dat er te weinig tekst in staat om de div genoeg op te rekken. Daarrom krijgt deze een min-height mee. Dit werkt (natuurlijk) goed in Fx, maar IE trekt zich daar (zoals bekend) niets van aan.

Een reactie ziet er zo uit:

HTML:

<div>
    <div class="re_info">
        <img src="http://www.gravatar.com/avatar.php?gravatar_id=474280cc72b4d25dfb84a5fbb40e5da7&size=60&default=http%3A%2F%2Fzoefff.gotdns.com%2Ffotosite_concept%2Fimg%2Fdefault_gravatar.gif" alt="Gravatar van Sander">
    </div>
    <h3><a href="#" rel="external">Sander <span>» http://gathering.tweakers.net/list_topics/71</span></a></h3>
    <h4><span class="day">4</span> <span class="month">aug</span><br><span class="year">2005</span></h4>
    <p>Aenean a dolor. Nullam justo risus, porta quis, placerat nec, nonummy ac, nunc. Vivamus tempus ipsum eleifend felis. Curabitur sit amet sem sit amet odio tincidunt pharetra. Aliquam risus nisl, placerat in, hendrerit in, aliquam viverra, tellus. Integer tempor, est eu tristique molestie, lacus ante eleifend risus, sit amet eleifend augue turpis sed dui. Praesent a turpis vitae sapien ultricies sollicitudin. Vestibulum scelerisque lacus eu nunc.</p>
</div>

Met als CSS:

Cascading Stylesheet:

.reaction {
    margin:7px 0px 7px 0px;
    padding:5px;
    background-color:#F5F5F5;
    min-height:90px;
    clear:both;
}
    .admin {
        background-color:#fff5fb;
        border:1px solid #DDDDDD;
    }
    .re_info {
        float:left;
        width:65px;
        padding:0px 5px 5px 5px;
    }
        .re_info img {
            width:60px;
            height:60px;
            border:1px solid #DDDDDD;
        }
    .reaction p {
        font-size:12px;
        line-height:18px;
        margin:0px 85px 0px 75px;
    }
    .reaction h3 {
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:14px; 
        font-weight:bold;
        padding:0px 0px 5px 0px;
        margin:0px;
    }
    .reaction h3 a:hover {
        text-decoration:none;
    }
    .reaction h3 a span {
        display:none;
    }
    .reaction h3 a:hover span {
        display:inline;
        font-size:12px;
        font-weight:normal;
        color:#444444;
        text-decoration:none;
    }
    .reaction h4 {
        font-family:Arial, Helvetica, sans-serif;
        float:right;
        margin:0px;
        padding:0px;
        color:#DBDBDB;
    }
        .reaction h4 .day {
            font-size:40px;
            line-height:50px;
            float:left;
        }
        .reaction h4 .month {
            font-size:18px;
            line-height:32px;
            text-transform:uppercase;
        }
        .reaction h4 .year {
            font-size:16px;
            margin-top:-9px;
            display:block;
            color:#E0E0E0;
        }

Mijn vraag is nu eigenlijk, weet iemand een oplossing of een nette (!) workaround zodat IE zich wél wat aantrekt van de min-height, of doordat de div op een andere manier opgerekt word? Ik heb al wat zitten kloten met breaks en clear:both;, maar tot nu toe wil dat niet baten.

Dat het mogelijk is met javascript weet ik, maar dat doe ik liever niet. Wellicht als het niet anders kan, maar hopenlijk weet iemand nog een andere oplossing

Een voorbeed kan je trouwens vinden @ bijvoorbeeld http://www.kraagjes.nl/al...rt+Sierra+Nevada/DSC_4068

[Justice]

Ik dacht dat height in IE zich hetzelfde gedraagt als min-height in andere browsers.

Bron:
http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/ (via [google=min height ie])

[ Voor 39% gewijzigd door Justice op 17-03-2006 16:31 ]

[X-Lars]

Ja, en dat kan dan mooi in een conditional comment.

[Zoefff]

Zo simpel

In IE gedraagt height zich idd zoals min-height in andere browsers, dat wist ik niet! Heb er nu (voorlopig) dit van gemaakt:

Cascading Stylesheet:

.reaction {
    margin:7px 0px 7px 0px;
    padding:5px;
    background-color:#F5F5F5;
    min-height:90px;
//  height:90px;
    clear:both;
}

IE leest over de '//' heen, Fx beschouwt het als een comment. Of kan ik beter een andere hack gebruiken?

[X-Lars]

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

[Zoefff]

Duidelijk

[T-MOB]

Zoefff schreef op vrijdag 17 maart 2006 @ 16:40:
Zo simpel

In IE gedraagt height zich idd zoals min-height in andere browsers, dat wist ik niet!

Voor de volledigheid, height en width in IE gedragen zich bijna als min-height en -width. De functionaliteit die hetzelfde is is dat de box wordt opgerekt als de content daar om vraagt. De missende functionaliteit is dat het gaat om een minimum hoogte respectievelijk breedte.

Cascading Stylesheet:

body { min-width: 400px; }

Zorgt er in een standard-compliant browser voor dat de body de breedte heeft van het venster tenzij het venster smaller wordt dan 400px. In IE is dat gedrag niet te realiseren met een louter CSS oplossing. Het specificeren van width zorgt er namelijk voor dat de body altijd 400px breed is, ook als het venster een grotere breedte heeft.