Vises ikke ordenligt i IE, men fint i Firefox?

Jesper Kristensen: Jeg har forsøgt at ændre lidt forskelligt som der står i det link du har sendt, men det reagere siden således på at den så ikke virker i firefox, og desuden stadig ikke bliver vist fejlfrit i IE.

Ja, Firefox vil også fortolke siden anderledes, når du skifter den fra Netscape 4 mode til nyeste Firefox mode, men det kan du ikke gøre noget ved. Her må du bide i det sure æble, tilføje en doctype og rette din side til, så den virker igen i Firefox. Du har lavet din side til 1995, og du kan ikke undgå at det kræver nogle få ændringer for at få den til at virke i 2011. Så tilføj doctypen og ret fejlen på siden, så den kommer til at virke i Firefox igen. Gå derefter videre til at få den til at virke i Internet Explorer. Hvis du ikke selv kan få den til at virke i Firefox, så tilføj doctypen og skriv her igen, så vil jeg se på hvad der er galt.

Inden i kommer for godt i gang med at kritisere Microsoft, så tag lige et kig på Cristians webside. Den kører jo i Internet Explorer 5.0 mode, og så er det jo klart at den ser helt forkert ud.

Cristian, der er ingen der bruger Internet Explorer 5 mere, så lad være med at lave din side til den gamle version. Se hvordan du ændrer mode fra IE5 til nyeste på http://www.jesperkristensen.dk/webstandarder/doctype-chooser/#html

Så fik jeg rettet CSS til i begge browsere, og det er ved at fungere.
Der er dog stadig små problemer med at scrolleren bliver skjult, som om feltet er for stort, men kan ikke rigtig se hvor jeg kan rette på det.

Det er simpelthen bare fordi du har lavet boksene lidt for store. Du sagde det virkede i Firefox og ikke IE. Er du sikker på at det ikke var omvendt? Det ligner at du har lavet størrelserne på boksene efter IE5's Box Model. Du kan bare rette størrelserne. Jeg prøvede disse, og de virker:

div.interface3-27 {
width: 185px;
height: 659px;
}
div.interface3-28 {
height: 659px;
width: 790px;
}

Hvorfor har du i øvrigt lavet alt med position:absolute? Det gør da kun tingene besværligt for dig selv.

En anden ting, er at efter jeg har tilføjet doctype, har jeg fået problemer med ÆØÅ på hjemmesiden. Det ses under bestyrelsen og nederst ved min kontaktformular.

Grunden til at resten af teksten ikke er et problem er at ÆØÅ står som:

- æ
- ø
- å

Jeg ser selvfølgelig helst at jeg kan skriver ÆØÅ direkte i min editor når jeg skriver hjemmesiden, frem for ovenstående "tegn" - hvordan får jeg løst dette?

For at fikse Æ,Ø og Å, skal du først bytte om på følgende to linjer, og rette UTF-8 til ISO-8859-1:

<title>Bestyrelsen</title>
<meta charset=UTF-8>

Skal rettes til

<meta charset=ISO-8859-1>
<title>Bestyrelsen</title>

Hej Christian

Du kan lave en separat CSS fil til IE. Du kan ændre din css fil med hjælp af IE udviklingsværktøj (F12). På den måde kan du hurtigt lokalisere hvilke problemer IE har med dit stylesheet. Det ville være en god idé at læse denne artikel om IE css problemer

Med venlig hilsen
Asker

Klassisk eksempel på Microsoft's inkompetence
</fordomme>

Anyway - Som Asker siger, så kan du lave en seperat IE stylesheet fil. Dette gør du ved at tilføje:

 <!--[if gte IE 5]>
 <link rel="stylesheet" bla bla>
 <![endif]-->

Du anvender to forskellige tegnkodninger. Efter at du er skiftet fra UTF-8 til ISO-9950-1 er "bestyrelsen" nu rettet, men "forside" virker nu ikke længere med æ,ø og å. Du skal sørge for at indstille din hjemmeside-editor til at bruge samme tegnkodning hver gang. Du kan ikke blande UTF-8 og ISO-8859-1 samen, men er nødt til at vælge en af dem, og holde dig til den på alle undersider.

Det var ikke så meget selve CSS-erkælringen "position: absolute" jeg tænkte på. Det er mere det, at du bruger absolut positionering, der undrer mig. Sidder du i Photoshop og flytter rundt på de enkelte menupunkter og bokse med direkte X/Y-positionering? Det ville da være meget nemmere fx at sige at alle menupunkterne skal have samme bredde og placeres ved siden af hinanden, end at fortælle Photoshop præcis hvilken X/Y-koordinat hvert enkelt menupunkt skal have.

Ja, dit META tag er ens på de to side, men indstillingerne du har brugt i din EDITOR er forskellige. Hvis du siger du bruger Photoshop som din editor, så har du brugt forskellige indstillinger for Photoshop på de to sider.

Jeg har tilføjet et illustrerende billede på min vejledning som jeg linkede til dig tidligere:
http://www.jesperkristensen.dk/webstandarder/doctype-chooser/#charset

Af det du skriver kan vi så konkludere de tre programmer Photoshop, Dreamviewer og PHP designer, ikke er sat til den samme indstilling alle sammen på din computer.

Jeg vil foreslå at du vælger UTF-8.

Når du har rettet <meta charset> til UTF-8, skal du have rettet indstillingerne i dine editors.

Photoshop bruger så vidt jeg kan forstå allerede UTF-8, så der er ingen ændring her.

Dreamweaver (som jeg tror du mener, når du skriver dreamviewer) kan skiftes over til UTF-8 på følgende måde: http://www.martin-nielsen.com/utf-8-encoding-paa-filer-i-dreamweaver_195.html

phpDesigner kan jeg ikke lige finde nogen guide til, men du kan prøve dig frem i indstillingsdialogen, og se om du kan finde indstillingen.

Når du har rettet alle indstillingerne, skal du bare til at have åbnet alle filerne, rettet dem og gemt dem med den rigtige tegnkodning.

Du har lavet et helt stylesheet, hvor du har gentaget alt din CSS til IE. Det er ret dumt, da det så ikke er til at holde styr på hvad der er ens og hvad der er forskelligt. Så før du begynder at tilrette siden til Mac, så få lige dit IE-stylesheet reduceret. IE læser både det generelle stylesheet og sit eget.

Men hvorfor har du overhovedet et IE stylesheet? Det burde slet ikke være nødvendigt, når du har sat doctypen ind, som du nu har. Hvis du dropper IE-stylesheetet, hvad vises så forkert?

Viser Firefox til Windows og Firefox til Mac siden forskelligt? Hvis de gør, er det så samme version af Firefox? Hvis Firefox til forskellige styresystemer viser siden forskelligt, har det højst sandsynligt noget med skrifttyper og skriftstørrelser at gøre. Måske er dit design meget afhængigt af præcis hvor stor teksten er. Det kan meget vel være tilfældet når du bruger absolut positionering over det hele. I det tilfælde er løsningen at gå væk fra at bruge absolut positionering.

alternativet til absolut positionering er at lade elementerne placere sig i forhold til hinanden. Fx:

"menupunktet Boligerne skal placeres på koordinatsæt (726px, 260px)"

versus,

"menupunktet Boligerne skal placeres efter menupunktet Dokumenter, alle menupunkterne skal stå på en vandret linje, og der skal være 27px mellemrum mellem hvert."