Nogle små layoutproblemer

<ole>

For det første burde du nok skrive i en HTML-version, der kan bruges på WWW. Når du skriver XHTML, sætter du browserne på helt unødigt overarbejde - da din kode ikke tolkes som XHTML, men som dårlig HTML.

Derudover er det altid rigtig skidt at basere sit layout/design på script, når nøjagtig det samme kan gøres i markup/CSS. Bruger du - som W3C anbefaler - en tabel, når du skal oprette 'synkrone' søjler, slipper du helt udenom den slags 'misbrug' :)

Et elements onclick-event fyres altid af lige før elementets default-handling. Dvs, at du disable'er submit-knappen lige inden, den skal til at udføre sin egentlige handling - hvorfor denne aldrig bliver udført. I stedet kunne du disable den på formens onsubmit-handler - hvilket ikke vil genere nogen eller noget.

At stoppe submit-handlingen i den situation, der i øjeblikket er gældende, er helt efter bogen. Det er Moz, der udviser en alvorlig buggy adfærd her.
Den vil jeg da lige undersøge nærmere, for det er faktisk en yderst alvorlig bug, der straks bør rapporteres til Mozilla!

Undgå i øvrigt navne, der i forvejen bruges af de sprog, du anvender. 'submit' er således et rigtig dårligt navn, da JavaScript meget let kan forveksle navnet. Netop det navn på en submit-knap har været årsag til i hundredevis af spm. på Eksperten  ;o)

Årsagen til den ekstra pixel i Moz skal sikkert findes i din uheldige kombination af script-baseret layout og den ekstra pixel, IE lægger ind i top og venstre side.
Igen: Brug en tabel til søjleopdeling - så skriver du bedre kode og udseendet er meget lettere at styre.

/mvh
</bole>

HTML-version: Jeg har valgt at bruge XHTML, men det burde ikke have nogen særlig betydning, for selve DOCTYPE sætter browserne i standard-mode - og derfor bør den vel også tolke det rigtigt?

Ang. tabel til layout: Jeg synes i lang tid, at diskussionerne har gået på, at tabeller ikke skal bruges til design, men kun til tabulære data? Hvor anbefaler W3C noget andet?

Onclick -> onsubmit: Jeg har ændret det til onsubmit. Så lærte jeg også noget i dag :D

Submit som id: Det var jeg ikke klar over. Så lærte jeg endnu mere i dag.

Ekstra pixel: Den ekstra pixel skyldes ikke scriptet - for det har jeg prøvet at fjerne, og problemerne er stadig magen til. Scriptet har i øvrigt heller ikke nogen effekt i Moz, da den understøtter min-height i css.

Ja, siden tolkes rigtigt, fordi standarden spænder et sikkerhedsnet ud under dig og redder dig, når du gør noget forkert - og lader dokumentet tolke som HTML. Da du sender et HTML-dokument, forklædt som et XHTML-dokument, tvinger du min browser til at svede helt unødigt.
Den skal først gennemskue, at du intet mener med din DTD og rette alle dine XHTML-lukninger. Dem kan HTML-parseren nemlig ikke forstå - og det er den, der skal tolke siden. Din side bliver med andre ord tolket som dårlig HTML og ikke XHTML.

Jeg går udfra, du gerne vil skrive den bedste kode - og at du er blevet dårligt rådgivet - og derfor skriver XHTML. Sandheden er bare, at XHTML ikke kan bruges til noget fornuftigt på WWW idag, men kun generer brugernes browsere.

HTML4.01 er den standard, der fungerer langt bedst ... og når XHTML endelig engang kan bruges, hedder standarden XHTML2.0 - og koden er en helt anden. De overgangsversioner, vi i øjeblikket har, er altså ikke engang en fremtidssikring ... kun spild af tid og brugernes CPU/RAM  :)

Hvad diskusionen om tabeller angår, så bunder den formodentlig i, at folk misforstår vendingen 'tabullære data'. Det, der menes - og som du kan forvisse dig om ved at læse W3C's whitepapers, udvikler-mailtråde og hvad der ellers er af dokumenter udover lige rekommendationerne - er 'synkrone kollonner'. Søjler, hvor højder, linestart, o.lign. skal være ens.

Hvad er kendetegnet ved tabulære data? Opstilling i synkrone søjler  ;o)

Hvis folk i stedet for at hænge sig i et ord (jeg kan betro dig, der ikke er en eneste browser, der forstår vendingen 'tabulære data') i stedet tænkte lidt over, hvorfor det frarådes at bruge tabeller til andet, ville folk nok ikke være så skræmte for tabeller.

Det, du af W3C frarådes at gøre, er at bygge de enorme sætterkasser med et hav af transparente giffer til at holde skidtet på plads, som var eneste designmulighed op gennem 90'erne.
Dét er dårlig kode. Ligeså dårlig kode, som når man forsøger at efterligne elementer med andre, der ikke er egnet til opgaven.
Tabellen er uden sammenligning det bedste element til opdeling i søjler - og så er det jo fjollet at gøre alle mulige krumspring for at undgå dem i den slags situationer. Det kan kun resultere i større, mere uoverskuelig og dårligere kode.

Ja, du har helt ret i, scriptet kun virker i IE. Jeg havde overset den bug, der gør, det ikke kan virke i andet  :)
Da jeg forestille mig, det virkede i alle browsere, gik jag udfra, det var der årsagen til 1px-fejlen lå. Får jeg tid i løbet af dagen, skal jeg prøve at finde udaf, hvad det er, du gør galt  :)

Jeg er uenig i at tabulære data skal forstås som opstilling i synkroner søjler. Tabulære data er ting der hænger sammen - fx hænger label sammen med et input-felt.

Hvis siden skal vises på en anden platform, fx en pda-telefon eller lignende, så er det problematisk at siden er stillet op i en tabel, fordi visningen af siden på telefonen ikke vil være optimal. Her vil jeg foretrække, at den viser tingene under hinanden. Det kan tabeller ikke give mig.

Du har vel ikke nogle links direkte ind i w3c's white papers, så jeg kan læse lidt mere om, hvordan de anbefaler brugen af tabeller til at lave en sidebar?

Angående html / xhtml diskussionen, så ved jeg sikkert ikke nok om det. Jeg tjekker om browseren understøtter at jeg sender til den med xhtml, og så sætter jeg headers ud fra det. Mozilla får således serveret det som xhtml (og xhtml 1.1), mens ie får det som html (som xhtml 1.0 også må sendes med). Dette løser naturligvis ikke de problemer du skitserer i IE.

Nej, du server dit dokument som HTML til alle browsere - så det bliver altid tolket som HTML. Læs evt. disse to:
  http://www.eksperten.dk/artikler/537
  http://www.eksperten.dk/artikler/538

Det er muligt, du er uenig med mig i vendingen 'tabulære data'. Kollonner opstår ved tabullering - det er måden, man kommer fra én kollonne til den næste.
Men som sagt er det egentlig helt uinteressant, om man fundamentalistisk hænger sig i én tolkning af en sproglig vending. Hvad er det reelle problem? Hvorfor er det bedre at skulle skrive script og en hel bunke unødigt CSS, end at bruge en tabel?

Du vil gerne have, at dine elementer bliver vist over hinanden på en mobil, men det kræver jo, siden er kodet til det. Har du testet, din side kan vises på en mobil? Umiddelbart ville jeg tro, det er de færreste, der kan klare en bredde på 848px.

For det første har jeg ikke noget ét link til W3C's whitepapers. Dem er der rigtig mange af. For det andet, tror jeg, der er noget, du fundamentalt har misforstået omkring W3C.
De giver ikke løsninger på, hav du præcist skal bruge til en topbar, sidebar, eller salatbar. Derfor anbefaler de ingen steder noget somhelst element til en sidebar.

De kommer med generelle anbefalinger og forudsætter derefter at folk selv tænker. Det er ikke underligt, de fraråder de føromtalte 'sætterkasser' - men hvad er det præcist, der ellers gør tabeller dårlige?
Det har jeg endnu ikke set dokumentation på fra nogen af alle de web-mullaher, der udsteder den ene fatwa efter den anden over den stakkels tabel. Lad mig endelig høre, hvad det er, der gør dem dårlige - og jeg ser meget gerne en reproducerbar performance-test, hvis dårlig performance skulle være argumentet.

Se et øjeblik bort fra mobil-argumentet og fortæl mig så, hvorfor det er en skidt idé at bruge en tabel til søjleopdelingen.
Du forsøger at få koden til at opføre sig som en tabel - med de specielle egenskaber, den nu engang har. Du har skrevet meget mere kode, end nødvendigt, hvis du i stedet havde brugt en tabel og det hele lykkes alligevel ikke rigtig i Mozilla.
Fordelene ved en tabel er indlysende ... hvorimod de påståede bagdele fortoner sig religiøst mørke  :)

Hvad dit script angår, så vær glad for din bug. Uden den havde Mozilla forstået scriptet og forskellene havde været endnu større  :)
Du skal _altid_ bruge enheder på dimensioner i CSS ... også når disse sættes via script. Den rette syntaks er med andre ord:
  o.style.height = wantedHeight+"px";

- så forstår andre browsere end lige IE, hvad du skriver ... og så går endnu mere galt for dig. På den anden side er det en elendig idé at basere sine scripts på midlertidige browser-bugs.

Jeg mener nu bestemt, at jeg serverer siden med xhtml (se fx Mozillas Sideinformationer - der står i hvert fald hos mig xhtml).

Min side er tolket til at vises på en mobil. Vis fx siden i Opera vha. deres pda emulator :) Stylesheetet importeres, og det understøtter de ikke. Billedet i toppen er lagt ind med imagereplacement :)

Mht. w3c så var det et link til at de anbefaler tabeller til at lave et layout med kolonner der er lige høje, jeg gerne ville have. Jeg har forsøgt at tænke, og det er jo i den proces at jeg er kommet frem til, at jeg ikke vil bruge tabeller til layout. ... og jeg er vist ikke helt alene ude på det store internet :)

Mht. tabeller, så er det ikke performance, der afholder mig fra at bruge dem. Det der afholder mig fra at bruge dem er fx hensynet til skærmlæsere, der vil læse siden på en anden måde og at min side let skal kunne vises i fx en mobil. (det bliver lidt kunstigt, hvis man skal begynde at se bort fra argumenter, synes jeg - prøv du fx at se bort fra argumentet med mindre kode, så mangler du jo også et argument :))

Mit script er nu ikke baseret på en browserbug, men fordi jeg havde glemt px bagefter. Det virker nu på samme måde. Årsagen til at der i Mozilla ikke sker nogen ændringer af layoutet pba. scriptet er fordi Mozilla understøtter min-height, mens IE ikke gør. Jeg har lavet din ændring - og så vidt jeg kan se, så virker det på samme måde.

Den dumme pixel i Mozilla stammer ikke fra scriptet, men fra et eller andet med menuen, så vidt jeg kan gennemskue.

Jeg er i øvrigt enig i at et script ikke er den bedste løsning til et layoutproblem. Men det var den eneste måde jeg kunne løse det på, så længe jeg ville fastholde div-tags til at lave layoutboksene.

Jeg trækker mig på MIME-typen ... jeg havde set forkert, sorry  :)

Jeg kan ikke give dig ét link til et sted, hvor W3C anbefaler brug af tabeller til søjler, der er lige høje. Det er som sagt ikke måden, W3C arbejder på.
Uanset, det ligger i tiden, at smide om sig med Bibel- og Koran-citater, så kan man ikke bruge den slags til andet end religiøse spørgsmål. Virkeligheden udenfor religionerne er langt mere kompleks ... det gæder også WWW's religiøse retninger  ;o)
Hvis du er interesseret i nuanceret viden, må du selv igang med at læse - vil du have skråsikre oneliners, må du spørge andre steder - men så bliver du som oftest præseneteret for noget vrøvl. På det punkt afviger webkodning ikke ret meget fra andre fag.

Nej, bevisbyrden ligger ikke på mine skuldre ... med mindre du vil stille alt på hovedet.
Jeg argumenterer for at bruge et lovligt element. Det kræver ingen beviser på noget.
Du vil forbyde et lovligt element ... det kræver dokumentation for, hvorfor det er noget skidt at bruge det.
Mobilen kan jeg godt forstå som argument. Taler vi skærmlæsere, så kommer det helt anpå indholdet og dets opstilling og logiske sammenhæng. Heller ikke her er det muligt med oneliners. Livet _er_ komplekst.
Jeg læser dig, somom du er generel modstander af tabeller (med undtagelse af din ektremt snævre definition af 'tabulære data'). I det tilfælde finder jeg det helt naturligt og ukunstigt at bede dig se bort fra mobilargumentet et øjeblik. Det burde vel ikke skabe problemer med koncentrationen, eller ...?  :)

Jeg havde testet med en kopi, jeg havde lavet i IE ... derfor havde jeg ikke dit Moz-stylesheet til rådighed. Derfor forskellen med/uden 'px' i Moz  ;o)

Jeg er nu stadig ret overbevist om, den pixel ligger i forskellig tolkning af floats og clears  :)

- men XHTML-wise, så server du jo stadig et HTML-dokument, klædt ud som XHTML, når der f.eks. er tale om IE. Derved sætter du jo stadig IE'erne på heftigt og unødigt overarbejde  :)

Det er da rart med en saglig diskussion, hvor man ikke bare giver op. Jeg har læst rigtig meget på nettet på bl.a. alistapart.com, sitepoint.com, simon.incutio.com, positioniseverything.org osv. Jeg har også kigget flittigt på w3.org - og jeg bruger altid deres validator til at tjekke tingene igennem.

Gennem denne læsning er jeg blevet generel modstander af tabeller, men er dog begyndt at se anvendelsen af dem igen - fx til formularer, hvor man dog stadig kan argumenterer for at labels og inputs hører sammen, og det derfor kan forsvares at have dem i en tabel.

Årsagen til at jeg ville have dig til at komme med et link, er fordi du skriver følgende i dit første indlæg: "Bruger du - som W3C anbefaler - en tabel, når du skal oprette 'synkrone' søjler".

Det er godt formuleret at bevisbyrden er på min side angående table. Dog forbyder jeg ikke noget element, men ser bort fra det til at løse opgaven. Mit argument for at se bort fra det er netop mobile enheder og skærmlæsere - og at jeg så vil bruge en tabel, som efter min mening er beregnet til at vise data der har en indbyrdes sammenhæng - på et forkert sted. Det er bare derfor jeg har lidt vanskeligt ved at se bort fra argumentet :)

Jeg er med på, at livet _er_ komplekst :)

Jeg mener nu ikke at et xhtml-dokument alvorligt belaster browseren, så det skulle give brugeren problemer - men det er naturligvis værd at overveje. Jeg læser i øvrigt også flittigt med på: http://annevankesteren.nl/ - og hvis man kigger på hendes kode, så undlader hun endda html, head og body tags.

Dog mangler jeg stadig - tabel eller ej - at få siden centreret vertikalt :)

Ja, folk går ikke af vejen for noget, når det handler om at gøre sig interessant - og det er Anne jo et lysende eksempel på. Men hun kan da bruges til at eksemplificere, hvad jeg skrev om, at oneliners er ubrugelige (også) i web-sammenhænge. W3C skriver f.eks:
  "Every HTML document must have a TITLE element in the HEAD section."
- hvor ordet 'must' endda er fremhævet i fed:
  http://www.w3.org/TR/html401/struct/global.html#h-7.4.2

Det skriver de få linier efter at have konstaterert, at title-elementet er obligatorisk - og at head-elementet er valgfrit ...!!!  :)
Når ting bliver revet ud af deres rette sammenhæng, forsvinder meningen ofte. Det er der desværre en udbredt tendens til - samtidig med, at mange 'web-guruer' har det med at citere hinanden, fremfor at komme med kilder eller reproducerbare eksempler.

Det er dog ikke spor underligt at folk for tiden læner sig mod 'absolutter' i form af oneliners.
Den adfærd er ganske synkron med folks stigende higen efter religiøse 'absolutter' - og synkron med den stigende kompleksitet, der beskriver den verden, vi lever i. Selvom det er vidt forskellige udtryk, tror jeg, de har samme udspring ... frustrationer over verdens (øjensynligt stigende) kompleksitet.

Jeg forstår godt, du gerne vil have et enkelt link til ét sted på W3C, men det kan jeg ikke give dig. Du må tygge dig igennem masser af dokumenter og lange diskusioner for at få nuancerne med ... og det er jo netop dem, vi taler om her.

Vedr. om, hvorvidt XHTML-dokumenter belaster browseren, må jeg spørge dig, hvorfor du overhovedet overholder standarderne? Hvorfor lukker du f.eks. elementer?
Det gør du naturligvis for at gøre arbejdet lettere for browserne ... og det er jo hele meningen med, at vi på et tidspunkt skal overgå til XHTML.
Da det er HTML-parseren, der skal tolke dokumentet i IE (og andre, der endnu ikke forstår XHTML) - og denne ikke forstår, hverken DTD eller dine ' />' lukninger - skal alt dette først repareres, før siden kan parses. Det er ikke spor bedre end at lave alle mulige andre sjuskede 'HTML-svinestreger' ... herunder at undlade lukke-tags.
I øvrigt skal du også være opmærksom på, at du ikke kan bruge HTML-DOM i dine scripts. Ting som document.forms, document.images, document.write og innerHTML kan ikke bruges under XHTML. Det synes du dog at have styr på, da jeg kan se, du adresserer dine form-elmenter via DOM  ;o)

De sites, du henviser til, er rimelig saglige sites ... absolut nogen af de mest saglige. Flere af dem har dog en aura af 'religiøsitet', jeg har lidt vanskeligt ved at tackle og/eller tage seriøst.
Det glæder mig dog, du igen er ved at kunne se tabellernes muligheder og relevans. I fremtiden vil du forhåbentlig kunne se endnu flere situationer, hvor tabellen kan 'forsvares'.

Mellem to dybe grøfter ligger ofte en god vej  ;o)

Hehe, tabellerne har altid være relevante - jeg har aldrig hævdet andet :) De er relevantet til en passende kontekst. Fx bruger jeg jo heller ikke <strong> til at fremhæve en overskrift, men en <h1>. Men jeg forstår dine argumenter :)

Jeg lukker tags i xhtml af to grunde:
1. Gøre browseren glad
2. Ellers kan dokumentet ikke vises, når det serves som xhtml/xml

Angående oneliners køber jeg dog ikke helt dine påstande. Jeg tror gerne folk vil have gode argumenter - det er i hvert fald dem jeg selv søger. Ikke at bruge tabeller til layoutmæssige forhold er ikke mere en oneliner, end at man godt kan bruge tabeller til layout (som jeg ser det i hvert fald). Der hvor jeg har læst for og imod tabeller til layout har de saglige argumenter, synes jeg. Anne bruger også saglige argumenter, når hun viser noget - og så kan man så være enig eller uenig :)

Følgende er efter min mening endnu et argument for at <div> er et godt alternativ til tabeller - og på nogle punkter overlegen:

http://www.themaninblue.com/experiment/ResolutionLayout/

Det sidste link har relevans på en mobil-telefon eller PDA. I en browser er det katastrofalt ... intet mindre!

Hvis man bare har en smule æstetisk sans og ikke finder design/layout totalt uden betydning - og i tilfælde af blindhed, at ens førerhund ikke har glemt at gø - fatter jeg ikke, nogen kan begå den slags. Det ligner jo noget, der er klemt ud af den grimme ende på en kolikramt gnu!

I det hele taget fatter jeg ikke, man ikke skriver to versioner af markup'en. En til PC og en til små skærme. Det andet har man jo ingen kontrol over, hvordan ser ud.
Så vil jeg zq hellere se på et stenalder-dokument fra 1993. Det udgiver sig i det mindste ikke for at være designet - eller fra dette årtusinde  :)

Jeg tror, du misforstod, hvad jeg skrev om lukning af tags. Jeg mente i HTML-dokumenter.
Du lukker HTML-elementer for at please browseren - men dine XHTML-lukninger er ligeså dårlige for HTML-parseren som mangel på lukning af alm. HTML-tags ... og det ville du formodentlig regne for elendig kode  :)

I øjeblikket pleaser du en lille minoritet med XHTML, mens alle IE'er (og andre, der ikke forstår XHTML) må kæmpe med dårlig HTML-kode.
Ville det mon ikke være bedre at vente, til verden er klar til XHTML? Det er i hvert fald mit valg  :)

Hvad angår oneliners, så er pointen jo, at jeg ikke bruger oneliners. Jeg skriver netop, at du ikke kan læse den slags ét sted.
Det er som at prøve at forstå Kristendommen udfra et enkelt vers i Biblen. Jeg eksemplificerede endda ved at vise dig et eksempel på, hvordan W3C's rekommendationer er fyldt med fejl, hvis du læser dem som bibelske skriftsteder.

Nøjes du med at læse, hvad de skriver om title-elementet, må konklusionen være, at et HTML-dokument _skal_ indeholde et title-element, som _skal_ ligge i head-elementet ... ergo er head-elementet obligatorisk.
Sådan forholder det sig bare ikke - men det har man ikke kinamands chance for at vide, hvis man ikke får alle nuancerne med  :)

Jeg er uenig i at linket er katastrofalt. Det er et eksempel, og kan jo sagtens bruges i pænere layout.

Ellers er resten noteret :)

Svar venligst.

Smid gerne et svar.

Svaret kommer her. Det er muligt, det kan bruges ... jeg kan ikke bruge det til noget  =)