IE levittää sivustoni

Ihan noin "perusasioista" (taulukon soluista) tässä ei ole kyse, sen uskallan luvata käymättä koodeja kolmattakymmenettä kertaa läpi... Jos vika olisi noin simppeli, niin silloin sivuston ylimääräiseen leveyteen tuskin vaikuttaisi aina se, kuinka monta tuotetta valmistajalta löytyy kannasta. Mitä enemmän, sen leviämpi sivu.

Mielestäni tyylimäärittelyitä voi tehdä vaikka minne, jopa tagin sisään.

jarkko-the-chocoholic kirjoitti:

Ihan noin "perusasioista" (taulukon soluista) tässä ei ole kyse, sen uskallan luvata käymättä koodeja kolmattakymmenettä kertaa läpi... Jos vika olisi noin simppeli, niin silloin sivuston ylimääräiseen leveyteen tuskin vaikuttaisi aina se, kuinka monta tuotetta valmistajalta löytyy kannasta. Mitä enemmän, sen leviämpi sivu.

Mielestäni tyylimäärittelyitä voi tehdä vaikka minne, jopa tagin sisään.

Lue lisää

"Mielestäni tyylimäärittelyitä voi tehdä vaikka minne, jopa tagin sisään"

Kyllä, jos ne liittyvät kyseiseen tagiin mutta tässä tapauksessa näin ei ole tai ainakin toteutus on tehty väärin (1. taulukon 1. rivin 1. solu).

Jotain ylimääräistä tuotesivuilla kuitenkin on, käypä ne läpi; poista ensin kommentoidut osiot ja etene osa kerrallaan kunnes vika löytyy.

juhakorkeapudas kirjoitti:

"Mielestäni tyylimäärittelyitä voi tehdä vaikka minne, jopa tagin sisään"

Kyllä, jos ne liittyvät kyseiseen tagiin mutta tässä tapauksessa näin ei ole tai ainakin toteutus on tehty väärin (1. taulukon 1. rivin 1. solu).

Jotain ylimääräistä tuotesivuilla kuitenkin on, käypä ne läpi; poista ensin kommentoidut osiot ja etene osa kerrallaan kunnes vika löytyy.

Lue lisää

"Jotain ylimääräistä tuotesivuilla kuitenkin on, käypä ne läpi; poista ensin kommentoidut osiot ja etene osa kerrallaan kunnes vika löytyy."

Okei, pakkohan mun on ne käydä läpi vielä, jos ei yksityiskohtaisempia vinkkejä löydy :-) Olettaisin vain että kaikki selaimet näyttäisivät hommat päin peetä, jos vika ois tuossa...

Kyllä voisin jo suklaata luvata kiitokseksi sille, joka lopullisesti ja yksityiskohtaisesti ratkaisee tämän ongelman (tyyliin: tiedosto xyz.php, rivi x, korjaa "yyyy":n tilalle "zzzz"). On tämän kans jo niin menny hermot moneen kertaan.

Siis 52em on se leveys mikä sopii lähes joka näytölle ongelmitta. Siitä leveämmät on ongelmallisia ja 50em on maksimileveys leipätekstille. Fonttikokoa ei pidä muuttaa, sillä se toimii mittana kaiken muun kokoon ruudulla ja käyttäjä määrittää sen selaimessa tai miten onkaan zoomannut. CSS:stä sitten löytyy fontti koon muutos niin jos haluaa tehdä leipätekstiin nähden isompaa/pienempää tekstiä. Toivottavaa olisi saada sivu rakenteeltaan sellaiseksi, että se skaalautuisi mahdollisimman kapealle ikkunalle.

Tokihan mää ilmotan JOS alkaa toimiin. Iltasella vasta pääsen koodin ääreen. Kunpa ongelma olisikin noin yksinkertainen, se ilahduttaisi taatusti minua enemmän kuin ketään muuta ;-)

jarkko-the-chocoholic kirjoitti:

Tokihan mää ilmotan JOS alkaa toimiin. Iltasella vasta pääsen koodin ääreen. Kunpa ongelma olisikin noin yksinkertainen, se ilahduttaisi taatusti minua enemmän kuin ketään muuta ;-)

Lue lisää

Ajattelin vaan, että kun IE 6.0:lla kokeilin tuota kolmoslinkkiä, niin kyllä se minusta suhteellisen kapealta näytti. Ainakin mahtui hiton hyvin tähän duunin 1280x1024 -resoluutioiselle näytölle ja oli vielä vähän ruskeaa reunustakin näkyvissä...

The_Rat kirjoitti:

Ajattelin vaan, että kun IE 6.0:lla kokeilin tuota kolmoslinkkiä, niin kyllä se minusta suhteellisen kapealta näytti. Ainakin mahtui hiton hyvin tähän duunin 1280x1024 -resoluutioiselle näytölle ja oli vielä vähän ruskeaa reunustakin näkyvissä...

Lue lisää

"Ajattelin vaan, että kun IE 6.0:lla kokeilin tuota kolmoslinkkiä..."

Kas, niinpäs tekeekin. IE6 myöskin levittää sivun latausvaiheessa metrin levyiseksi, mutta "imaisee" sen sitten lopuksi kasaan minunkin XP:ssä. IE7 samassa koneessa sitten taas ei suorita tuota "imaisua"... Eikä IE8 Vistassa.

jarkko-the-chocoholic kirjoitti:

"Ajattelin vaan, että kun IE 6.0:lla kokeilin tuota kolmoslinkkiä..."

Kas, niinpäs tekeekin. IE6 myöskin levittää sivun latausvaiheessa metrin levyiseksi, mutta "imaisee" sen sitten lopuksi kasaan minunkin XP:ssä. IE7 samassa koneessa sitten taas ei suorita tuota "imaisua"... Eikä IE8 Vistassa.

Lue lisää

Nopeasti katsoin tuota taulukkohärdelliä. Ei ole tässä ff:ssä asennettuna kunnon lisäosia debuggausta varten, joten jouduin sorsista tutkimaan. Ei sinänsä näyttänyt mitenkään väärältä, aivan hirveältä hallinnoitavalta kylläkin (kuten ilmeisesti olet huomannut). Vähän pisti silmään divien käyttö tuolla joukossa. Jotenkin tuntuu siltä, että tässä sotketaan perinteistä taulukkotaittoa diveillä toteutettuun taittoon... Näen horisontissa ongelmia.

Mutta ratkaisuehdotuksena, kun ei tuota oikein jaksa palkatta debugatakaan, kokeile määrätä käytettävä doctype. Eli kun doctypeä ei ole head-osiossa määritelty, käyttää jokainen selain kai vähän mitä sattuu... Ehkä headiin voisi kirjoittaa vaikkapa:


Tai:


Voi auttaa, tai olla auttamatta.

Tuolla aika kiva juttu aiheesta: http://en.wikipedia.org/wiki/Quirks_mode
Tässä lainaus, joka voi (tai ehkä ei) vaikuttaa:
> Before version 6, Internet Explorer used an algorithm for determining the width
> of an element's box which conflicted with the algorithm detailed in the CSS
> specification, and due to Internet Explorer's popularity many pages were
> created which relied upon this incorrect algorithm. As of version 6, Internet
> Explorer uses the CSS specification's algorithm when rendering in standards
> mode and uses the previous, non-standard algorithm when rendering in quirks
> mode.

Tämmöistä tällä kertaa. Tulevaisuudessa suosittelen välttämään taulukkotaittoa, mikäli mahdollista. Divien kanssa pelaaminen voi tuntua aluksi vaikeammalta, mutta debuggaaminen on hieman helpompaa... :)

The_Rat kirjoitti:

Nopeasti katsoin tuota taulukkohärdelliä. Ei ole tässä ff:ssä asennettuna kunnon lisäosia debuggausta varten, joten jouduin sorsista tutkimaan. Ei sinänsä näyttänyt mitenkään väärältä, aivan hirveältä hallinnoitavalta kylläkin (kuten ilmeisesti olet huomannut). Vähän pisti silmään divien käyttö tuolla joukossa. Jotenkin tuntuu siltä, että tässä sotketaan perinteistä taulukkotaittoa diveillä toteutettuun taittoon... Näen horisontissa ongelmia.

Mutta ratkaisuehdotuksena, kun ei tuota oikein jaksa palkatta debugatakaan, kokeile määrätä käytettävä doctype. Eli kun doctypeä ei ole head-osiossa määritelty, käyttää jokainen selain kai vähän mitä sattuu... Ehkä headiin voisi kirjoittaa vaikkapa:


Tai:


Voi auttaa, tai olla auttamatta.

Tuolla aika kiva juttu aiheesta: http://en.wikipedia.org/wiki/Quirks_mode
Tässä lainaus, joka voi (tai ehkä ei) vaikuttaa:
> Before version 6, Internet Explorer used an algorithm for determining the width
> of an element's box which conflicted with the algorithm detailed in the CSS
> specification, and due to Internet Explorer's popularity many pages were
> created which relied upon this incorrect algorithm. As of version 6, Internet
> Explorer uses the CSS specification's algorithm when rendering in standards
> mode and uses the previous, non-standard algorithm when rendering in quirks
> mode.

Tämmöistä tällä kertaa. Tulevaisuudessa suosittelen välttämään taulukkotaittoa, mikäli mahdollista. Divien kanssa pelaaminen voi tuntua aluksi vaikeammalta, mutta debuggaaminen on hieman helpompaa... :)

Lue lisää

Kun koodin luin läpi uudestaan, sieltä löytyi itse asiassa kaksikin -tagia, joiden oikeasti piti olla . MUTTA: Niillä ei ollut mitään vaikutusta minkään selaimen toimintaan... En kyllä löytänyt muuten mitään vikaa taulukkokuvioista... Pitänee jatkaa tavaamista. Vaikka sivussa on tavaraa 600 rivin edestä, niin varsinaista HTML:ää siellä on aika vähän, loput PHP:tä, joka vaan tekee hakuja...

Tässä testit.php -tiedostossa ei itse asiassa missään kohti käytetä DIV:ä, mutta kokonaisuus kasataan palapelin tavoin includella, joten valmista sivun sorsaa kattomalla ei saa ehkä oikeaa kuvaa.

jarkko-the-chocoholic kirjoitti:

Kun koodin luin läpi uudestaan, sieltä löytyi itse asiassa kaksikin -tagia, joiden oikeasti piti olla . MUTTA: Niillä ei ollut mitään vaikutusta minkään selaimen toimintaan... En kyllä löytänyt muuten mitään vikaa taulukkokuvioista... Pitänee jatkaa tavaamista. Vaikka sivussa on tavaraa 600 rivin edestä, niin varsinaista HTML:ää siellä on aika vähän, loput PHP:tä, joka vaan tekee hakuja...

Tässä testit.php -tiedostossa ei itse asiassa missään kohti käytetä DIV:ä, mutta kokonaisuus kasataan palapelin tavoin includella, joten valmista sivun sorsaa kattomalla ei saa ehkä oikeaa kuvaa.

Lue lisää

Valmiin sivun sorsista saa toisaalta juuri sen kuvan, minkä selainkin saa... :)

Perinteinen debuggaustapa on alkaa karsia koodia. Eli pistät koodista osia kommentteihin ja katsot mistä vika tulee. Tarkemmin ja tarkemmin...

The_Rat kirjoitti:

Nopeasti katsoin tuota taulukkohärdelliä. Ei ole tässä ff:ssä asennettuna kunnon lisäosia debuggausta varten, joten jouduin sorsista tutkimaan. Ei sinänsä näyttänyt mitenkään väärältä, aivan hirveältä hallinnoitavalta kylläkin (kuten ilmeisesti olet huomannut). Vähän pisti silmään divien käyttö tuolla joukossa. Jotenkin tuntuu siltä, että tässä sotketaan perinteistä taulukkotaittoa diveillä toteutettuun taittoon... Näen horisontissa ongelmia.

Mutta ratkaisuehdotuksena, kun ei tuota oikein jaksa palkatta debugatakaan, kokeile määrätä käytettävä doctype. Eli kun doctypeä ei ole head-osiossa määritelty, käyttää jokainen selain kai vähän mitä sattuu... Ehkä headiin voisi kirjoittaa vaikkapa:


Tai:


Voi auttaa, tai olla auttamatta.

Tuolla aika kiva juttu aiheesta: http://en.wikipedia.org/wiki/Quirks_mode
Tässä lainaus, joka voi (tai ehkä ei) vaikuttaa:
> Before version 6, Internet Explorer used an algorithm for determining the width
> of an element's box which conflicted with the algorithm detailed in the CSS
> specification, and due to Internet Explorer's popularity many pages were
> created which relied upon this incorrect algorithm. As of version 6, Internet
> Explorer uses the CSS specification's algorithm when rendering in standards
> mode and uses the previous, non-standard algorithm when rendering in quirks
> mode.

Tämmöistä tällä kertaa. Tulevaisuudessa suosittelen välttämään taulukkotaittoa, mikäli mahdollista. Divien kanssa pelaaminen voi tuntua aluksi vaikeammalta, mutta debuggaaminen on hieman helpompaa... :)

Lue lisää

"kun ei tuota oikein jaksa palkatta debugatakaan"

Löytyykö sulta toiminimeä tms jonka kautta pystyisit laskuttamaan? Ja paljonko laskuttaisit ongelman korjaamisesta? etunimi(a)suklaayhdistys.com toimii ja etunimeni on Jarkko.

jarkko-the-chocoholic kirjoitti:

"kun ei tuota oikein jaksa palkatta debugatakaan"

Löytyykö sulta toiminimeä tms jonka kautta pystyisit laskuttamaan? Ja paljonko laskuttaisit ongelman korjaamisesta? etunimi(a)suklaayhdistys.com toimii ja etunimeni on Jarkko.

Lue lisää

Voisin tehdä kaljapalkalla pientä sivubisnestä... Hinta riippuu kuluvasta ajasta, mutta varmaan muutamasta tuopista olisi kyse. :)
Tai tämän saitin ollessa kyseessä voisi suklaastakin keskustella (mutta ei oluen kanssa, ei sovi yhteen).

Ei mene enää nykyään ihan normaaliin toimenkuvaan, mutta olisihan tuota kiva vähän päkertää PHP-HTML-CSS -linjaa pienen tauon jälkeen.

The_Rat kirjoitti:

Voisin tehdä kaljapalkalla pientä sivubisnestä... Hinta riippuu kuluvasta ajasta, mutta varmaan muutamasta tuopista olisi kyse. :)
Tai tämän saitin ollessa kyseessä voisi suklaastakin keskustella (mutta ei oluen kanssa, ei sovi yhteen).

Ei mene enää nykyään ihan normaaliin toimenkuvaan, mutta olisihan tuota kiva vähän päkertää PHP-HTML-CSS -linjaa pienen tauon jälkeen.

Lue lisää

Että http://www.suklaayhdistys.com/testit.php?cat=90&tuote=372 ei sitten ole maailman paras juoma? ;-)

Kuinkas kauas mun pitäis matkustaa kaljoja tarjoamaan? Jos ongelma loppujen lopuksi korjaantuu, niin maksan mielenrauhastani mielellään muutaman tuopin pari päälle. Heitä mailia tännepäin, niin jutellaan lisää.

The_Rat kirjoitti:

Nopeasti katsoin tuota taulukkohärdelliä. Ei ole tässä ff:ssä asennettuna kunnon lisäosia debuggausta varten, joten jouduin sorsista tutkimaan. Ei sinänsä näyttänyt mitenkään väärältä, aivan hirveältä hallinnoitavalta kylläkin (kuten ilmeisesti olet huomannut). Vähän pisti silmään divien käyttö tuolla joukossa. Jotenkin tuntuu siltä, että tässä sotketaan perinteistä taulukkotaittoa diveillä toteutettuun taittoon... Näen horisontissa ongelmia.

Mutta ratkaisuehdotuksena, kun ei tuota oikein jaksa palkatta debugatakaan, kokeile määrätä käytettävä doctype. Eli kun doctypeä ei ole head-osiossa määritelty, käyttää jokainen selain kai vähän mitä sattuu... Ehkä headiin voisi kirjoittaa vaikkapa:


Tai:


Voi auttaa, tai olla auttamatta.

Tuolla aika kiva juttu aiheesta: http://en.wikipedia.org/wiki/Quirks_mode
Tässä lainaus, joka voi (tai ehkä ei) vaikuttaa:
> Before version 6, Internet Explorer used an algorithm for determining the width
> of an element's box which conflicted with the algorithm detailed in the CSS
> specification, and due to Internet Explorer's popularity many pages were
> created which relied upon this incorrect algorithm. As of version 6, Internet
> Explorer uses the CSS specification's algorithm when rendering in standards
> mode and uses the previous, non-standard algorithm when rendering in quirks
> mode.

Tämmöistä tällä kertaa. Tulevaisuudessa suosittelen välttämään taulukkotaittoa, mikäli mahdollista. Divien kanssa pelaaminen voi tuntua aluksi vaikeammalta, mutta debuggaaminen on hieman helpompaa... :)

Lue lisää

Taulukkotaitto oli ok vielä joskus ennen Windows Vistaa jos CSS1:llä ei pärjännyt.

Nykyään se on saatanasta ja saa vain sivuja mitkä toimii päin vittua esimerkiksi mobiilivehkeillä.

Yleensäkin FF2 on se heikoin lenkki nykypäivänä ja silläkin saadaan taaksepäin yhteensopivuutta melkein 8v käyttöjärjestelmiin mitä ihmisillä on ilman uusien selainten asentamista. Ei kannata millään IE7:lla tai IE6:lla kehittää yhtään mitään, ne on historiaa.

jarkko-the-chocoholic kirjoitti:

"Ajattelin vaan, että kun IE 6.0:lla kokeilin tuota kolmoslinkkiä..."

Kas, niinpäs tekeekin. IE6 myöskin levittää sivun latausvaiheessa metrin levyiseksi, mutta "imaisee" sen sitten lopuksi kasaan minunkin XP:ssä. IE7 samassa koneessa sitten taas ei suorita tuota "imaisua"... Eikä IE8 Vistassa.

Lue lisää

Jos IE ihmiset valittaa mun sivunättöä paskaksi niin sanon vaan että Käytä FF, se on lähinnä Web standardia. En enää ota IE tosissaan, se aiheuttaa vaan päänsärkyä.

Kokeilin tuota lokaalisti ja jokin vaikutus näyttäisi tosiaan olevan tuolla overlib.js:n käytöllä. Tosin en ihan aukottomasti saanut sitä todistettua itselleni, sillä vaikka poistin koko scriptn käytöstä, IE levitti edelleen sivuston naapuriin asti...

Voisitko tarkentaa vastaustasi maallikolle, sillä asia vaikuttaisi ehdottomasti olevan oikeaan suuntaan? Lähinnä lause "Korjaaminen onnistunee lisäämällä kyseisen kuvan funktioineen taulukon solun sisälle" aiheuttaa päänvaivaa.

jarkko-the-chocoholic kirjoitti:

Kokeilin tuota lokaalisti ja jokin vaikutus näyttäisi tosiaan olevan tuolla overlib.js:n käytöllä. Tosin en ihan aukottomasti saanut sitä todistettua itselleni, sillä vaikka poistin koko scriptn käytöstä, IE levitti edelleen sivuston naapuriin asti...

Voisitko tarkentaa vastaustasi maallikolle, sillä asia vaikuttaisi ehdottomasti olevan oikeaan suuntaan? Lähinnä lause "Korjaaminen onnistunee lisäämällä kyseisen kuvan funktioineen taulukon solun sisälle" aiheuttaa päänvaivaa.

Lue lisää

Ongelma on vanhentuneen img:n align määritteen käyttö kuvassa jossa kutsutaan overlib-funktiota. Ilmeisesti se kyseisessä paikassa ollessaan levittää taulukkoa (selaimen bugi?) muttei silloin jos se on sen oikealla puolella olevan taulukon sisällä (taulukko jossa tuotetiedot). Korjauksena voi käyttää joko ensin mainittua eli siirtää kyseinen kuva sellaisenaan vieressä olevan taulukon sisälle ja poistaa align left määrite tai määritellä tyylitiedostoon kuva-luokalle float:left (ja mahdolliset muut määritteet; kuten koko).

Korjausvaihtoehdot:

Tyylitiedostoon:

.kuva{
float:left;
border-width:1px;
border-style:solid;
border-color:#000000;
width:76px;
height:76px;
}

ja

[img src="..." alt="..." title="..." class="kuva" onmouseover="return overlib('', FULLHTML, WIDTH, 76, HEIGHT, 76, HAUTO, VAUTO);" onmouseout="return nd();"] (poistetaan siis koko ja align-määritteet).

tai

korvaamalla nykyinen rakenne (tuotetietotaulussa) seuraavasti.
(Lisätään kuva taulukon ensimmäiselle riville ja käytetään rowspan:ia jotta kuva asettuu koko korkeudelle).

[table width="510" border="0" cellspacing="0" cellpadding="0"]
[tr]
[td rowspan="4"]
[img src="..." alt="..." title="..." width="76" height="76" border="0" class="kuva" onmouseover="return overlib('', FULLHTML, WIDTH, 76, HEIGHT, 76, HAUTO, VAUTO);" onmouseout="return nd();"]
[/td]
[/tr]

juhakorkeapudas kirjoitti:

Ongelma on vanhentuneen img:n align määritteen käyttö kuvassa jossa kutsutaan overlib-funktiota. Ilmeisesti se kyseisessä paikassa ollessaan levittää taulukkoa (selaimen bugi?) muttei silloin jos se on sen oikealla puolella olevan taulukon sisällä (taulukko jossa tuotetiedot). Korjauksena voi käyttää joko ensin mainittua eli siirtää kyseinen kuva sellaisenaan vieressä olevan taulukon sisälle ja poistaa align left määrite tai määritellä tyylitiedostoon kuva-luokalle float:left (ja mahdolliset muut määritteet; kuten koko).

Korjausvaihtoehdot:

Tyylitiedostoon:

.kuva{
float:left;
border-width:1px;
border-style:solid;
border-color:#000000;
width:76px;
height:76px;
}

ja

[img src="..." alt="..." title="..." class="kuva" onmouseover="return overlib('', FULLHTML, WIDTH, 76, HEIGHT, 76, HAUTO, VAUTO);" onmouseout="return nd();"] (poistetaan siis koko ja align-määritteet).

tai

korvaamalla nykyinen rakenne (tuotetietotaulussa) seuraavasti.
(Lisätään kuva taulukon ensimmäiselle riville ja käytetään rowspan:ia jotta kuva asettuu koko korkeudelle).

[table width="510" border="0" cellspacing="0" cellpadding="0"]
[tr]
[td rowspan="4"]
[img src="..." alt="..." title="..." width="76" height="76" border="0" class="kuva" onmouseover="return overlib('', FULLHTML, WIDTH, 76, HEIGHT, 76, HAUTO, VAUTO);" onmouseout="return nd();"]
[/td]
[/tr]

Lue lisää

Juha Korkeaputaalle:

Kiitos erittäin paljon avustasi! Käytin jälkimmäistä vaihtoehtoa, sillä ensimmäinen "tappoi" sen ominaisuuden, jota varten overlib on käytössä, eli suuremman tuotekuvan näkeminen viemällä hiiren pikkukuvan päälle.

Lopputulosta voi "ihailla" esim osoitteessa http://www.suklaayhdistys.com/testit.php?cat=21#21 joka ei leviä ainakaan Vista/IE8, Vista/FF3, XP/IE7, XP/IE6, XP/FF2, XP/Chrome, XP/Safari tai XP/Opera -yhdistelmillä. Tuskin muillakaan.