Sama Div eri sivuilla

Jos haluaa, etta divit ovat aina vahintaan tietynkorkuisia, niin kun laittaa heigh-maarityksen, niin Mozillalla korkeus ei veny jos sisaltya tulee enemman, mutta IE:lla venyy. Mozillalle saa laitettua minimi korkeuden kayttamalla maaritysta min-height, mutta IE ei taas tata tunnista.

Itse olen keksinyt tahan kaksi ratkaisua...
Joko jos sivun sisalla voi olla vierityspalkki niin voi maaritella overflow:auto;
Tai sitten antaa IE:lle oman maarityksen

.div {
min-height: 300px (tama Mozillalle/Operalle)
}

*html .div {
height: 300px (vain IE lukee taman)
}

Tietaako miten tuon saisi tehtya yhdella maarittelylla?

hyy kirjoitti:

Jos haluaa, etta divit ovat aina vahintaan tietynkorkuisia, niin kun laittaa heigh-maarityksen, niin Mozillalla korkeus ei veny jos sisaltya tulee enemman, mutta IE:lla venyy. Mozillalle saa laitettua minimi korkeuden kayttamalla maaritysta min-height, mutta IE ei taas tata tunnista.

Itse olen keksinyt tahan kaksi ratkaisua...
Joko jos sivun sisalla voi olla vierityspalkki niin voi maaritella overflow:auto;
Tai sitten antaa IE:lle oman maarityksen

.div {
min-height: 300px (tama Mozillalle/Operalle)
}

*html .div {
height: 300px (vain IE lukee taman)
}

Tietaako miten tuon saisi tehtya yhdella maarittelylla?

Ongelma piilee jälleen Internet Explorerissa, joka ei ole kuullutkaan min-height-ominaisuudesta ja joka tulkitsee height-ominaisuudenkin merkityksen väärin. On kuitenkin olemassa kiertoteitä, joista muutama on lyhyesti kuvattu alla.

Tapa 1: The Underscore Hack ( http://wellstyled.com/css-underscore-hack.html )

HTML:


CSS:
#sisalto
{
   min-height: 100px;
   _height: 100px;
}
--------------------

Tapa 2: IE ei ymmärrä !important-sääntöjä

HTML:


CSS:
#sisalto
{
   min-height: 100px;
   height: auto !important;
   height: 100px;
}
--------------------

Tapa 3: IE ei ymmärrä attribuuttivalitsinta

HTML:


CSS:
.sisalto
{
   height: 100px;
}

*[class="sisalto"]
{
   height: auto;
   min-height: 100px;
}
--------------------

Tapa n: IE ei ymmärrä... :)

Juu, olen kokeillut tuota korkeusarvon jättämistä pois, mutta ongelma vaivaa sellaisessa tilanteessa, jossa ensin on määritelty div-laatikko, jonka sisään tulee toinen laatikko.

Pelkällä tekstillä ulompi laatikko venyy kyllä, mutta sisällä olevalla laatikolla ei. Ulomman laatikon korkeuden joutuu siten määrittämään ja sitten se on yhtä suuri sivuston jokaisella sivulla.

Putteri kirjoitti:

Juu, olen kokeillut tuota korkeusarvon jättämistä pois, mutta ongelma vaivaa sellaisessa tilanteessa, jossa ensin on määritelty div-laatikko, jonka sisään tulee toinen laatikko.

Pelkällä tekstillä ulompi laatikko venyy kyllä, mutta sisällä olevalla laatikolla ei. Ulomman laatikon korkeuden joutuu siten määrittämään ja sitten se on yhtä suuri sivuston jokaisella sivulla.

Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.

CSS:
#box1
{
   border: 1px solid black;
   padding: 10px;
}

#box2
{
   width: 50px;
   height: 100px;
   border: 1px solid blue;
}

HTML:

   
   


Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun



mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.

Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.

UPDATE_5299066 kirjoitti:

Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.

CSS:
#box1
{
   border: 1px solid black;
   padding: 10px;
}

#box2
{
   width: 50px;
   height: 100px;
   border: 1px solid blue;
}

HTML:

   
   


Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun



mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.

Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.

Ongelma johtuikin siitä, että olin määritellyt sisemmälle laatikolle absoluuttisen sijainnin jota ei ilmeisesti saa tehdä? Kiitokset jokatapauksessa!

UPDATE_5299066 kirjoitti:

Perustapauksessa ulomman divin pitäisi venyä sisemmän divin korkeuden mukaan. Esim. seuraava koodi toimii odotetulla tavalla ainakin Operassa, Firefoxissa ja IE:ssä.

CSS:
#box1
{
   border: 1px solid black;
   padding: 10px;
}

#box2
{
   width: 50px;
   height: 100px;
   border: 1px solid blue;
}

HTML:

   
   


Ongelmia kyllä tulee silloin, kun sisempi div asetetaan kelluvaksi. Eli jos box2:lle lisätään sääntö "float: right;", niin sisempi loota leviää ulomman ulkopuolelle. Kunnon selaimilla tämä korjaantuisi antamalla box1:lle säännön "overflow: auto;", mutta tapansa mukaan IE aiheuttaa taas ongelmia. Toinen tapa olisi lisätä ulomman divin loppuun



mutta tämä ei enää kuulu suositeltujen ratkaisujen joukkoon. Koska tässä kuitenkin yritetään temppuilla sivun ulkonäön kanssa, on aina parempi jättää viritykset kokonaan CSS-puolelle.

Joka tapauksessa ongelmia aiheuttavan lähdekoodin näkeminen auttaisi olennaisesti asian ratkaisemisessa.

Jos haluaa käyttää float-ominaisuutta elementeissä, voi ominaisuuden katkaista esim. luomalla div-tagin, joka sijoitetaan koodiin float-elementtien ja ylitettävän elementin väliin.

ko. div-tagin (vaikkapa #clear) css-koodiin määritellään vain, että clear: both!