[ratkaistu] Ongelma CSS.menujen kanssa IE:llä?

[Topiax]

Mikähän kumma voisi olla syynä, että CSS:llä tehty navigointipalkki ei toimi IE:llä?

EDIT: Ratkaisu löytyi doctypestä: navigointi toimii kun koodaa sivun HTML 4.01 Strict:iksi! Testisivut oli — kuinkas ollakaan — tehty kopioimalla vanhasta sivusta, joka oli HTML Transitionalia, ja siihen ei IE pystynyt.

YKsinkertaisin ratkaisu on usein se oikea...
 



Navigointi toimii yhdellä sivustolla niinkuin sen kuuluukin (menupalkki ei rullaa sivun mukana):
http://www.panuma.fi/

Mutta samalla periaatteella toteutettu navigointi ei toimikaan toisella sivustolla:
http://www.poropanuma.com/index-test-1.html

Sanomattakin on selvää, että kumpaisellakin sivustolla navit näkyvät oikein muilla selaimilla,
ainoastaan IE (versio taitaa olla näyttää tuon jälkimmäisen väärin: ts. navigointipalkki
rullaa sivun mukana, vaikka ei pitäisi (position: fixed;)

Olen yrittänyt hakea vikaa kissojen ja koirienkin kanssa, mutta en vain hoksaa missä vika!

Tyylitiedot tässä:

Koodia: [Valitse]

Embedded Styles from http://www.poropanuma.com/index-test-1.html

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}
#menu6 {
  margin: 10px;
  width: 200px;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 10pt;
  position: fixed;
}
#menu6 li a {
  voice-family: inherit;
  height: 24px;
  text-decoration: none;
  padding-top: 8px;
}
#menu6 li a:link, #menu6 li a:visited {
  padding: 8px 0 0 10px;
  background-color: transparent;
  background-image: url(kuvat/menu6.gif);
  background-repeat: repeat;
  color: #8d9179;
  display: block;
  background-position: left top;
}
#menu6 li a:hover, #menu6 li #current, #menu6 li a:active {
  padding: 8px 0 0 25px;
  background-color: transparent;
  background-image: url(kuvat/menu6.gif);
  color: #6c7250;
  background-repeat: no-repeat;
  background-position: left bottom;
}
#tekstialue {
  margin-right: 10px;
  margin-bottom: 10px;
  height: 98%;
  font-weight: normal;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  padding-left: 12px;
  padding-right: 12px;
  background-color: white;
  margin-left: 220px;
  padding-top: 0px;
}
body {
  background-image: url(http://www.poropanuma.com/kuvat/tausta.jpg);
  background-attachment: fixed;
}
#container {
  min-width: 90%;
  z-index: 50;
  padding-top: 10px;
  height: 1500pt;
}


Ja siltä toiselta [toimivalta] sivulta:

Koodia: [Valitse]

Embedded Styles from http://www.panuma.fi/

#logot {
border-style: none;
position: fixed;
z-index: 20000;
left: 7px;
text-align: center;
font-size: 0.8em;
margin-left: -3px;
margin-top: 352px;
}
#validicon2 {
border-style: none;
z-index: 70000;
visibility: visible;
position: fixed;
background-color: #999999;
margin-top: 690px;
margin-left: 65px;
}
#kuva {
height: 600px;
background-image: url(http://www.panuma.fi/Kev%C3%A4tp%C3%A4iv%C3%A4%20Vantullammella/slides/00013.jpg);
background-position: center center;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.7em;
color: #000099;
width: 800px;
text-decoration: none;
}

#kuvate {
padding-right: 40px;
}


http://www.panuma.fi/css/menu.css

/* Generated by KompoZer */
body {
  margin: 0;
  background: #ffffff none repeat scroll 0% 50%;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 80%;
  font-weight: normal;
}
h2 {
  margin: 0px;
  padding: 0px 0px 0px 15px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: normal;
  color: #000000;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}
img {
  border:  none;
}
#menu1 {
  border-style: solid solid none;
  border-color: #3d261d;
  border-width: 1px;
  margin: 10px;
  width: 200px;
  font-weight: bold;
  position: fixed;
}
#menu1 li a {
  voice-family: inherit;
  height: 24px;
  text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
  padding: 8px 0 0 10px;
  background: transparent url(menu1.gif) repeat scroll left top;
  color: #e4d6cd;
  display: block;
}
#menu1 li a:hover, #menu1 li #current {
  padding: 8px 0 0 10px;
  background: transparent url(menu1.gif) repeat scroll 0 -32px;
  color: #ffffff;
}

http://www.panuma.fi/css/teksti.css
Onko havaintokyvyssäni jotakin vikaa, vai onko tuo IE syypää kaikkeen?

Pähkäilee tuskastuneena
Topiax

[Exitium]

IE:n tuntien vika on IE:ssä.

[Lasse.]

En koodia nyt kovin tarkasta katsellut, mutta jos se toimii muissa selaimissa oikein ja menee CSS validaattorista puhtaasti läpi niin osoittaisin syyttävällä sormella IE:tä, sen CSS-toteutus on saannut usein haukkuja, oli sitten versio 5,6 tai 7.

[Tomin]

Tuolla http://www.panuma.fi/ sivustolla on yksi puute. Ainakin itselläni tuosta navigointi-palkista jäävät nuo alareunan jutut pois resoluution vuoksi, joten jonkinlainen vieritys pitäisi varmaan siinäkin olla.

[Topiax]

En koodia nyt kovin tarkasta katsellut, mutta jos se toimii muissa selaimissa oikein ja menee CSS validaattorista puhtaasti läpi niin osoittaisin syyttävällä sormella IE:tä, sen CSS-toteutus on saannut usein haukkuja, oli sitten versio 5,6 tai 7.

Juu. Menee se kirkkaasti validaattorista läpi.  Olen kyllä minäkin kuullut isojen poikien kertovan että ie-tä varten pitää tehdä koodiin irtovirityksiä... en vai millään haluaisi.
Taidan tehdä vain sen saman tempun, jonka tein kerran omilla sivuillani mainittuun selaimeen leipääntyneenä: laitan sivuille tallaisen linkin:

 Internet Explorer...
 

[Muoks:] korjasin tuon linkin...

[Topiax]

Tuolla http://www.panuma.fi/ sivustolla on yksi puute. Ainakin itselläni tuosta navigointi-palkista jäävät nuo alareunan jutut pois resoluution vuoksi, joten jonkinlainen vieritys pitäisi varmaan siinäkin olla.

Se on totta. Olen vääntänyt sivuja 1280 x 1024 resoluutiolla, enkä ole tullut ajatelleeksi että pienemmillä reoilla saattaa tulla ongelmia. Korjaan asian jahka kerkiän...

T.

[peran]

Se on totta. Olen vääntänyt sivuja 1280 x 1024 resoluutiolla, enkä ole tullut ajatelleeksi että pienemmillä reoilla saattaa tulla ongelmia. Korjaan asian jahka kerkiän...

Näiden miniläppäreiden aikakaudella pitäisi olla 1024x600 olla suunnitteluresoluutio. (minus ylä-/alapalkki ja ikkunakehykset)

[Topiax]

Se on totta. Olen vääntänyt sivuja 1280 x 1024 resoluutiolla, enkä ole tullut ajatelleeksi että pienemmillä reoilla saattaa tulla ongelmia. Korjaan asian jahka kerkiän...

Näiden miniläppäreiden aikakaudella pitäisi olla 1024x600 olla suunnitteluresoluutio. (minus ylä-/alapalkki ja ikkunakehykset)

Totta. Itsellänikin on yksi pikku mini [eeePC tjsp]. Kannan sitä aina mukana palttoon taskussa koska olen usein liikekannalla työn ja harrastusten puolesta. Ei siitä työkoneeksi ole, mutta on se kelvollinen sänkykone josta uutiset voi lukea ja kuunnella latinalaisrytmejä iltansa iloksi.

Pitänee otta tästäkin vinkistä vaarin...

T.

[vtp]

En koodia nyt kovin tarkasta katsellut, mutta jos se toimii muissa selaimissa oikein ja menee CSS validaattorista puhtaasti läpi niin osoittaisin syyttävällä sormella IE:tä, sen CSS-toteutus on saannut usein haukkuja, oli sitten versio 5,6 tai 7.

Jos sivu menee validaattorista läpi ja näkyy suurimmalla osalla selaimista oikein, niin en lähtisi muuttamaan ehjää koodia yhden rikkinäisen selaimen takia - ihan sama olis pudottaa kaikkien kantateiden nopeusrajoitukset 50 kilometriin tunnissa siltä varalta, että 80 tai 100 on jollekin autolle liikaa.

Tulevaisuus on avoin ja tärkeintä mielestäni on nykyään koodata standardin mukaisesti. Valitettavan paljon näkyy sivuja, josta validointi antaa kymmeniä virheilmoituksia. Tuosta IE-only -roskasta pitäisi päästä nopeasti eroon ja saada MS korjaamaan selaimensa.

[Tomin]

Valitettavan paljon näkyy sivuja, josta validointi antaa kymmeniä virheilmoituksia.

Minusta Verkkokauppa.com:illa on juuri tuollaiset sivut ja se on kyllä harmi. Vaikka muuten ovatkin toimivat (jos nyt ei lasketa sitä ylimääräistä valkoista siellä reunoilla).
EDIT: Eihän tuolla ollutkaan kuin 91 Errors, 83 warning(s)

[Ked]

IE7:n kanssa saattaa myös divien järjestys aiheuttaa ongelmia vaikka validaatio näyttäisi vihreää. Isoin z-index -arvo ei jostain syystä aina takaa että kyseinen div olisi päälimmäisenä.

[Topiax]

IE7:n kanssa saattaa myös divien järjestys aiheuttaa ongelmia vaikka validaatio näyttäisi vihreää. Isoin z-index -arvo ei jostain syystä aina takaa että kyseinen div olisi päälimmäisenä.

Hmmm... Saattaapa olla juuri noin.

Kun kerroit tämän, tulinkin ajatelleeksi, että ne toimivat sivut (panuma.fi) toimivat ulkoisella css-tiedostolla, tuossa kokeilu- t. testisivussa tyylit ovat sivun koodiin upotettuina. Varmaan seuraavaksi kokeilenkin ulkoistaa css:n ja testaan sitten uudelleen.

T.