thumbnailit/kuvat liikkuu kun vien osoittimen päälle

"Pääperiaate on kuitenkin se, että jos elementin leveyttä kasvatetaan, vaikka vain reunaviivalla, se siirtää jäljessään tulevia eteenpäin."
Niin käyttämällä http://css-tricks.com/box-sizing/ elementin leveys pysyy määriteltynä vaikka viivanpaksuus muuttuu.

Kiitti!, muuten hyvä mozillalla tuntuisi toimivan, mutta IE:ssä menee noi varjot vääriin kohtiin eli ei ole noiden kuva thumbnailien alla. Miten ne korjataan thumbnailien alle?
Tässä toi css teksti noiden osalta:




/* thumbsit */
.item
{
border: none;
margin: 30px;
float: left;
}

.item:hover
{
border: 3px;
margin: 27px;

}



.item .thumb
{

height: 130px;
width:auto;
background: #f9f9f9;
border: none;
margin: 30px;

-webkit-box-shadow: 5px 5px 7px #000000;
-moz-box-shadow: 5px 5px 7px #000000;
-o-box-shadow: 5px 5px 7px #000000;
box-shadow: 5px 5px 7px #000000;

behavior: url("PIE/PIE.htc");
}




.item img:hover
{
height: 130px;
width:auto;
background: #f9f9f9;
border: 3px solid #505050;
margin: 27px;

-webkit-box-shadow: 5px 5px 7px #000000;
-moz-box-shadow: 5px 5px 7px #000000;
-o-box-shadow: 5px 5px 7px #000000;
box-shadow: 5px 5px 7px #000000;
behavior: url("PIE/PIE.htc");
}

tuce kirjoitti:

Kiitti!, muuten hyvä mozillalla tuntuisi toimivan, mutta IE:ssä menee noi varjot vääriin kohtiin eli ei ole noiden kuva thumbnailien alla. Miten ne korjataan thumbnailien alle?
Tässä toi css teksti noiden osalta:




/* thumbsit */
.item
{
border: none;
margin: 30px;
float: left;
}

.item:hover
{
border: 3px;
margin: 27px;

}



.item .thumb
{

height: 130px;
width:auto;
background: #f9f9f9;
border: none;
margin: 30px;

-webkit-box-shadow: 5px 5px 7px #000000;
-moz-box-shadow: 5px 5px 7px #000000;
-o-box-shadow: 5px 5px 7px #000000;
box-shadow: 5px 5px 7px #000000;

behavior: url("PIE/PIE.htc");
}




.item img:hover
{
height: 130px;
width:auto;
background: #f9f9f9;
border: 3px solid #505050;
margin: 27px;

-webkit-box-shadow: 5px 5px 7px #000000;
-moz-box-shadow: 5px 5px 7px #000000;
-o-box-shadow: 5px 5px 7px #000000;
box-shadow: 5px 5px 7px #000000;
behavior: url("PIE/PIE.htc");
}

Lue lisää

Nii ja toi on muutenki outo, kun ei toimi ilman noita kaikkia, vaikka tossahan on oikeestaan kaksi turhaa määritystä. En tajuu mikä vikana.

tuce kirjoitti:

Nii ja toi on muutenki outo, kun ei toimi ilman noita kaikkia, vaikka tossahan on oikeestaan kaksi turhaa määritystä. En tajuu mikä vikana.

Jos laitan doctypeksi tän:



, niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:

tuce kirjoitti:

Jos laitan doctypeksi tän:



, niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:

Lue lisää

Eli jos laitan tän, niin toimii: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Nyt on: PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

tuce kirjoitti:

Jos laitan doctypeksi tän:



, niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:

Lue lisää

Niin doctypeksi kannattaa valita semmoinen millä selaimet toimii standarti tilassa näin eri selaimet toimivat hyvin samallatavalla. Nykyään huoletta voi käyttää !DOCTYPE html> vaikka ei käyttäisi mitään HTML 5 jutuista. Ei doctypeä tarvitse vaihdella kun kerralla valitsee toimivan. http://hsivonen.iki.fi/doctype/

Katsomalla tota taulukkoa niin huomaat PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" todella huono valinta, sillä IE toimii todella epästandartisti joka aiheuttaa paljon ongelmia, muiden selainten kohdilla ongelmat pienempiä. Vaihda kunnollinen doctype niin autellaan sitten ongelmissa mikäli niitä tulee.

"Eli jos laitan tän, niin toimii: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Nyt on: PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">"

Et voi vaihtaa noin, sillä toinen on XHTML ja toinen HTML, XHTML:ssä tagit pitää sulkea esim br /> ei br>. !DOCTYPE html> on siitä hyvä että voi kirjoittaa kumpaa tahansa, vaikka XHTML suosittelisin selkeempä.

Turhaa määrität varjot molemmissa koska ne menevä päällekkäin joten .item .thumb tai mielummin .item img riittää.

Jos liität koodia niin muista korvata kaikki < (pienempi kuin) merkit muuten ei näy. Tai sitten lisäät keskustelun vaikkapa http://www.menthal27.net/keskustelu/ jossa ei tämmöistä turhaa ongelmaa ole.