16. januar 2006 - 01:41Der er
12 kommentarer og 1 løsning
Optimere til Firefox - hvordan?
Hej,
Jeg har arbejdet i længere tid på en side, og prøvede lige at se den i Firefox, hvor den så bare ser forfærdeligt ud i forhold til IE. - Især er det baggrundsbilleder til tabeller der er forsvundet, og top-billedet (også baggrundsbillede i tabel) er halvvejs på vej op og skjult under browserens top. De er alle defineret i CSS, og siden er opbygget i Dreamweaver.
Hvordan kan det være? Er der nogle huskeregler for at lave en browservenlig side.
Generelt kan det anbefales, at man previewer en ny webside i alt andet end IE, da der så er større chance for, at man får et rimeligt cross-browser resultat ...
DreamWeaver kan indstilles til at give advarsler om manglende kompatibilitet, men den kan desværre ikke indstilles til at fortælle o forskelle på visninger ...
-- og det er slet ikke usandsynligt, at det simpelthen er lettere at starte helt forfra, og så gøre det med korrekt (og fuldt kvalificeret doctype inklusive dtd-link !-), f.eks.
Hejsa - tak for hjælpen. Jeg fandt yderligere nogle nogle generelle ting i CSS som Firefox ikke vil acceptere. Jeg kan desværre ikke linke til min side endnu da jeg kun har den kørende på localhost. Læg venligst svar.
10 mod 1 på, at det er din kode, den er gal med ;o) Hvis du ikke benytter den DTD, roenving viser, er der meget stor sansynlighed for, at du har disabled vigtige dele af CSS i IE - og at Firefox faktisk viser siden, som CSS forskriver, din kode skal vises.
Prøv at skrive: java script:alert(document.compatMode) - i IE's adresselinje og tryk 'Return'.
Hvis du får returneret 'CSS1Compat', er alt fint. Returneres derimod 'BackCompat', har du disabled CSS i dokumentet - og IE vil tolke koden helt forkert.
Er det sidste tilfældet og du har skrevet koden, så den ser rigtig ud i IE, vil den se mærkelig ud i browsere, der understøtter CSS ... men det er din kode, den er gal med :)
jeg vil lige prøve dit Javascript senere i dag. Men en ting som min IE og FF tolker forskelligt er sådan noget som angivelser af padding og margin i/for tabeller. Er det meget normalt? - Her er jeg nødt til at bruge <p></p> nogle steder for at flytte min tekst ned, fordi det ikke ser ens ud når jeg f.eks. sætter padding top til 5px i min CSS.
Netop margin, padding og border er noget af det, CSS's såkaldte boxmodel lægger reglerne for ... og det er netop boxmodellen, IE ikke tolker som andre browsere, hvis man ikke bruger en fuld DTD. Normalt skal f.eks. padding og border lægges til elementets dimensioner, men det sker ikke, når IE går i quirksmode - som det kaldes, når IE ikke tolker boxmodellen, som forventet ... i modsætning til standardmode :)
Prøv såsamme dokument uden DTD - eller med denne (som faktisk også er valid): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- her går IE i quirksmode og tolker boksmodellen forkert. I virkeligheden er en sølle HTML-kommentar før en fuld DTD nok til at få IE til at gå i quirksmode:
<!-- En HTML-kommentar her --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ... osv - osv ...
- og ja, jeg ved godt, det er et komplet urealistisk dokument ... ikke mindst de dér borders på 50px! Det er tilgengæld meget let at se forskellene i det =)
Jeg vil gerne have tekstboxe til at være 200 px, men retter jeg oppe i input min width til width: 200px; så bliver ikke kun mine tekstboxe 200 px, men også dropdownlister, checkboxlister og buttons i min form 200 px brede, hvilket totalt ødelægger designet. Så må jeg ind og sætte width="200" på hver enkelt tekstbox manuelt i html'en, hvilket ikke er helt optimalt.
Jeg kan ikke svare på, hvad DW skriver, da jeg ikke har én på den PC, jeg sidder ved i dette øjeblik - men derudover er XHTML jo en eksperimentel standard, som langt fra understøttet på WWW, så det er der ingen grund til at skrive (tværtimod).
Hvis du skriver: input {width:200px}; - vil alle input-elementer (men ikke select-elemeter - dem, du kalder 'dropdownlister') naturligvis blive 200px bredde ;o)
Du kan deriod oprette en klasse: .myInputs {width:200px}; - og: <input class="myInputs" type="text">
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
Ny bruger
Nybegynder
Opret
Preview
