Keskustelu: Nettisivujen teko: Css eri selaimilla

Pikku temppuiluja on noiden selainten kesken.

#profiili_lomake{
     position:absolute;
      width:750px;
	  margin-top:-340px;
	  margin-left: 8px;
	background-color : #D9ECFF;
	font-family :Verdana;
	color: purple;
	border-style : solid;
	border-color : Black;
	border-width : 1px;
}

Tämä näyttää firefoxissa oikein, mutta IE:ssä pitää tuon left-asetus olla n. 368px miinuksella.
Tuon elementin "alla" on varjo, jonka leveys on 760px ja joka tulostuu oikeaan kohtaan molemmissa selaimissa, 4px vasemmasta reunasta.

Vinkki:

border:1px solid black;

Kutistaa vähän reunan määrittelyä.

-Värit pienellä (emt johtuuko siitä bugitus)
-font-family on virheellinen (kaksoispiste sekasin)
-samoin bgcolor

Pekka Mansikka kirjoitti:

Tämä näyttää firefoxissa oikein, mutta IE:ssä pitää tuon left-asetus olla n. 368px miinuksella.

IE:n rikkinäinen box model tekee temppujaan. Voit huijata IE:lle oman väärän asetuksen ja muille tuon toimivan seuraavalla tavalla:

#profiili_lomake{
	position:absolute;
	width:750px;
	margin-top: -368px; /* väärä arvo IE:lle */
	margin-left: 8px;
	background-color : #D9ECFF;
	font-family :Verdana;
	color: purple;
	border-style : solid;
	border-color : Black;
	border-width : 1px;
}

*>#profiili_lomake {
	/* IE ei osaa lapsiselektoria, eikä näinollen näe tänne */
	margin-top:-340px; /* oikea arvo oikein toimiville selaimille */
}

Meitsi kirjoitti:

-Värit pienellä (emt johtuuko siitä bugitus)

Casella ei ole merkitystä.

Meitsi kirjoitti:

-font-family on virheellinen (kaksoispiste sekasin)
-samoin bgcolor

Whitespacea saa tunkea jokseenkin minne huvittaa, myös ominaisuuden nimen ja kaksoispisteen väliin.

Kiitos, Blaze!

Tuo auttoi, mutta Opera temppuili vielä. Tämä auttoi kaikkiin kolmeen :

#profiili_lomake{
     position:absolute;
      width:750px;
	  margin-top:-340px;
	  left: 8px;   /* oikea arvo oikein toimiville selaimille */
	background-color : #D9ECFF;
	font-family :verdana;
	color: purple;
	border-style : solid;
	border-color : black;
	border-width : 1px;
}

En oikein tiedä, mikä ero on left ja margin-left arvolla, kun tuo pelkkä left ei aina edes toimi IE:ssä.
Ps. Miten on tuon IE:n "rikkinäisyyden" kanssa? Onko se sääntö vai voiko esim. päivityksen myötä olla "ehjä" selain tuolta osin? Jos voi, niin silloin tuo näyttää väärin sellaisissa tapauksissa...

Pekka Mansikka kirjoitti:

En oikein tiedä, mikä ero on left ja margin-left arvolla, kun tuo pelkkä left ei aina edes toimi IE:ssä.

Kaks ihan eri asiaa. Margin on tyhjä tila elementin ympärillä, left (ja right, top ja bottom) kertovat paikan, johon elementti sijoitetaan kun sen position on absolute, relative tai fixed.
http://www.w3.org/TR/REC-CSS2/box.html#margin-properties
http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme

Pekka Mansikka kirjoitti:

Ps. Miten on tuon IE:n "rikkinäisyyden" kanssa? Onko se sääntö vai voiko esim. päivityksen myötä olla "ehjä" selain tuolta osin? Jos voi, niin silloin tuo näyttää väärin sellaisissa tapauksissa...

IE6 on rikki ja pysyy. IE7:n käyttäytymistä pitäis tutkia, mutta kun beta-Vista tökkii ja jumittaa enemmän ku laki sallii, niin ei oo huvittanu.

Selaimissa on omat oletusarvot tyyleille, joten muistakaa asettaa tarvittaviin tyyleihin arvot. Yleensä suurimmat ongelmat ratkeavat vain asettamalla esim. padding: 0px, koska molemmissa selaimissa on nuo padding-arvot oletuksena aivan eri luokkaa.

Ja näyttäisi siltä ettei sinullakaan ole asetettu padding-arvoja, jotka juuri vaikuttavat "sisällön" sijaintiin.

Suurimmilta päänvaivoilta selviää laittamalla CSS-tiedoston alkuun

* {
    padding: 0;
    margin: 0;
}

Tällöin ei tarvi miettiä niitä eri selainten oletusmarginaaleja ja -paddingeja, vaan kaikki voi hyvillä mielin laittaa itse.

Thanks!