Eines per comunicar-nos al web

dissabte, gener 19, 2008

Amics de Joan Valls, apanyat

Ja m'he fet amb els defectes de visualització que afectaven el css del bloc Amics de Joan Valls sobre MS Internet Explorer, i que havia esmentat de passada a l'article anterior.
Abans es veia així:



Si vos hi fixeu, es crea un marge extra a la caixa que conté la barra lateral, com a conseqüència del bug de l'Explorer segons el qual dobla el marge esquerre dels elements flotats a l'esquerra. Això desencaixa l'alineació i crea un lleig escaló entre la capçalera i el marge esquerre de la barra lateral.

Ha bastat el truc afegir una línia al css de la barra lateral:

{display:inline;}

i ara ja es veu amb les caixes de la capçalera i de la barra lateral alineats:



A més, he corregit el contorneig de la imatge de Joan Valls que feia que el títol del poema i els primers versos fluïren a la dreta.
Les previsualitzacions que he utilitzat provenen de Browsershots i si n'esteu interessats, podeu trobar-ne més ací. Només com a exemple del que deia l'altre dia de l'antialiasing, vegeu com es veu el text amb Safari sobre Windows:



Ara només cal que em faça amb els perills que assetgen aquest bloc-is-bloc :(

6 comentaris:

Giorgio Grappa ha dit...

Estàs segur que no has enllaçat dues voltes la mateixa imatge de l'Explorer? No faig més que comparar-les i em sembla que són la mateixa... A més, no acabe de veure el "marge extra a la caixa que conté la barra lateral": és el marge blanc entre les lletres de l'esquerra i el límit de la finestra del navegador? Res, que no ho entenc.

Abans del canvi a la nova versió de Blogger, estava mig familiaritzat amb els codis que en determinaven el format, però ara ja no sé si els entendria. Es basen en CSS només, o també hi entra el PHP? Aquest darrer no l'he tocat mai.

He he he, sí que és veritat que et busques maldecaps ;-) .

Amadeu Sanz ha dit...

Gràcies per la teua observació, giorgio.
Les dues imatges de l'Explorer són idèntiques llevat del petit detall de l'alineació entre la caixa de la capçalera i la caixa de la columna de l'esquerra, que se'n va 10 px en la primera. Si et fixes en el filet roig que hi ha baix de la capçalera, està desplaçat cap a l'esquerra respecte al filet roig, més prim, amb què comença la barra lateral. Això només ocorre amb l'Explorer, i no hauria d'ocòrrer. S'hi hauria de veure com en la segona imatge, on ambdues caixes tenen el mateix marge respecte al límit de la finestra del navegador.
Sembla que es tracta d'un bug de l'Explorer que s'hereta d'una versió a l'altra i segons el qual, si al css hi ha un element flotat a l'esquerra amb un cert marge, l'Explorer li'n donarà el doble d'aquest marge, ningú no sap ben bé per què.
La nova versió de blogger està escrita en xhtml i usa un codi propi, semblant al php, per a generar la pàgina. Això no afecta gens al disseny i està pensat perquè no ho faça i mantindre separats el contingut de l'aparença –una idea, sens dubte, heretada de Saussure–. El gros del disseny es fa amb el css, que es un llenguatge relativament fàcil d'entendre si t'animes.
I sí, és veritat que em busque maldecaps. :)
Salut.

Giorgio Grappa ha dit...

Ha ha ha ha! El filet roig! Això sí que és filar prim, i mai millor dit! Ara sí que ho he vist, tenies raó.

M'ha fet molta gràcia la referència Saussure (categoria i funció?); la veritat és que moltes coses de la informàtica, com ara els llenguatges de programació, tenen més relació amb les lletres (o al menys amb la lingüística) que no pas amb les matemàtiques (per citar un tòpic). Tanmateix, molta gent amb formació d'humanitats té un rebuig molt visceral envers els ordinadors.

De moment, amb xhtml i amb css em vaig defenent. No fa gaire he mirat de fer alguna prova amb javascript, per tal de millorar una mica una web que tinc mig abandonada. I, quan siga major, ja em clavaré amb php.

Què seria la vida sense maldecaps?

Albert Llueca ha dit...

acabe de descobrir aquest bloc...ejejej... et seguiré... redescobrint l'Amadeu!

sort!

Albert

Amadeu Sanz ha dit...

Salut, Albert!
Sempre ve de gust retrobar-se un home tan gran com tu.
Una abraçada.

Josep Porcar ha dit...

Aquest "bug" l'arrossega l'Explorer des de fa segles... En els navegadors del Mac fa destrosses formidables! I en les versiones antigues de l'Explorer, si hi estàs atent, veuràs que hi apareix la verge de Lourdes! I tot perquè als microsoftians no els passa per la petxina, o per la sargantana, modificar el codi que permetria estandaritzar, normalitzar, etc, els flotaments del CSS. Sort que som maneguetes!

Temes

Blocs educatius en dansa

Sindicat d"edublocs

El Sindicat d'edublocs mostra les darreres actualitzacions dels edublocs enllaçats dalt. Els feeds són fornits per RSS Feed Digest.


Contacte

Contacte

Tic educativa

Eines per a blocs

Webquest / Caceres del tresor

Disseny web

els meus tags a del.iciou.us