Avatar billede photop Nybegynder
19. december 2004 - 23:15 Der er 4 kommentarer og
1 løsning

Placering af <div> kokser i Netscape

Jeg har kodet html og css til følgende side: www.noer.eyebiz.dk
Det fungerer som det skal i IE, men næsten 25% af de besøgende på siden benytter Netscape, og her er der nogle ting der bliver placeret forkert.

De 3 kolonner med tekst er lavet ved hjælp af div's (koden skulle være meget let at se i kilden til siden), men nogle af disse div-elementer bliver flyttet i Netscape. Jeg går ud fra at det er et problem med det style-sheet der styrer layoutet (www.noer.eyebiz.dk/Style/pagestyle.css), men jeg har ikke sat mig ind i hvad der virker i hvilke browsere. Er der nogen der hurtigt kan hjælpe med at tilpasse min kode, så siden ser ens ud i både Netscape og IE?
Avatar billede skovenborg Nybegynder
20. december 2004 - 01:57 #1
For det første har du glemt en doctype - dette sætter IE i quirks mode (hvor den gætter sig mere eller mindre frem til resultatet), og det giver typisk en ret stor forskel mellem den og andre browsere (da de ikke gætter på samme måde).

Så tilføj dette i toppen på alle dine sider:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Vi starter lige med forsiden. Her vil du, efter du  har sat doctypen ind, se at enter-knappen rykker sig ned i bunden af siden. Du kan rette dette ved at bruge enheder på dine mål (fx ved margin, width osv.)
På forsiden er det eneste du umiddelbart skal rette:
#enter_button {
    width: 139px;
    margin:-146px auto 0px;
    z-index: 2;
}


Det næste du skal gøre er at tilføje enheder over det hele (du mangler bla. ved padding, width og margin). Når du tilføjer dette vil du se det problem at den sidste spalte rykker sig ned - ligesom netscape gjorde det i starten.

Nu kan du så se resultatet af IE's quirks mode - den skider bogstaveligt talt på hvad standarden siger. Grunden til dette er at de tre spalter ligger indeni enter_page-diven med bredden 711px. De tre spalter har hver en bredde på 237px og ganger man dem sammen giver det da rigtignok også 711px. Nu er problemmet bare at padding altså også tæller med - de er IE nok ligeglad med i quirks mode, men når doctypen kommer på, ja så husker den pludseligt de formanende ord at padding skal lægges til spaltens bredde og højde.

Resultatet bliver så den fejl du kan se. Løsningen er dog ret enkel: Træk din højre og venstre padding fra din bredde - vupti så burde de være på plads:
#column_1 {
    width: 213px;
    float: left;
    padding: 10px 6px 0px 18px;
}

#column_2 {
    width: 213px;
    float: left;
    padding: 10px 12px 0px 12px;
}

#column_3 {
    width: 213px;
    float: right;
    padding: 10px 18px 0px 6px;
}

Læg mærke til at hver spalte har bredden 213px plus en left/right padding på 24px = 237px. For at nævne det allerede nu så tæller borders også med i bredden - og har du margin på skal den naturligvis også tages i betragtning (selvom den er mere åbenlys).
Avatar billede photop Nybegynder
20. december 2004 - 22:23 #2
skovenborg>>
Kanon. Ikke nok med at du leverer en skræddersyet løsning, men den er velkommenteret. Det er den slags svar man bliver klogere af... Så hvis du lige kunne overtales til at smide et svar?!?
Avatar billede skovenborg Nybegynder
20. december 2004 - 22:37 #3
så lad gå da :-)
Avatar billede photop Nybegynder
20. december 2004 - 22:42 #4
There you go... Jeg smed lige en hund oveni. Endnu en gang tak for et virkelig godt og brugbart svar!

Photop :-)
Avatar billede skovenborg Nybegynder
20. december 2004 - 23:33 #5
jamen jeg takker da også mange gange for points :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester