Avatar billede nielsenmathias Nybegynder
22. oktober 2008 - 11:47 Der er 8 kommentarer og
1 løsning

Firefox + Vertikal scrollbar + child selector syntax

Hejsa.

Jeg har et problem med mine tabeller. Da de indeholder mange rækker og jeg har begrænset plads, anvender jeg vertikale scrollbars på tabellerne. Min tableheader skal desuden være fixed når jeg scroller, derfor bruger jeg klassikeren:

table>tbody {  /* child selector syntax which IE6 and older do not support*/
    overflow: auto;
    height: 250px;
    overflow-x: hidden;
    }

Mine tabeller har desuden mange kolonner, der gør horizontale scrollbars nøvendige. 

Mit problem er at firefox "embedder" den vertikale scrollbar i den sidste kolonne (pga førnævnte table>tbody child selector syntax). Det er sådan set fint nok, men det betyder også at den vertikale scrollbar ikke altid er synlig pga. mine horisontale scrollbars! Med andre ord skal jeg scrolle helt til højre før jeg kan se den vertikale scrollbar. I IE er scrollbaren lige til højre for tabellen, og den er altid "fast/fixed" - nøjagtig som jeg vil have det! 

For et eksempel på hvad jeg mener med "embedded" så tilgå
http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html
fra IE og FF for at se forskellen på placeringen af den vertikale scrollbar. Forfatteren nævner iøvrigt at "Mozilla self-induces display problems cramming the scrollbar into the last column, which can be corrected with advanced selector syntax." - hvis det er til nogen hjælp. 

Håber nogen har input. På forhånd tak! :)
Avatar billede olebole Juniormester
22. oktober 2008 - 12:36 #1
<ole>

Den løsning er kun værd at smide efter katten, der hyler i gården! Du skal have fat i en løsning, som bygger på en blanding af CSS og JavaScript. Det er langt bedre end en løsning, som bl.a. kræver de vigtigste dele af CSS er disabled i IE (quirks mode)

/mvh
</bole>
Avatar billede nielsenmathias Nybegynder
22. oktober 2008 - 12:57 #2
"Det er langt bedre end en løsning, som bl.a. kræver de vigtigste dele af CSS er disabled i IE (quirks mode)" -> er det table>tbody der kræver det?

Dette specifikke problem er faktisk løst hvis jeg sletter table>tbody. Så opstår der bare et andet problem, nemlig det at min table-header scroller med, når man scroller vertikalt - igen kun i Firefox.

Kender du til en skudsikker fixed table-header løsning?

Tak for input!
Avatar billede olebole Juniormester
22. oktober 2008 - 14:29 #3
Det er denne HTML-kommentar, som helt smadrer IE's overholdelse af CSS-standarden:

<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Det gør, at vedligeholdelsen af resten af koden på siden altid vil være et helvede, da CSS overholdes i resten af browserne. Derfor er 'løsningen' uden reel værdi ... det er ganske enkelt skodkode! Oven i købet giver en HTML-kommentar slet ikke mening udenfor dokumentets html-tags - og endda før DTD'en, som definerer, hvad der må anvendes i dokumentet  =)

"Kender du til en skudsikker fixed table-header løsning?" >> Nej, har jeg brug for den slags, skriver jeg det selv i et mix af CSS og JavaScript.
Jeg har endnu ikke set en såkaldt 'ren CSS-løsning' uden elendig 'hacking'. Den viste løsning er således _meget_ langt fra en 'ren CSS-løsning', da CSS som sagt bliver disabled i markedets ultimativt mest udbredte browser ... i kodens allerførste linje!
Avatar billede olebole Juniormester
22. oktober 2008 - 14:34 #4
- kommentarens indhold er jo ren og skær fordrukkent sludder:
    "This comment keeps IE6/7 in the reliable quirks mode"

'Reliable' ...?!!???!!! Jamen, det er jo for pokker _præcis_, hvad quirks mode _ikke_ er. Quirks mode er det stik modsatte af 'standard compliant mode', hvor tingene opfører sig som forventet. Derfor er quirks mode så 'unreliable', som noget overhovedet kan være!

Forfatteren er sikkert en god pølsemand eller blikkenslager, men koder burde han holde sig fra - og tutorials burde han straffes for at skrive!  ;o)
Avatar billede nielsenmathias Nybegynder
22. oktober 2008 - 14:52 #5
Haha

Løsningen kan iøvrigt sagtens være css/javascript - det er bare vigtigt at headeren bliver hvor den skal.

Min doctype er iøvrigt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Avatar billede olebole Juniormester
22. oktober 2008 - 14:59 #6
- den er rigtig elendig understøttet på WWW. Dernæst kræver den, du server dokumenterne korrekt, hvis XHTML overhovedet skal give mening - og at du scripter helt specielt. XHTML er jo et subset af XML, hvorfor du ikke kan scripte på samme måde, som du kan under HTML.

Denne DTD er nok mere realistisk at bruge de næste 3-5 år, til XHTML 2.0 engang bliver frigivet - og er understøttet:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Læs evt. om XHTML her:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538
Avatar billede nielsenmathias Nybegynder
22. oktober 2008 - 16:42 #7
ok, tak.

Hvad anbefaler du så jeg gør med min header i firefox hvis jeg ikke skal bruge table>tbody ?
Avatar billede olebole Juniormester
22. oktober 2008 - 16:50 #8
Ikke noget. Jeg ville aldrig forsøge at gøre det på dén måde eller med en lign. kode. Jeg ville skrive en helt ny JS/CSS widget fra bunden
Avatar billede nielsenmathias Nybegynder
06. november 2008 - 12:44 #9
lukker den her
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