Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  9 1833
Hei.

Det har seg slik at jeg designer en enkel nettside via html og css. Jeg bruker Google Chrome under utviklingen. Nå har jeg fått til ønsket design. Men kun i chrome. I Firefox og IE er ikke designet riktig. Nå forstår jeg at forskjellige browsere av og til tolker CSS-koden forskjellig, det er greit. Det jeg lurer på er hvordan jeg skal gå frem i feilsøking av css-kode når det kommer til kompatibilitet.. Ikke bare i dette tilfellet, men generelt.

Stiller jeg et umulig spørsmål, si ifra!

Takk
Vel, som regel er det første jeg legger merke til med IE er at de legger "auto" rammer på bilder men, det er jo bare å legge til en kode eller to så forsvinner dem. Så først og fremst ville jeg skrevet ned alt av feil du har slik at vi kan hjelpe. Bare å sende PM om du trenger mer hjelp
Mighty
vonS's Avatar
Trådstarter
Her er CSS'en: http://pastebin.com/9s27CWc4

Tar også gjerne imot kritikk generelt på kode, men akkurat nå leter jeg etter feil i koden som kan føre til kompatibilitetsproblemer i forskjellige browsere..
Min fremgangsmåte er ved hjelp av Opera sitt innebygde dragonfly verktøy. Det finnes liknende for andre nettlesere, men disse har jeg sjeldent brukt. Trykk ctrl-shift-i for å få det opp.

1. sjekk på errors-tabben, ordne opp i alle disse. (CSS3 vendor prefixes kan du se bort i fra.)

2. Gå inn på document-tabben. Du kan nå klikke rundt på elementene og se nøyaktig hvilke css-regler som gjelder for hvert element. Når du har valgt et element kan du trykke på layout og se nøyaktig hvordan box-modellen fungerer på elementet du har valgt. Hvis du trykker på margin i box-modellen vil marginen merkes av på skjermen.

3. om ikke noe av dette fungerer, prøv å slette en og en egenskap, om det ikke forandrer noe kan du som regel trygt sette den inn igjen
Sist endret av lor3ntz; 17. august 2012 kl. 22:35.
Når ting ikke funker er det første man burde gjøre å validere både markup og CSS. Har selv sittet i flere timer og lett etter en feil, også har jeg til slutt funnet ut at det ikke funket fordi jeg var for lat til å sette doctype mens jeg jobbet med siden.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator

Annet enn det pleier jeg å sjekke i forskjellige nettlesere av og til, og teste enkelt-elementer av siden for å finne ut hvor feilen ligger. I tillegg hender det også at jeg legger til browser-spesifikk kode for å rette opp i feil i IE, eller fjerne enkelte design-elementer fra IE for å slippe problemer. Å få CSS 3 til å virke med eldre versjoner av IE er i de fleste tilfeller så godt som umulig.
Mighty
vonS's Avatar
Trådstarter
Takk for svar!

Får igrunn ingen feil verken av validatoren på w3 eller dragonfly. Vil noen ta en titt i css-koden som jeg postet tidligere her i tråden?
Å ha bare CSS uten å vite verken markup, hvordan siden ser ut eller hva som er feil hjelper lite. Det ser riktig ut slik som det er nå, og ting kan ofte være riktig, men bli tolket feil av nettleseren.

Det eneste jeg kan tenke meg at lager problemer er at du har satt floats til "none" og satt position "absolute" på innhold. Hvis du legger ut resten her/sender på PM kan jeg sikkert sjekke litt.
Vi kan gjøre lite annet enn det jeg alt har skrevet. Gå videre til steg 2 du.
lor3ntz: Det du skriver hjelper han med å gjøre koden kompatibel i Opera, men ikke i de andre nettleserene han nevner. Det er fullt mulig å skreddersy koden på andre måter. Selv om det er lite vi kan gjøre med koden hans kan vi alltids lære han hvordan han kan gjøre det selv.

vonS: Det jeg har gjort før er å "hacke" det til med et eget stilark for IE. Du kan sikkert få til noe lignende for Firefox. Det skal være mulig å skreddersy kode for både Internet Explorer og Firefox ved å tilpasse CSSen.

Her kan det oppstå komplikasjoner med koden du allerede har i original-stylesheeten, men husk at du kan bruke !important til å overstyre andre egenskaper i CSS-en. Bruk denne med omhu.

For å feilsøke i både Firefox og IE finnes det verktøy til dette. Jeg liker spesielt godt Firebug pluginen til Firefox. I IE har du Developer Tools, jeg mener å huske at du får opp denne med F12. Anbefaler deg at du setter deg inn i disse to verktøyene og lærer deg de. Start med Firebug, den er mer intuitiv. Disse verktøyene fungerer nok på lik linje som Opera sitt som lor3ntz skriver om, uten at jeg har testet Opera sitt verktøy.
Det skal være fullt mulig å skrive kode som følger standardene og fungerer i alle nettlesere unntatt ie<=6, kanskje ikke pikselperfekt i alle. Gecko og opera har i lang tid fungert 99.99% likt, så når noe er feil i ff kan man som regel finne samme feil i opera. Jeg sa jo også at det finnes tilsvarende verktøy for andre nettlesere. Å drive hacke til ting med egne stilark for ie og ff er å gjøre seg selv en bjørnetjeneste når du skal lære å skrive css. Som tidligere sagt er det sannsynligvis floats, box-modellen eller positioning som er feil. Vær også obs på haslayout "featuren" i ie. Outlines kan også være et problem