Pussig IE/Opera-visningsproblem

[pmb]

Hei,

Nylig oppdaget jeg et problem med nettsidene mine som kun oppstår i Internet Explorer og Opera. Fungerer som forventet i Firefox & Chrome. Se screenshots:

Slik ser det ut i Opera/IE.

Og i FF/Chrome, slik det skal være.

Har prøvd litt at hvert.. men klarer ikke forstå hva som foresaker denne snodige mix-upen. Om noen tar seg bryet å titte på kildekoden og evnt. finne feilen blir det høyt verdsatt

Problemet gjelder for samtlige undersider med spill på nettstedet, eksempelvis som dette.

 

[adeneo]

Firefox og Chrome tilgir mye feil, mens Opera og IE viser sider mer korrekt, og selv små feil kan føre til visningsproblemer.

IE er stort sett bare elendighet, men Opera har Dragonfly, som er et ganske bra verktøy for å finne slike feil.

En kjapp titt viser at på linje fem står det:

<meta property="og:image" content="<img width="92" height="129" src="http://spillkritikk.no/wp-content/uploads/2011/11/lordoftheringswarinthenorth.jpg" class="attachment-post-thumbnail wp-post-image" alt="lordoftheringswarinthenorth" title="lordoftheringswarinthenorth" />" />

Du legger forhåpentligvis merke til at her er det noe alvorlig feil, og at den ene lukkingen står på helt feil sted (blant annet), få lukket property meta'en, og startet title taggen din riktig så løser nok det en del.
Når du har gjort det så fyrer du opp Dragonfly, eller i Opera så kan du høyreklikke og så trykke "kontroller kildekode", så fikser du de rundt åtti andre feilene du har, så skal du se det ordner seg

 

[pmb]

Takk for råd, adeneo. Fant synderen.

Viser seg at det er Google-annonsen på 300x250px som lager krøll. Selve rammen rundt og alt er det ikke noe problemer med, men med en gang jeg putter inn Adsense-koden ramler hele siden sammen.

<script type="text/javascript"><!--
google_ad_client = "ca-pub-3968903417335357";
/* single 300x250 */
google_ad_slot = "2381907107";
google_ad_width = 300;
google_ad_height = 250;
//
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Skulle det der være så gæli da?

 

[pmb]

Mistenker at problemet har noe med Facebook Like-script + Google Ad sammen å gjøre.
Her vises nemlig Like-button inni boksen hvor annonsen skal være (som ikke vises).

 

[adeneo]

Nei, problemet er ikke at forskjellig kode du bruker fra tredjeparter ikke spiller på lag, slik som Facebook og Google, som brukes på gazillioner av andre sider sammen, men at du har flere tagger som ikke er lukket, mens andre igjen ikke er startet.

Det begynner helt øverst med meta tagger som ikke er lukket og en title tagg som egentlig ligger inni meta taggen osv.

Det som skjer når tagger ikke åpnes/lukkes riktig er at elementer på siden ikke vises riktig, og slik som at en facebook dings plutselig dukker opp inni adsense sin plass osv. er ikke unormalt da hele flyten i dokumentet er ødelagt, og biter av kode som skulle vært separate elementer er ikke lenger separate, men ligger i hverandre i stedet.

Dette burde være rimelig greit å fikse ved en gjennomgang i en validator, og så fikse en og en feil fra toppen og nedover til dokumentet validerer.

 

[pmb]

Hører hva du sier, og vil se nærmere på validering. Nå fungerer det uansett slik det skal.

Fikk en feil i valideringen med Google-annonsen, fjernet kommentarene i scriptet og nå er det problemfritt i samtlige browsere

 

[tomalex]

Det er jaggu ikke en dårlig nettside du har der altså!

Lagd alt sammen fra scratch?

Likte spesielt footeren din, som skiller godt!

 

[pmb]

Takk for det, tomalex. Meget motiverende for videre arbeid med slike tilbameldinger!

Vel, kjører jo Wordpress da, men begynte med en "tom template" (toolbox) og har ellers bygd opp alt fra bunnen av. Footeren er jeg også meget fornøyd med, blir vel muligens det eneste som blir med over til neste design som jeg jobber med for tiden