Søg
Avatar billede apo Praktikant
21. maj 2005 - 01:47 Der er 30 kommentarer og
2 løsninger

Doctype og HTML

Jeg har ladet mig fortælle, at den bedste måde hvorpå man kan få HTML og design til at se ens ud i forskellige browsere er ved, at kode efter W3C's standarder og ved at indsætte doctype som f.eks.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Men lige siden jeg er begyndt at kode efter standarderne og har indsat doctype i mine HTML-filer, har har Firefox vist siderne på én måde og IE på en anden måde; Hvilket netop var meningen ikke skulle ske.

Kort sagt: mine sider (Dengang lavet i FrontPage) blev før i tiden vist perfekt i begge browsere, inden jeg begyndte at kode efter standarderne, hvor det nu mildest talt ligner l*rt :-/

Hvordan kan det f.eks. være, at et almindeligt input med højden 20px - efter indsættelse af doctype - pludselig skal sættes til 16px for at resultatet bliver tilfredsstillende i IE?

Jeg oplever et hav af små irriterende skønhedsfejl som kan tage enhver glæde over at kode pæn HTML fra mig :-(

Hvad gør jeg galt?

Apo
Avatar billede olebole Juniormester
21. maj 2005 - 02:03 #1
<ole>

De ting, der bliver vist ens, er (næsten) alle de ting, der findes en standard for ... ikke ting som vertical-alignment i et input-element.

At dine sider ligner lort, må skyldes uhensigtsmæssigheder i din kode. Én ting er, man ikke laver syntaktiske fejl - men det behøver ikke at betyde, man koder i overeensstemmelse med standarderne. Man kan sagtens skrive dårlig kode og ting, der ikke giver mening i helt fin syntaks, som ingen validator vil brokke sig over.

Små forskelle har der altid været i forskellige browsere - og det vil der altid være. At forlange andet er urealistisk  :)

/mvh
</bole>
Avatar billede apo Praktikant
21. maj 2005 - 12:34 #2
Jeg kunne ikke finde på at sætte en vertical-align i et input ;-)

Problemerne oplever jeg især når jeg anvender <div>. Indholdet i div'et hænger helt "oppe under loftet" hvor det i en tabel-cell hænger i midten (som ønsket). Andre gange kan jeg ikke styre bredden på diverne uden at hele designet forskubbes :-/

Hvad er forskellen på et <div> og en <td> egentlig - Fungerer attributerne forskelligt afhængig af om de er i en <div> eller i en <td>? (Det virker sådan på mig).

De forskelle jeg oplever er først kommet efter at jeg har smidt denne:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

øverst på mine HTML-sider...

Apo
Avatar billede apo Praktikant
21. maj 2005 - 12:59 #3
Og hvorfor bruger W3C følgende doctype _uden_ dtd-linket:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

i stedet for:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

?

Apo
Avatar billede roenving Novice
21. maj 2005 - 15:23 #4
En table-cell-værdi på display virker ikke i IE ...

-- i det hele taget er der ikke mange af udvidelserne fra css til css2, som overhovedet virker i Indernet Explorer, for de har valgt at sige, at css2 er en 'midlertidig standard' -- sikkert fordi den maskine, der ligger i IE ikke kan fås til at understøtte mulighederne ...

-- og en tabelcelle er skabt til at vise data, hvor det oftest vil være rarest at et meget lille indhold ud for et meget stort indhold vises ud for midten af den store blok, hvorfor tabelceller default er indstillet til at opføre sig sådan ...

-- den slags er divs ikke skabt til, og de kan derfor ikke uden specialiteter bruges på samme måde, hvis der ikke understøttes display:table-cell; ...

Så brug dog en tabel til det !-)
Avatar billede apo Praktikant
21. maj 2005 - 15:28 #5
"Så brug dog en tabel til det !-)"

Roenving > Det havde jeg også overvejet... Men så kommer jeg ud i et tabel-helvede (nestede tabeller) hvilket efter sigende ikke skulle være god kode :-/

Jeg har i forvejen opbygget min grundstruktur (design-fladen) i tables, og har derefter brugt divs til det der ligger inden i cellerne. Hvis jeg begynder at bruge tabeller i tabeller vil det så give et dårligt resultat? (Eller er det en skrøne?)

Apo
Avatar billede roenving Novice
21. maj 2005 - 15:50 #6
Næh ...

-- problemet med de nestede tabeller kommer fra den måde, som var den eneste at placere elementer i gammel html, nemlig ved at benytte sig af tabeller i mange niveauer, med en masse rowspans, colspans og spacer.giffer til at udspænde de forskellige celler, så de udfyldte det nødvendige ...

-- og det bliver ikke et tabelhelvede, fordi du har et specielt design-behov, som hensigtsmæssigt kan løses med en tabel, men næsten umuligt med andre elementer !-)

-- men jeg ville da selv kigge efter, om der var andre hensigtsmæssige måder, jeg kunne opbygge min side på, hvis jeg pludselig havde mange tabeller !o]
Avatar billede apo Praktikant
21. maj 2005 - 16:33 #7
Nu bruger jeg godt nok kun en stor tabel med 8 celler, til selve design-grundlaget. Så der sker vel ikke noget ved at jeg fylder en tabel i nogle af cellerne.

Jeg synes at det er lidt uigennemskueligt med hensyn til hvordan man griber et grunddesign an. Der er jo mange der mener, at man helt skal undgå brug af tabeller, og i stedet lave det hele i CSS. I øjeblikket arbejder jeg på en enkelt side med grunddesignet, som bagefter skal kopieres til resten af mine sider. Derfor vil jeg gerne lave det bedst muligt fra starten af, så jeg kan koncentrere mig om indholdet; Velvidende at grunddesignet er i orden.

Men hvordan er det med doctypes med og uden links? Jeg kan se at der er mange  der udelader linket, men hvorfor? (selv W3C udelader linket på nogle af deres sider)

Apo
Avatar billede roenving Novice
21. maj 2005 - 16:43 #8
IE vil i de fleste modes uden et dtd-link gå i quirks-mode, hvilket betyder at browseren skider på dine css-regler, hvis den programmør fra Bombay, som lavede grundlaget for IEs renderingsmaskine tilbage i '97-'98 havde en ide om, at det var bedre med noget andet, og det synes han ofte !o]

Se http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/doctype.asp for en liste over hvornår IE respekterer standarderne (skemaet ca. midt på siden under Remarks !-)
Avatar billede apo Praktikant
21. maj 2005 - 17:25 #9
Hmm... Det ser ud til at linket kun er nødvendigt i få tilfælde (HTML 4.0 Frameset og HTML 4.0 Transitional).

Jeg undrer mig dog stadig over nødvendigheden af doctype/-linket... Der er mange der undlader at bruge det (uden at det kan ses på deres sites), og jeg kan faktisk kun se forskel på mine egne sider (i IE og Firefox) _når_ jeg bruger doctype; Det virker - stik i mod det man ofte læser - som om at doctype smadrer ensartetheden mellem browserne.

Mine sider har aldrig før set så elendige ud som nu, og størrelsesangivelserne hænger overhovedet ikke sammen. F.eks. er et input i en celle med bredden 500px nød til at være 300-400px bred for ikke at skubbe designet; Det giver jo ingen mening, at bruge doctype så :-/

Jeg vil gerne kode efter standarderne men hvis standarderne ikke giver mening og resultatet bliver elendigt, hvad er formålet så?

Apo
Avatar billede olebole Juniormester
22. maj 2005 - 01:31 #10
Hvis dine sider ser meget forskellige ud - og du bruger en fuld DTD - kan det næsten kun skyldes uhensigtsmæssig CSS-kode.
Én årsag er formodentlig, at du ikke er bekendt med den korrekte brug af CSS's box-model. Ting som border og padding lægges oveni den størrelse, du sætter med height og width. Prøv f.eks. disse to sider i IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
}
</style>
</head>
<body>

<div style="width:200px;height:200px;background-color:yellow;border:50px solid red">&nbsp;</div>

</body>
</html>

------- og ------->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
}
</style>
</head>
<body>

<div style="width:200px;height:200px;background-color:yellow;border:50px solid red">&nbsp;</div>

</body>
</html>

Du kan også prøve at sætte padding på divene og se resultaterne.
Læs også under 'The !DOCTYPE "Switch"' her:
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Hvad angår vertical-alignment på et input, så er det netop problemet, du selv skitserer i spørgsmålet. Det handler nemlig ikke om 16 eller 20px i højden, men om at den ene browser pr. default sætter vertical-align til 'middle'. Gør du det selv på elementet, vises det ens i begge browsere. Da CSS ikke stipulerer, hvordan vertical-align skal være sat på et input-element, er det en af de ting, der altid vil kunne være forskel på.

Bohr sagde engang noget i rettning af:
  "Det, vi ser, er ikke naturen - men naturen udsat for vores måde at spørge på."

Selvom den udtalelse gik på måleforhold i et subatomart miljø, rummer den en stor sandhed om de fleste misforståelser, vi kommer ud for. Vi oplever nogle ting og søger deres forklaring med forkerte spørgsmål ... søger de forkerte steder ... de steder, vi kan få øje på. Meget ofte ligger forklaringerne på steder, hvor vi slet ikke tænker på at lede.

Problemerne, du oplever med din kode, skyldes mest sandsynligt, at du ikke skriver CSS i overensstemmelse med standarden, men får strikket en masse fejl sammen, der i rimelig grad ophæver hinanden. Det afsløres så, når IE pludselig overholder CSS1-standarden og lidt af CSS2.

Der er en hel del at læse og lære på W3C, før man kan kode ordentlige sider med CSS (og de andre web sprog og teknologier) - men webkodning er på den anden side også ved at være et fag, så det bør vel ikke undre.
Man kan ikke både have et simpelt tabel- og paragraf-framework, alle kan finde ud af at udgive videnskabelige måledata i - og samtidig have en højteknologisk medie- og underholdningsplatform. C'est la udvikling  ;o)
Avatar billede olebole Juniormester
22. maj 2005 - 01:58 #11
PS: Og så er formfelter i øvrigt nogen autonome satanner - og har altid været det. Den underliggende struktur er temmelig forskellig fra andre HTML-elementer, så derfor opfører de sig af og til lidt sært  :)
Avatar billede apo Praktikant
22. maj 2005 - 12:53 #12
Tak for dit indlæg, Ole :-)

"Én årsag er formodentlig, at du ikke er bekendt med den korrekte brug af CSS's box-model. Ting som border og padding lægges oveni den størrelse, du sætter med height og width. Prøv f.eks. disse to sider i IE:"

Nu skal jeg lige se om jeg har forstået det korrekt... Det vil sige at med doctype og dtd-link vil nedenstående boks i alt være nøjagtig 222px bred, fordi border og padding lægges til boksen:

| border:1px; | padding:10px; | width:200px; | padding:10px; | border:1px; |

Er det korrekt (eller er det lige omvendt)?

"Hvad angår vertical-alignment på et input, så er det netop problemet, du selv skitserer i spørgsmålet. Det handler nemlig ikke om 16 eller 20px i højden, men om at den ene browser pr. default sætter vertical-align til 'middle'."

Mener du ikke height i stedet for vertical-alignment? Eller var det blot for at illustrere, at man skal kontrollere sine elementer til fulde for at undgå forskelligheder fra browser til browser?

Jeg er klar over at jeg stadig har en del at lære (Hvorfor jeg af og til opretter spørgsmål her på E når der er noget jeg ikke synes, jeg kan læse mig til andre steder). Da jeg kastede mig over mit (amatør!)-web-projekt for lidt over et års tid siden, sprang jeg sådan set ind i midten af det hele (I stedet for at begynde fra bunden). Siden da har har jeg måtte bevæge mig både opad og nedad i nivauet for at få flere detaljer med (Man kan jo ikke springe A over - og begynde med B - hvis man skal fra A til C).

Jeg har ofte besøgt W3C for at lære noget men synes sq, at den ofte er meget uoverskuelig og, at der er alt for meget læsestof for én som mig, der 'bare' vil lave et hobbyrelateret website. Derfor har jeg holdt mig til HTML.dk, W3Schools.com og Eksperten. Jeg vil gerne lave mit website så godt som muligt, men jeg må erkende, at jeg aldrig bliver færdig med den hvis jeg skal gennemlæse W3C's website for at kunne lave den med den mest optimale kode og struktur :-/

Har du evt. nogle W3C-links som beskriver HTML-opbygning lidt i retning af den måde hvorpå HTML.dk og w3schools.com gør det (Så jeg kan spare noget tid men stadig kan lære noget nyt)?

Apo
Avatar billede roenving Novice
22. maj 2005 - 13:15 #13
Sådan et link findes desværre ikke, men der er dog lister over elementer (f.eks. http://www.w3.org/TR/html401/index/elements.html !-)

-- og ifølge boks-modellen skal et elements fulde bredde beregnes sådan:

margin-left + border-left-width + padding-left + element-width + padding-right + border-right-width + margin-right

-- så du har helt ret med de 222px !o]
Avatar billede roenving Novice
22. maj 2005 - 13:18 #14
-- og så er du forhåbentlig klar over, at html.dk er fyldt med fejl i en sådan grad, at det er relevant at snakke om huller mellem fejlene og ikke huller med fejl ...

www.w3schools.com er i den henseende adskilligt bedre, men har dog også en række fejl, som desværre ikke er dokumenteret tilstrækkeligt !-)
Avatar billede apo Praktikant
22. maj 2005 - 13:42 #15
Roenving > Tak for linket :-)

Nu er jeg ved at få en helt anden forståelse for det (Tågen lettede :-D ). Jeg har hele tiden troet, at en boks (<div> eller <td>) voksede indad når man satte padding og border. Men den vokser jo i virkeligheden udad; Hvilket er logisk nok (Set i bagklogskabens klare lys) da et website skal tilpasses indholdet, ikke omvendt.

Men hvordan styrer man en <div> så den opfører sig som et <table> (Og kan det lade sig gøre)?

Jeg har før hørt det med HTML.dk, men jeg var ikke klar over at fejlene var mere reglen end undtagelsen; Så skal jeg da undgå det site i fremtiden :-|

Apo
Avatar billede apo Praktikant
22. maj 2005 - 13:45 #16
... Jeg har tit oplevet problemer med at kunne styre indholdet af en <div> via vertical-alignment (Indholdet hænger normalt oppe under loftet) :-/
Avatar billede roenving Novice
22. maj 2005 - 13:49 #17
html.dk er god til nybegyndere, fordi den er opbygget som tutorials og på dansk, men mængden af egentlige fejl er overvældende ...

-- og i de browsere, som understøtter det meste af css2 kan man bruge display:table-cell; men det er ikke en af de få ting IE understøtter fra css2-standarden, så svaret er for nuværende: Du kan ikke få en div til at centrere vertikalt !-)

-- er behovet absolut, skal man ud i at sætte et element indeni, som man aflæser højden på og rykker derhen, hvor det skal være med positionering via javascript !o]
Avatar billede apo Praktikant
22. maj 2005 - 14:31 #18
Jeg vil helst ikke ud i at skulle bruge javascript for at kunne lave en vertical-align i en <div>...

Men det vil altså sige, at skal man have noget centreret vertikalt, kan kun tables benyttes til det formål?
Avatar billede roenving Novice
22. maj 2005 - 14:32 #19
Ja !-)
Avatar billede apo Praktikant
22. maj 2005 - 14:45 #20
Godt så! Så behøver jeg jo ikke bruge mere tid på divs til det formål...

Jeg synes selv, at jeg er blevet en del klogere af indlæggene, så jeg har forhøjet pointene.

Læg et svar begge to, så er der 30 points til hver :-)

Apo
Avatar billede roenving Novice
22. maj 2005 - 14:51 #21
Velbekomme, så '-)
Avatar billede roenving Novice
22. maj 2005 - 14:51 #22
;O)
Avatar billede apo Praktikant
22. maj 2005 - 16:48 #23
Så mangler jeg bare et svar fra olebole :-)
Avatar billede roenving Novice
22. maj 2005 - 16:50 #24
-- det virker ikke som om han er på lige nu, så det kan være, du skal vente til imorgen eller noget !-)
Avatar billede apo Praktikant
22. maj 2005 - 17:18 #25
Jeg venter til han kigger forbi, så :-)
Avatar billede olebole Juniormester
22. maj 2005 - 18:36 #26
Vertikal centrering kan i visse tilfælde klares med:

<div style="height:75%">
    <div style="position:relative;width:300px;height:100%;border:1px solid red">
        <div style="position:absolute;height:30px;top:50%;margin-top:-15px;background-color:red">kjljlkjlk jlkjl kjl</div>
    </div>
</div>

Det yderste div er sat til en højde på 75% for at have en variabel højde at teste på.

Det første inner-div vil tilrette sig denne højde. Det er relativt positioneret, så det kan anbringes overalt i dokumentets flow - samtidig med, absolute positionerede child-elementer vil positionere sig i forhold til det.

Det inderste div - der skal lodret centreres i det store - er vi til gengæld nødt til at kende højden på. Vi giver det en top-værdi på 50% - og flytter det opad med halvdelen af sin egen højde (margin-top:-15px) ... voila  :)

Ja, jeg indrømmer det kan være squide irriterende at skulle opdigte den slags kreative løsninger, men på den anden side, kan de, der skriver standarderne, ikke forudse alle de sære ønsker, vi måtte have eller få.

Man kan vælge løsningen at stampe et par hysteriske gange på hundhvalpens hoved, ørle i laptoppen og skrige "FUCKING PISSE-LORTE BROWSER!" - men jeg har aldrig set det løse noget  :)
Selvom jeg fra fødslen er begavet med et temperement, de fleste atsrologer nok ville betegne som 'en kampvogn i ascendanten', har jeg fundet ud af, det faktisk kan være noget af det sjove i kodning. Hvis jeg mener noget burde fungere, er det spændende at finde udaf, hvorfor pokker det ikke er tilfældet i lige netop 'denne situation' ... og det er yderst sjældent, jeg ikke ved et tilfælde lærer noget om B, C eller D, når jeg søger info om A.
Det er ikke så ofte, man får tænkt over, hvorfor noget gik godt. Til gengæld giver fejl og fiaskoer som regel anledning til masser af frugtbart hovedbrud. Derfor lærer man så dejlig meget af sine fejl, men sjældent ret meget af successeserne  ;o)

Det kan faktisk blive lidt af en sport at 'udvide' og/eller 'bøje' standarderne, så man kan lave ting, ingen havde tænkt sig, da de blev udarbejdet.
Jeg er stadig vild af beundring over de pot-heads, der i begyndelsen af 90'erne fik 'vredet' et tabel- og paragraf-framework over i en retning, hvor det kunne bruges til interaktive, grafiske interfaces til avanceret kommunikation og underholdning - med brug af mange forskellige medietyper.
Bevares, det endte op i helt vanvittige og indviklede koder, men det pressede helt uforudset udviklingen i retning af det WWW og de teknologier, vi kender i dag  :)
Avatar billede olebole Juniormester
22. maj 2005 - 18:40 #27
"- ja, det er fint, OleBole ... men, hvis du insisterer på at skrive essays om webkodningens herligheder - ku' du så for pokker ikke også lige tage at få lært at sdavø?"  :D
Avatar billede apo Praktikant
22. maj 2005 - 20:41 #28
*LOL* Stakkels hundevalp...

Ahh, så det kan lade sig gøre at sætte en div til vertical-align:middle;. Det må jeg eksperimentere lidt med.

Ja, man lærer vel, at knække problemerne jo bedre man bliver. Men den slags problemløsninger kan jeg altid kaste mig over på et senere tidspunkt; Nu skal jeg i første omgang have lavet mit website... Bagefter kan jeg altid rakke ned på det og forbedre det over tid :-D

Tak for jeres lærerige og brugbare indlæg, der er points :-)

Apo
Avatar billede olebole Juniormester
22. maj 2005 - 23:32 #29
Ja, man kan godt centrere vertikalt i et div - men ikke helt så dynamisk som i en tabel-celle. Vi er desværre nødt til at kende højden på det, der skal centreres.

Nogen gange er det irriterende, bilen ikke kan flyve eller sejle. Sådan er det nu engang med den teknologi - og så finder vi bare en anden udvej.
På samme måde er det nogen gange nødvendigt at indrette sine design-ønsker efter, hvad der er muligt med de tilgængelige teknologier ... og så i øvrigt forøge at 'bukke teknikken lidt i hjørnerne'  :)

Tak for points  ;o)
Avatar billede roenving Novice
23. maj 2005 - 03:31 #30
-- også tak for point herfra ;~}
Avatar billede apo Praktikant
24. maj 2005 - 21:32 #31
Velbekomme :-)

Ja, nu er der jo kun en vej tilbage... Og det er fremad ;-)

Apo
Avatar billede roenving Novice
24. maj 2005 - 23:55 #32
Jepz !-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
10/0821:30 Blokeret på Snapchat? Af LineP i Chat & Messaging
09/0816:05 Samsung Galaxy vil ikke ud af "Sikker tilstand" Af ErikHg i Mobiltelefoner
08/0812:15 morf bilede Af knuldefar1942 i Fri debat
White papers
Flere white papers »