Tätä tutkiskelin aikani Googlen kautta enkä löytänyt vastausta/korjaavaa toimintaa seuraavaan kysymykseen:
Miksi IE ei CSS:n kautta määritettynä näytä kuvassa marginia tai paddingiä, kun taas muut selaimet (esim. Opera tai FireFox) ne lisäävät?
IMG taitaa olla inline elementti, joten sikäli sille ei kai periaatteessa pitäisi edes voida laittaa kyseisiä määreitä... En tarkemmin tiedä, ympäröi se vaikka divillä jos marginaaleja ja paddingia haluat.
Kyllä inline-elementillekin paddingia ja marginia saa. Taitaa olla jokin IE:n vamma jälleen.
Niin ainakin Googlesta ettimällä tuli, että IE vaan vammailee, mutta olis nyt tarpeen saada joku ratkasu siihen.
Ja en divejä viitsisi jokaisen kuvan ympärille laittaa...
Kyllä minulla ainakin pelittää ihan oikein.
Eli paddingia ja marginia saa inlineille, muttei esimerkiksi kokoa saa määriteltyä? Ainakaan spanille ei width tai height määreet sano mitään. Vois kai opiskella vähän enemmän noita CSS:n/Html:n perusjuttuja...
JTS, eikös height ja width pidä kanssa laittaa style-kohdan sisälle?
Juu, mutta tuossa nuo ominaisuudet on määritelty suoraa tietyn kuvan style-kohtaan.
Kun tuon saman koodin laittaa CSS-tiedostoon, se ei IE:ssä toimi.
nixu89 kirjoitti:
JTS, eikös height ja width pidä kanssa laittaa style-kohdan sisälle?
Juu, style-kohdasta tai CSS:stä yleensäkin puhuin.
IE7 tajuaa tuon, IE6:sta en tiedä kun sitä ei tällä koneella ole ja IE5.5 ei osaa paddingia. Margin ja border toimii. En huomannut eroa sillä, määrittikö CSS:n erillisellä tiedostolla, style-tagilla tiedoston alussa vai style-attribuutilla. Kannattaa tarkistaa, ettei toinen CSS-asetus käske toisin. Esimerkiksi:
#sisalto * { margin : 0; padding : 0; }
on tärkeämpi sääntö kuin
img { margin : 5px; padding : 3px; }
kun koodi on
<p id="sisalto"><img src="kuva.jpg" alt="" /></p>
ID on aina tärkein, class tulee vasta sitten ja vähiten tärkeä on puhdas tagimäärite.
Joo, no itsellä on IE6 testaukseen, eikä se ainakaan tuota kuvaa oikein tulosta jos CSS:ällä sen määritelee.
Se menee muuten niin, että kun päivittää sivun, nuo kuvat näkyy padding:ien kanssa kunnes kuva on ladattu, jolloin se koko homma menee sen kuvan kokoiseksi...
Eroa voi tulla IE6:lla sillä, toimiiko se standarditilassa vai quirksmodessa. Kaikki transitionaalit ovat quirksmodea, joten HTML 4.01 Strict, XHTML 1.0 Strict ja XHTML 1.1 ovat ne joissa standarditilan saa toimimaan. IE:n vaatimuksena, että DOCTYPE on ihkaensimmäisellä rivillä, muuten kärsitään taas quirksmodesta. Tätä ei muuten ole ainakaan vielä korjattu IE7:ssä, tosin kunnollista testiä en ole vielä tehnyt.
Aihe on jo aika vanha, joten et voi enää vastata siihen.