---

Jeg har et valideringsproblem med en menu-liste i HTML5. Og
jeg er i tvivl om, hvad der rent faktisk er tilladt, og hvad
der ikke er, for jeg har tidligere valideret samme kode uden
at få fejl.

Jeg har koden flere gange. I JavaScript med document.write,
hvilket ikke udløser en fejl, og i en <noscript>-blok,
hvilket i øjeblikket udløser en fejl:

Element div not allowed as child of element ul in this
context. (Suppressing further errors from this subtree.)


Jeg har en liste med indlagte div'er, i stil med:

<ul class="level2 baggrund1">
<div class="baggrund2">
<div class="undermenuplacering">
<li><span class="linkbaggrund"><a href="#"
class="linktekst"></a></span></li>
<li><span class="linkbaggrund2"><a href="#"
class="linktekst2"></a></span></li>
</div></div>
</ul>

Jeg har to sammensatte baggrundsbilleder bag den udfoldede
undermenu, hvoraf det ene fastsættes i ul og det andet i den
ene div. Den anden div bruges til at placere undermenuen, da
de enkelte undermenuer ikke skal placeres med samme afstand
til toppen.

Hvert menupunkt består af et billede og en baggrund i form
af et andet billede, indsat med span.

Jeg håber, I kan forstå, hvad jeg har gjort ud fra
ovenstående, da jeg desværre ikke umiddelbart kan give jer
et eksempel, da det er til webdesign-konkurrencen.

Har I en forklaring på den svingende validering og evt. et
forslag til, hvad jeg kan gøre?

Jeg vil lige tilføje, at menuen virker helt som ønsket i
IE8/9, Firefox, Opera, Chrome og til dels også i IE7, men
jeg vil jo gerne have det til at validere.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

---

On 13-02-2011 11:30, Kim Ludvigsen wrote:
> Jeg har et valideringsproblem med en menu-liste i HTML5. Og jeg er i
> tvivl om, hvad der rent faktisk er tilladt, og hvad der ikke er, for jeg
> har tidligere valideret samme kode uden at få fejl.
>
> Jeg har koden flere gange. I JavaScript med document.write, hvilket ikke
> udløser en fejl, og i en <noscript>-blok, hvilket i øjeblikket udløser
> en fejl:
>
> Element div not allowed as child of element ul in this context.
> (Suppressing further errors from this subtree.)
>
>
> Jeg har en liste med indlagte div'er, i stil med:
>
> <ul class="level2 baggrund1">
> <div class="baggrund2">
> <div class="undermenuplacering">
> <li><span class="linkbaggrund"><a href="#"
> class="linktekst"></a></span></li>
> <li><span class="linkbaggrund2"><a href="#"
> class="linktekst2"></a></span></li>
> </div></div>
> </ul>
>
> Jeg har to sammensatte baggrundsbilleder bag den udfoldede undermenu,
> hvoraf det ene fastsættes i ul og det andet i den ene div. Den anden div
> bruges til at placere undermenuen, da de enkelte undermenuer ikke skal
> placeres med samme afstand til toppen.
>
> Hvert menupunkt består af et billede og en baggrund i form af et andet
> billede, indsat med span.
>
> Jeg håber, I kan forstå, hvad jeg har gjort ud fra ovenstående, da jeg
> desværre ikke umiddelbart kan give jer et eksempel, da det er til
> webdesign-konkurrencen.
>
> Har I en forklaring på den svingende validering og evt. et forslag til,
> hvad jeg kan gøre?
>
> Jeg vil lige tilføje, at menuen virker helt som ønsket i IE8/9, Firefox,
> Opera, Chrome og til dels også i IE7, men jeg vil jo gerne have det til
> at validere.
>

Hej Kim.

Hvad sker der hvis du flytter:
<ul class="level2 baggrund1"> til efter <div class="undermenuplacering">

Altså:

<div class="baggrund2">
<div class="undermenuplacering">
<ul class="level2 baggrund1">
<li><span class="linkbaggrund"><a href="#"
class="linktekst"></a></span></li>
<li><span class="linkbaggrund2"><a href="#"
class="linktekst2"></a></span></li>
</ul>
</div></div>

JVF. http://www.sitepoint.com/forums/showthread.php?t=416432 - how to
put a DIV inside ul list?

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

On 13-02-2011 12:01, Karl Erik Christensen wrote:
> JVF. http://www.sitepoint.com/forums/showthread.php?t=416432 - how to
> put a DIV inside ul list?
>
> Karl Erik.
>

Hovsa, mit eksempel var vist lidt uovervejet. Svarene beskriver meningen
bedre - især det sidste fra Dan Schulz.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Karl Erik Christensen skrev:

> Hvad sker der hvis du flytter:
> <ul class="level2 baggrund1"> til efter <div
> class="undermenuplacering">

Det hjælper desværre ikke - jeg har ikke forklaret godt nok
i foregående indlæg, undskyld. Der er tale om en undermenu,
så div'erne vil stadig ligge i en ul, selvom jeg flytter dem
om på den anden side af undermenuens ul.

> Altså:
>
> <div class="baggrund2">
> <div class="undermenuplacering">
> <ul class="level2 baggrund1">

Det vil desværre give:
<ul id="level1">
<li>Overmenupunkt
<div class="baggrund2">
<div class="undermenuplacering">
<ul class="level2 baggrund1">

> JVF. http://www.sitepoint.com/forums/showthread.php?t=416432
> - how to put a DIV inside ul list?

Løsningen dér er at placere klassen på ul, og der render jeg
så ind i et problem, fordi jeg gerne vil have angivet to
billeder, og det kan jeg ikke.

Det vil sige, jeg kan i CSS3, men jeg skal bruge en løsning,
der også virker i IE7/8.

Måske det er muligt at lave et ekstra ul-niveau og så style
det?

Altså noget i stil med:
<ul id="level1">
<li>Overmenupunkt
<ul class="level2 baggrund1">
<ul class="baggrund2">
<ul class="undermenuplacering">
<li><span class="linkbaggrund"><a href="#"
class="linktekst"></a></span></li>

Men jeg kan ikke lige gennemskue, hvad det vil betyde for de
andre CSS-koder til menuen med hover osv.

Jeg er desværre ikke ret skrap til listemenuer, jeg plejer
at benytte denne fremgangsmåde til dropdown-menuer: Besøg
Jørgens hjemmeside, find en passende menu, kopier koder,
tilret koder.

--
Mvh. Kim Ludvigsen
Gør din hjemmeside mere intelligent, begynderguide om PHP:
http://kimludvigsen.dk/programmer-internet-kompozer-trin-php.php

---

Den 13-02-2011 12:40, Kim Ludvigsen skrev:

> Løsningen dér er at placere klassen på ul, og der render jeg så ind i et
> problem, fordi jeg gerne vil have angivet to billeder, og det kan jeg ikke.
>
> Det vil sige, jeg kan i CSS3, men jeg skal bruge en løsning, der også
> virker i IE7/8.

Her skal du måske overveje nogle ting.

Man vil gerne have, at tingene *virker* ens i de forskellige browsere.
Men det brtyder ikke, at det skal *se ens ud* imellem browserne.

Det er derfor, man bruger fallback i nutidige designs og ikke så meget
CC. For det er hammer dyrt at lave browserspecifikke designs. Man vil
ikke ødelægge selve usability, men udseendet kan være forskelligt fra
browser til browser. Læs: Baggrundsbilleder er pynt, og pynt skal laves
med fallback.

Og det, du vil, kan i mange tilfælde laves ved at bruge :before og
:after, som forstås af IE8.

Både :before og :after laver en anonym box (SVJV, så optræder den ikke i
DOM), tilknyttet hovedelementet, og du kan bruge denne box som enhver
anden box/HTML-element, også give den indhold som f.eks. et
baggrundsbillede. Hvad der er smart i dét er, at der ikke indføres en
ekstra HTML-element i selve HTMLen. Og at det er nemt at bruge et
baggrundsbillede som fallabck på hovedelementet i IE7.

Eks:

p{ background-image: url(background1.jpg)}
p:before{ background-image: url(background2.jpg)} /* anonym box, som
tilhører p */

På :before skal man så yderligere sætte en posistion:absolute og en left
på billedets bredde + hvor langt inde billedet skal være. top sættes som
normalt, da y på den anonyme box er 0 i forhold til hovedlementet. Der
skal sættes height og with, med mindre man også sætter billedet som
content, idét at en tom box ikke har dimension.

IE8 forstår både content, :before og :after. Det bør man udnytte, og
ikke tage efter laveste fællesnævner, som at forsøge at få alt
pixelnært. Pixelnært design hører fortiden til.

PS: Der bør som udgangspunkt altid være en overskrift til en
navigations-menu. Det kan gøres med H--tags, som er blevet kraftigt
udvidet i HTML5, men vidst også på andre måder.

PPS. DIVer giver ikke mening til ens design, og som sådan bør de undgås,
hvis man kan, hvor der skal være mening, og i stedet bruge relevante tags.


MVH
Rune Jensen

---

Anonymous skrev:
> Den 13-02-2011 12:40, Kim Ludvigsen skrev:
>
> Man vil gerne have, at tingene *virker* ens i de forskellige
> browsere. Men det brtyder ikke, at det skal *se ens ud*
> imellem browserne.

Det er det, som gør det så irriterende med min nuværende
løsning. Det virker faktisk ens og ser ens ud i alle
browserne. Eneste forskel er, at menuen har en lille fejl i
IE7, fordi den ikke automatisk lukker undermenuen, når man
ikke længere hover med markøren. Men det var til at leve med
- bedre end en fallback med amputeret udseende - hvis ellers
det validerede.

> Og det, du vil, kan i mange tilfælde laves ved at bruge
> :before og :after, som forstås af IE8.

Jeg vil prøve at kigge på det. I værste fald kan jeg vel
lave en CC til IE7 hvor der kun benyttes et enkelt
baggrundsbillede (se ulempen herved nedenfor).

> IE8 forstår både content, :before og :after. Det bør man
> udnytte, og ikke tage efter laveste fællesnævner, som at
> forsøge at få alt pixelnært. Pixelnært design hører fortiden
> til.

Lige netop de to baggrundsbilleder skal desværre placeres
nøjagtigt i forhold til hinanden, men det burde jo så heller
ikke være et problem, så vidt jeg kan forstå på dig.

Egentlig kunne jeg sagtens nøjes med et enkelt billede, men
siden er forholdsvis tung, og jeg sparer omkring 600 KB ved
at benytte to billeder i stedet for ét.

> PS: Der bør som udgangspunkt altid være en overskrift til en
> navigations-menu. Det kan gøres med H--tags, som er blevet
> kraftigt udvidet i HTML5, men vidst også på andre måder.

Problemet er, at vi er i en overgangsfase.

> PPS. DIVer giver ikke mening til ens design, og som sådan
> bør de undgås, hvis man kan, hvor der skal være mening, og i
> stedet bruge relevante tags.

Ja, men det nytter ikke noget at udelukkende benytte fx
<nav> til menuen. Man er nødt til at have fallback af hensyn
til ældre browsere. Og eftersom Microsoft har valgt at ikke
udsende IE9 til XP, vil vi desværre nok få en meget lang
overgangsfase.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

---

Den 13-02-2011 17:38, Kim Ludvigsen skrev:
> Anonymous skrev:
>> Den 13-02-2011 12:40, Kim Ludvigsen skrev:
>>
>> Man vil gerne have, at tingene *virker* ens i de forskellige
>> browsere. Men det brtyder ikke, at det skal *se ens ud*
>> imellem browserne.
>
> Det er det, som gør det så irriterende med min nuværende løsning. Det
> virker faktisk ens og ser ens ud i alle browserne. Eneste forskel er, at
> menuen har en lille fejl i IE7, fordi den ikke automatisk lukker
> undermenuen, når man ikke længere hover med markøren. Men det var til at
> leve med - bedre end en fallback med amputeret udseende - hvis ellers
> det validerede.

Mit problem med IE7 er - jeg har overhovedet ikke nogen erfaring med
den. Så jeg kan ikke hjælpe med det, hvis det skal være ens i IE7 også.


>> Og det, du vil, kan i mange tilfælde laves ved at bruge
>> :before og :after, som forstås af IE8.
>
> Jeg vil prøve at kigge på det. I værste fald kan jeg vel lave en CC til
> IE7 hvor der kun benyttes et enkelt baggrundsbillede (se ulempen herved
> nedenfor).

Jeg ville så meget gerne væk fra, man skal bruge CC i det hele taget;
Jeg synes, det er en uskik ;)

Jeg kan godt prøve at lave et eksempel med din menu, hvis det er.

Jeg har brugt metoderne med :before og :after en del gange nu.


> Lige netop de to baggrundsbilleder skal desværre placeres nøjagtigt i
> forhold til hinanden, men det burde jo så heller ikke være et problem,
> så vidt jeg kan forstå på dig.

IE8 har samme opfattesle af boks-modellen som alle de andre browsere
SVJV. Eneste forskel er ved fixed position, men det kan ordnes.


> Egentlig kunne jeg sagtens nøjes med et enkelt billede, men siden er
> forholdsvis tung, og jeg sparer omkring 600 KB ved at benytte to
> billeder i stedet for ét.

Så er du nok nødt til at komme med en URL. 600 kb lyder som om, der
sagtens kan optimeres.


>> PS: Der bør som udgangspunkt altid være en overskrift til en
>> navigations-menu. Det kan gøres med H--tags, som er blevet
>> kraftigt udvidet i HTML5, men vidst også på andre måder.
>
> Problemet er, at vi er i en overgangsfase.

Jeg ville nok snyde, og så give den en H-tag alligevel, selv om det er
imod HTML4 standard. Alt andet lige, så er det nemmere, hvis man bruger
en skærmlæser, man lige kan knokle igennem H-tagsne og så ved man hvor
menuen og de vigtigste overskrifter er. Mener at Dansk blindeinstitut
gør dette.


>> PPS. DIVer giver ikke mening til ens design, og som sådan
>> bør de undgås, hvis man kan, hvor der skal være mening, og i
>> stedet bruge relevante tags.
>
> Ja, men det nytter ikke noget at udelukkende benytte fx <nav> til
> menuen. Man er nødt til at have fallback af hensyn til ældre browsere.
> Og eftersom Microsoft har valgt at ikke udsende IE9 til XP, vil vi
> desværre nok få en meget lang overgangsfase.

OK, det er rigtigt nok.

Synes bare umiddelbart, du havde for mange DIVer. Men det er svæt at se
uden en URL til siden, så man kan se virkningen. Du kan jo have noget
helt andet, end jeg forestiller mig.

De 600kb tyder ikke på en standardmenu. Det samme med det med
document.write.


MVH
Rune Jensen

---

Anonymous skrev:
> Den 13-02-2011 17:38, Kim Ludvigsen skrev:

>> Jeg vil prøve at kigge på det. I værste fald kan jeg vel
>> lave en CC til
>> IE7 hvor der kun benyttes et enkelt baggrundsbillede (se
>> ulempen herved nedenfor).
>
> Jeg ville så meget gerne væk fra, man skal bruge CC i det
> hele taget; Jeg synes, det er en uskik ;)

Enig, men der er for mange ting, IE7 ikke kan. Så enten er
det laveste fællesnævner, eller også at servere særskilt
indhold til 7'eren.

> Jeg kan godt prøve at lave et eksempel med din menu, hvis
> det er.
>
> Jeg har brugt metoderne med :before og :after en del gange nu.

Det vil være rigtigt dejligt, jeg er totalt blank på området.

>> Egentlig kunne jeg sagtens nøjes med et enkelt billede,
>> men siden er
>> forholdsvis tung, og jeg sparer omkring 600 KB ved at
>> benytte to
>> billeder i stedet for ét.
>
> Så er du nok nødt til at komme med en URL. 600 kb lyder som
> om, der sagtens kan optimeres.

Det er netop ved at optimere, jeg sparer de 600 KB. Men du
har nok ret i, at det skal ses for at forstå, hvorfor det er
så tungt.

Siden er med i DM i Webdesign. Jeg kan godt give dig en url
i en mail, forudsat du ikke selv deltager, og du ikke har
tænkt dig at stemme i konkurrencen. I så fald, send mig en
mail, min adresse her virker.

> De 600kb tyder ikke på en standardmenu. Det samme med det
> med document.write.

Nej, det er ikke en standardmenu. Jeg har for en gangs skyld
prøvet at lege med grafik, hvor jeg ellers bare prøver at
smide tingene ind i nogle bokse - måske jeg er røget for
meget over i den anden grøft denne gang.

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php

---

Den 13-02-2011 18:17, Kim Ludvigsen skrev:
> Anonymous skrev:

>> Jeg kan godt prøve at lave et eksempel med din menu, hvis
>> det er.
>>
>> Jeg har brugt metoderne med :before og :after en del gange nu.
>
> Det vil være rigtigt dejligt, jeg er totalt blank på området.

OK, jeg seder en mail.


MVH
Rune Jensen

---

Den 13-02-2011 12:40, Kim Ludvigsen skrev:
> Karl Erik Christensen skrev:
>
>> Hvad sker der hvis du flytter:
>> <ul class="level2 baggrund1"> til efter <div
>> class="undermenuplacering">
>
> Det hjælper desværre ikke - jeg har ikke forklaret godt nok
> i foregående indlæg, undskyld. Der er tale om en undermenu,
> så div'erne vil stadig ligge i en ul, selvom jeg flytter dem
> om på den anden side af undermenuens ul.
>
>> Altså:
>>
>> <div class="baggrund2">
>> <div class="undermenuplacering">
>> <ul class="level2 baggrund1">
>
> Det vil desværre give:
> <ul id="level1">
> <li>Overmenupunkt
> <div class="baggrund2">
> <div class="undermenuplacering">
> <ul class="level2 baggrund1">
>
>> JVF. http://www.sitepoint.com/forums/showthread.php?t=416432
>> - how to put a DIV inside ul list?
>
> Løsningen dér er at placere klassen på ul, og der render jeg
> så ind i et problem, fordi jeg gerne vil have angivet to
> billeder, og det kan jeg ikke.
>
> Det vil sige, jeg kan i CSS3, men jeg skal bruge en løsning,
> der også virker i IE7/8.
>
> Måske det er muligt at lave et ekstra ul-niveau og så style
> det?
>
> Altså noget i stil med:
> <ul id="level1">
> <li>Overmenupunkt
> <ul class="level2 baggrund1">
> <ul class="baggrund2">
> <ul class="undermenuplacering">
> <li><span class="linkbaggrund"><a href="#"
> class="linktekst"></a></span></li>
>
> Men jeg kan ikke lige gennemskue, hvad det vil betyde for de
> andre CSS-koder til menuen med hover osv.
>
> Jeg er desværre ikke ret skrap til listemenuer, jeg plejer
> at benytte denne fremgangsmåde til dropdown-menuer: Besøg
> Jørgens hjemmeside, find en passende menu, kopier koder,
> tilret koder.
>

For megen ære

For så vidt angår sagen ville jeg satse
på Runes forslag med ::before, ::after.

Det kan bringes til at virke i IE<8 med
Dean Edwards' JavaScript Patch - se side 42
i
http://webdesign101.dk/css/css_selektorer.pdf

For så vidt angår validering af HTML-koden er
min mavefornemmelse at ul, ol, og dl kun må
indeholde li, dt og dd, og at content i
listen skal være indehold i en af disse.

Alt andet vil være noget semantisk roderi.
--
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Kim Ludvigsen sendte dette med sin computer:
> Jeg har et valideringsproblem med en menu-liste i HTML5. Og jeg er i tvivl
> om, hvad der rent faktisk er tilladt, og hvad der ikke er, for jeg har
> tidligere valideret samme kode uden at få fejl.
8X

Så vidt jeg lige kan se, er validering af HTML5 "experimental". Er
heller ikke lige klar over hvor meget HTML5 faktisk er færdigt..
Så validering af HTML5 er vel - ret beset -, ikke rigtigt noget man kan
regne med..?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen skrev:
> Kim Ludvigsen sendte dette med sin computer:
>> Jeg har et valideringsproblem med en menu-liste i HTML5.
>
> Så vidt jeg lige kan se, er validering af HTML5
> "experimental". Er heller ikke lige klar over hvor meget
> HTML5 faktisk er færdigt..
> Så validering af HTML5 er vel - ret beset -, ikke rigtigt
> noget man kan regne med..?

Det passer i hvert fald godt med, at samme kode tidligere
validerede fint.

Hvordan virker det egentlig med kode indsat via JavaScripts
document.write, medtages den ikke af validatoren? Eller det
er måske også et symptom på, at valideringen er eksperimentel?

Reelt set kan jeg i øjeblikket blot slette min kode i
<noscript>, så vil siden validere, men jeg vil gerne tilbyde
en fallback til de få promiller, der har slået JavaScript fra.

--
Mvh. Kim Ludvigsen
Undgå virus og andet snavs på computeren:
http://pc-sikkerhed.dk

---

Kim Ludvigsen formulerede spørgsmålet:
> Birger Sørensen skrev:
>> Kim Ludvigsen sendte dette med sin computer:
>>> Jeg har et valideringsproblem med en menu-liste i HTML5.
>>
>> Så vidt jeg lige kan se, er validering af HTML5
>> "experimental". Er heller ikke lige klar over hvor meget
>> HTML5 faktisk er færdigt..
>> Så validering af HTML5 er vel - ret beset -, ikke rigtigt
>> noget man kan regne med..?
>
> Det passer i hvert fald godt med, at samme kode tidligere validerede fint.
>
> Hvordan virker det egentlig med kode indsat via JavaScripts document.write,
> medtages den ikke af validatoren? Eller det er måske også et symptom på, at
> valideringen er eksperimentel?
>
> Reelt set kan jeg i øjeblikket blot slette min kode i <noscript>, så vil
> siden validere, men jeg vil gerne tilbyde en fallback til de få promiller,
> der har slået JavaScript fra.

Kode indsat vis JS bliver vist aldrig valideret.
Den eneste måde jeg kender, til at validere efter JS, er HTML
validatoren til FF, der kan "tage et billede", som den så validerer.
Den laver dog kuk i doctypen, så værdien af det er mildt sagt
begrænset.
Alternativet er at validere det du indsætter manuelt.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 13-02-2011 12:52, Birger Sørensen skrev:

> Kode indsat vis JS bliver vist aldrig valideret.

Prøv med Operas indbyggede validering. Måske den kan.

@Kim, Jvfr. document.write, så er det ikke en del af DOM, og det kan
sløve performance at indsætte tags/indhold på den måde, for der skal
laves en reflow/repaint for hver gang - blandt andre ting. Brug
documentfragment/appen.child eller hvad de hedder, og brug lazy loading
(indsæt på én gang og efter sidens ressourcer er loaded om muligt).
Client-side gruppen kan bruges - Birger ved med garanti svaret...

Iøvrigt er document.write ikke tilladt i XML, så hvis du sender din HTML
som application/XML, vil du med garanti få valideringsfejl.

HTML5 sendt som text/html udføres som HTML. Sendes det som
application/XML, udføres det som XHTML. Der er ingen speciel XHTML
deklaration ellers i HTML5 - så vidt jeg kan læse specifikationerne.

Der er iøvrigt IMO meget få steder, hvor document.write er nødvendigt.


MVH
Rune Jensen

---

Anonymous skrev:

> Prøv med Operas indbyggede validering.

Indbygget og indbygget. Den sender koden til W3's validator.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Den 13-02-2011 16:19, Bertel Lund Hansen skrev:
> Anonymous skrev:
>
>> Prøv med Operas indbyggede validering.
>
> Indbygget og indbygget. Den sender koden til W3's validator.

FF sender sidens URL til W3c, Opera sender sidens kode til W3c. Der er
en forskel, fordi validatoren i hvert fald ikke forstår JS. Så den tager
ikke ændringerne med, som JS laver. Det ved jeg ikke, om Opera gør, men
det er da nærliggende. Selv om HTMLen ændres via JS, så skal den jo
stadig validere, da den ellers kan skabe fejl, man ikke er klar over findes.

Web Developer til Chrome har noget, som hedder Validate HTML men også
én, som hedder validate local HTML. Local validation er sidens HTML som
den ser ud i browseren, der sender til validatoren, og burde egentlig
også virke på samme måde som Operas.


MVH
Rune Jensen

---

Anonymous skrev:

> FF sender sidens URL til W3c, Opera sender sidens kode til W3c. Der er
> en forskel, fordi validatoren i hvert fald ikke forstår JS. Så den tager
> ikke ændringerne med, som JS laver.

Kan JS ændre i koden?

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Den 13-02-2011 17:35, Bertel Lund Hansen skrev:
> Anonymous skrev:
>
>> FF sender sidens URL til W3c, Opera sender sidens kode til W3c. Der er
>> en forskel, fordi validatoren i hvert fald ikke forstår JS. Så den tager
>> ikke ændringerne med, som JS laver.
>
> Kan JS ændre i koden?

Ja, JS kan ændre i din HTML/indhold. Det kan ses ved bl.a. AJAX.

Men du kan ikke se ændringerne i view source, fordi JS er dynamisk, og
både nyt indhold og nyt HTML indsættes dynamisk.

Det, som du ser i view source er hvad der sendes fra serveren, og det er
den statiske kode.

Hvis du tilføjer en tag med document.write, så ændres der i HTMLen, og
den nye HTML bliver udført. Som jeg har forstået gør det, at hele HTMLen
bliver udført på ny, og at siden gentegnes.

Man kan samle alle ændringer i HTMLen og lave dem på én gang (SVJH med
documentFRAGMENT eller lign.), så skal der kun udføres ny HTML igen én
gang. Ellers skal det gøres ved hver document.write, og det er langsomt.

I Opera kan man SVJH bruge Dragonfly, så kan man travere ned ad DOMen,
og så kan man se ændringerne, som evt. er lavet via JS. I FF bruger man
vidstnok Firebug.

Anyone som er bedre til at forklare, er velkomne.


MVH
Rune Jensen

---

Anonymous skrev:

> Brug documentfragment/appen.child eller
> hvad de hedder, og brug lazy loading (indsæt på én gang og
> efter sidens ressourcer er loaded om muligt).

Jeg må erkende, at ovenstående er sort snak for mig. Men jeg
kan da fortælle, hvad jeg bruger document.write til. Jeg har
en høj menu placeret fixed på siden. For at undgå problemer
med indholdsruder, der er for lave til at vise hele menuen,
har jeg lavet en menu i mindre størrelse, og jeg vælger så
menu ved hjælp af JavaScript. Dels ved at vælge en anden
CSS-fil og dels ved at bruge andre HTML-koder.

I øjeblikket indsætter jeg alle HTML-koderne i menuen med
JavaScript, eftersom jeg ikke troede, det ville påvirke
hastigheden. Jeg kan se, at jeg kan begrænse indsættelsen af
HTML-koder, da det meste af det alligevel er ens og de
fleste forskelle ligger i CSS-filen, så jeg vil prøve at
optimere.

> Iøvrigt er document.write ikke tilladt i XML, så hvis du
> sender din HTML som application/XML, vil du med garanti få
> valideringsfejl.

Den sendes som HTML.

> Der er iøvrigt IMO meget få steder, hvor document.write er
> nødvendigt.

Jeg kan ikke se, hvordan jeg kan undgå det her, hvor jeg tre
steder vælger indhold efter højden. CSS-filen, dele af
menuen samt en overskrift. Men jeg er absolut begynder på
det her område, så det er ikke utænkeligt, at der er mange,
bedre løsninger. Det er første gang, jeg prøver at bruge
JavaScript til andet end simple regnestykker.

--
Mvh. Kim Ludvigsen
Undgå virus og andet snavs på computeren:
http://pc-sikkerhed.dk

---

Den 13-02-2011 17:20, Kim Ludvigsen skrev:
> Anonymous skrev:

>> Der er iøvrigt IMO meget få steder, hvor document.write er
>> nødvendigt.
>
> Jeg kan ikke se, hvordan jeg kan undgå det her, hvor jeg tre steder
> vælger indhold efter højden. CSS-filen, dele af menuen samt en
> overskrift. Men jeg er absolut begynder på det her område, så det er
> ikke utænkeligt, at der er mange, bedre løsninger. Det er første gang,
> jeg prøver at bruge JavaScript til andet end simple regnestykker.

Hvis du er rigtig grov, så sætter du en ID i body (f.eks. height_500 for
højden 500), og lader den være afgørende for indholdets dimensioner og
baggrunde på de forskellige classer.

Så behøver du bare ændre IDen med JS, og ikke alt det andet -
klassenavnene vil være de samme uanset, men deres deklarationer vil være
afhængig af, hvilken ID er valgt.

Det bør faktisk kunne virke, omend jeg ikke har lavet noget, der var
100% lig det før. Så hvis det er, skal det nok igennem clientside-gruppen.


MVH
Rune Jensen

---

Den 13-02-2011 15:30, Anonymous skrev:
> Den 13-02-2011 12:52, Birger Sørensen skrev:
>
>> Kode indsat vis JS bliver vist aldrig valideret.
>
> Prøv med Operas indbyggede validering. Måske den kan.

Det lader så ikke til, den kan det.

http://stackoverflow.com/questions/4686956/how-does-one-validate-html-thats-generated-from-js-running-in-the-browser


MVH
Rune Jensen

---

Den 13-02-2011 11:30, Kim Ludvigsen skrev:

> Jeg har to sammensatte baggrundsbilleder bag den udfoldede undermenu,
> hvoraf det ene fastsættes i ul og det andet i den ene div.

Det billede som skal være udenom, skal sættes i en ::before. Billedet
indeni skal sættes i ul. Dette vil så kun virke, hvis du kender højden
og bredden på billedet, da ::before-boksen ikke har dimensioner efter ul.

::before danner et element umuddelbart før ul, hvor du bruger DIVen til
at omslutte ul. Når du omslutter ul med en DIV, får DIVen dimensioner
efter ul. Det er sådan set det eneste minus ved at bruge ::before til at
lave ekstra bokse. Men ellers er det nemt at rykke ::before-boksen hen
på ul og give den samme dimensioner+padding, så effekten er den samme
som med DIV.



ul::before ul
-------------- ------------
| bgudenom | | bgindei |
| | | |
| | | |
| | ------------
| |
-------------- <------ højde og bredde uafhængig af ul



DIV
----------------------------- <--- Højde/bredde afhængig af ul
| bgudenom |
| ul |
| ----------------- |
| | bgindeni | |
| | | |
| | | |
| | | |
| | | |
| | | |
| ----------------- |
| |
-----------------------------


Jeg skal nok lave en specifik løsning (dog ikke i dag, da jeg er på vej
i seng), men dette er essensen i det.

Iøvrigt vær opmærksom på, du kan indsætte baggrunde på alle elementer,
også en evt. li, som omslutter ul.


MVH
Rune Jensen

---

Den 13-02-2011 11:30, Kim Ludvigsen skrev:
> Jeg har et valideringsproblem med en menu-liste i HTML5. Og jeg er i
> tvivl om, hvad der rent faktisk er tilladt, og hvad der ikke er, for jeg
> har tidligere valideret samme kode uden at få fejl.
>
> Jeg har koden flere gange. I JavaScript med document.write, hvilket ikke
> udløser en fejl, og i en <noscript>-blok, hvilket i øjeblikket udløser
> en fejl:
>
> Element div not allowed as child of element ul in this context.
> (Suppressing further errors from this subtree.)
>
>
> Jeg har en liste med indlagte div'er, i stil med:
>
> <ul class="level2 baggrund1">
> <div class="baggrund2">
> <div class="undermenuplacering">
> <li><span class="linkbaggrund"><a href="#"
> class="linktekst"></a></span></li>
> <li><span class="linkbaggrund2"><a href="#"
> class="linktekst2"></a></span></li>
> </div></div>
> </ul>
>
> Jeg har to sammensatte baggrundsbilleder bag den udfoldede undermenu,
> hvoraf det ene fastsættes i ul og det andet i den ene div. Den anden div
> bruges til at placere undermenuen, da de enkelte undermenuer ikke skal
> placeres med samme afstand til toppen.
>
> Hvert menupunkt består af et billede og en baggrund i form af et andet
> billede, indsat med span.
>
> Jeg håber, I kan forstå, hvad jeg har gjort ud fra ovenstående, da jeg
> desværre ikke umiddelbart kan give jer et eksempel, da det er til
> webdesign-konkurrencen.
>
> Har I en forklaring på den svingende validering og evt. et forslag til,
> hvad jeg kan gøre?
>
> Jeg vil lige tilføje, at menuen virker helt som ønsket i IE8/9, Firefox,
> Opera, Chrome og til dels også i IE7, men jeg vil jo gerne have det til
> at validere.
>

Jeg vil tror det skyldes at du ikke må bruge et block element inden i en
<ul>. Du skal nok bruge <span> i stedet for <div>. Også kan du eventuelt
ændre det i CSS med display:block så dine <span> kommer til at opfører
sig som et block element.

Så hvis jeg skulle komme med et bud må det være :

CSS :

..baggrund2, .undermenuplacering{
display:block;
}

HTML :

<ul class="level2 baggrund1">
<span class="baggrund2">
<span class="undermenuplacering">
<li><span class="linkbaggrund"><a href="#"
class="linktekst"></a></span></li>
<li><span class="linkbaggrund2"><a href="#"
class="linktekst2"></a></span></li>
</span></span>
</ul>

W3C validatoren er ikke i stand til at validere javascript output.
Så den kode du skriver med document.write bliver simpelhen ikke testet
så selvom den ikke er valid får du ikke nogen fejlbeskeder.

---

Den 14-02-2011 00:12, scootergrisen skrev:
> Den 13-02-2011 11:30, Kim Ludvigsen skrev:
>> Jeg har et valideringsproblem med en menu-liste i HTML5. Og jeg er i
>> tvivl om, hvad der rent faktisk er tilladt, og hvad der ikke er, for jeg
>> har tidligere valideret samme kode uden at få fejl.
>>
>> Jeg har koden flere gange. I JavaScript med document.write, hvilket ikke
>> udløser en fejl, og i en <noscript>-blok, hvilket i øjeblikket udløser
>> en fejl:
>>
>> Element div not allowed as child of element ul in this context.
>> (Suppressing further errors from this subtree.)
>>
>>
>> Jeg har en liste med indlagte div'er, i stil med:
>>
>> <ul class="level2 baggrund1">
>> <div class="baggrund2">
>> <div class="undermenuplacering">
>> <li><span class="linkbaggrund"><a href="#"
>> class="linktekst"></a></span></li>
>> <li><span class="linkbaggrund2"><a href="#"
>> class="linktekst2"></a></span></li>
>> </div></div>
>> </ul>
>>
>> Jeg har to sammensatte baggrundsbilleder bag den udfoldede undermenu,
>> hvoraf det ene fastsættes i ul og det andet i den ene div. Den anden div
>> bruges til at placere undermenuen, da de enkelte undermenuer ikke skal
>> placeres med samme afstand til toppen.
>>
>> Hvert menupunkt består af et billede og en baggrund i form af et andet
>> billede, indsat med span.
>>
>> Jeg håber, I kan forstå, hvad jeg har gjort ud fra ovenstående, da jeg
>> desværre ikke umiddelbart kan give jer et eksempel, da det er til
>> webdesign-konkurrencen.
>>
>> Har I en forklaring på den svingende validering og evt. et forslag til,
>> hvad jeg kan gøre?
>>
>> Jeg vil lige tilføje, at menuen virker helt som ønsket i IE8/9, Firefox,
>> Opera, Chrome og til dels også i IE7, men jeg vil jo gerne have det til
>> at validere.
>>
>
> Jeg vil tror det skyldes at du ikke må bruge et block element inden i en
> <ul>. Du skal nok bruge <span> i stedet for <div>. Også kan du eventuelt
> ændre det i CSS med display:block så dine <span> kommer til at opfører
> sig som et block element.
>
> Så hvis jeg skulle komme med et bud må det være :
>
> CSS :
>
> .baggrund2, .undermenuplacering{
> display:block;
> }
>
> HTML :
>
> <ul class="level2 baggrund1">
> <span class="baggrund2">
> <span class="undermenuplacering">
> <li><span class="linkbaggrund"><a href="#"
> class="linktekst"></a></span></li>
> <li><span class="linkbaggrund2"><a href="#"
> class="linktekst2"></a></span></li>
> </span></span>
> </ul>

Jeg synes stadig ikke man skal plastre sin side til med bloat for at
tækkes oldgammel teknologi på udseende. Folk er sgu ligeglad med
udseendet, de vil ha' indhold, ikke flot pynt.

Hvad hjælper det at bruge HTML5, så, hvis HTMLen alligevel er bloated
som i gamle dage med masser af fyldkode (pynten er i HTMLen, hvor den
bestemt ikke hører hjemme). Så har man intet vundet. XP vil holde ca.
5-10 år endnu, så lang tid vil jeg ikke vente på, folk de dropper IE7.
Jeg fatter heller ikke, at andre vil det.

Nogle statistikker:
http://www.fdim.dk/statistik/teknik/browserbarometer

<rant>
Der er alle muligheder i dag for at bruge en anden og bedre browser end
IE7. Chrome er 100 gange hurtigere, og både Firefox og Opera er tusind
gange mere brugervenlige - og så er Opera iøvrigt også hurtigere end IE
sådan helt generelt, og har været det vel siden version 9.5 eller så.
Drop dog det der Windows-crap bare for i kan "blære jer for vennerne" og
brug et rigtigt OS i stedet, så får i også en rigtig browser - gratis.
Linux Mint er gratis Linux OS og lige til at gå til, det kræver sgu ikke
meget hjerne, så kan i også få et lovligt system, som ikke er bloatware
og desuden stabilt, sikkert og med minimum af hukommelsesforbrug (LANGT
mindre forbrug end windoes og knaldende hurtigt i forhold til).
</rant>


> W3C validatoren er ikke i stand til at validere javascript output.
> Så den kode du skriver med document.write bliver simpelhen ikke testet
> så selvom den ikke er valid får du ikke nogen fejlbeskeder.

Del er korrekt nok. Og jeg havde misforstået, i og med at hvad der sker,
når man indsætter HTML via JS, det er at den umiddelbart oversættes på
DOM-træet, så man kan ikke rigtigt få fat i den HTML heller.


MVH
Rune Jensen

---

Anonymous skrev:
> Den 14-02-2011 00:12, scootergrisen skrev:

>> Jeg vil tror det skyldes at du ikke må bruge et block
>> element inden i en
>> <ul>. Du skal nok bruge <span> i stedet for <div>.

Span er desværre heller ikke tilladt. Jeg har prøvet at lege
lidt med :before, men det kniber med at få det til at virke
i både IE8 og andre browsere. Jeg prøver lige lidt videre,
før jeg vender tilbage om mere hjælp.

> Jeg synes stadig ikke man skal plastre sin side til med
> bloat for at tækkes oldgammel teknologi på udseende. Folk er
> sgu ligeglad med udseendet, de vil ha' indhold, ikke flot pynt.

Både og. Personligt går jeg også altid efter indholdet, men
jeg tror ikke, vi tegner flertallet. Men pynt skal
selvfølgelig ikke være det eneste, indholdet skal stadig
være interessant.

> <rant>
> Der er alle muligheder i dag for at bruge en anden og bedre
> browser end IE7.

Jo, men det hjælper jo ikke noget, når folk nu alligevel
bruger de gamle browsere. IE7 ligger stadig på op mod 25
procent, selvom det efterhånden er to år siden IE8 udkom.

På min nye side har jeg tænkt mig at bringe en besked til
IE7-brugerne om at opgradere, placeret i en gul bjælke
øverst på siden.

Det næste problem bliver så IE8, og der har Microsoft
desværre afskåret en stor del af brugerne i at opgradere til
den nyeste MS-browser.

--
Mvh. Kim Ludvigsen
Omfattende brugerguide for begyndere om ubuntu Linux:
http://kimludvigsen.dk/linux

---

Den 14-02-2011 16:24, Kim Ludvigsen skrev:
> Anonymous skrev:

>> Jeg synes stadig ikke man skal plastre sin side til med
>> bloat for at tækkes oldgammel teknologi på udseende. Folk er
>> sgu ligeglad med udseendet, de vil ha' indhold, ikke flot pynt.
>
> Både og. Personligt går jeg også altid efter indholdet, men jeg tror
> ikke, vi tegner flertallet. Men pynt skal selvfølgelig ikke være det
> eneste, indholdet skal stadig være interessant.

Kan man fuske på anden måde så for at få IE7 med?

Jeg har da nogle idéer, som jeg lige vil afprøve, men de er altså mere
far out end hacksne til IE8.


>> <rant>
>> Der er alle muligheder i dag for at bruge en anden og bedre
>> browser end IE7.
>
> Jo, men det hjælper jo ikke noget, når folk nu alligevel bruger de gamle
> browsere. IE7 ligger stadig på op mod 25 procent, selvom det efterhånden
> er to år siden IE8 udkom.

For mig var valget ikke svært, dengang jeg skulle opgradere, for jeg tog
beslutningen om Linux allerede da jeg så Vista første gang. Men kan da
godt forstå, folk vil holde fast i det vante, og XP var da også et fint
system (dengang). Så meget desto bedre er det da at opgradere til IE8 i
stedet for at hænge i på IE7. Når nu man _kan_ køre IE8 på XP.

Mht. de dér skilte med opgradering, så er jeg selvfølgelig enig i dem,
problemet er, det måske kan irritere nogle brugere. Mit forslag er at
lave det f.eks. som en del af de generelle nyheder på siden, at IE8 er
udkommet, og servér den nyhed kun for IE/XP-brugerne. Det er nok så
meget den dér banner, som stikker ud af sidens design bl.a. også under
drop-ie6-kampagnen, som folk ikke kan lide (tror jeg).

Det kan jo rent faktisk godt være uvidenhed, som gør det, da rigtigt
mange er ret ligeglade med deres OS, kun bruger det til Email og
Facebook og sådan. Sådan er nok halvdelen af min familie.


MVH
Rune Jensen

---

Den 14-02-2011 16:24, Kim Ludvigsen skrev:
> Anonymous skrev:
>> Den 14-02-2011 00:12, scootergrisen skrev:
>
>>> Jeg vil tror det skyldes at du ikke må bruge et block
>>> element inden i en
>>> <ul>. Du skal nok bruge <span> i stedet for <div>.
>
> Span er desværre heller ikke tilladt. Jeg har prøvet at lege lidt med
> :before, men det kniber med at få det til at virke i både IE8 og andre
> browsere. Jeg prøver lige lidt videre, før jeg vender tilbage om mere
> hjælp.

Nu har jeg testet, om man kunne sætte to billeder i en <ul> med
display:list-item og list-style-position:inside. Det kan man godt,
virker bare ikke i ie7 (heller ikke). Så jeg får nok ikke en løsning til
IE7, der er du nødt til at bruge HTML-tags til hjælp, og nu har jeg
kæmpet et par timer, så jeg opgiver IE7.

Som en start til løsning for IE8, kan du ikke lige fortælle, hvor du
nøjagtigt vil have flere baggrunde, så prøver jeg at lave en løsning til
det.                  

Det er nødt til at blive delt op i bidder, ellers bliver det for
uoverskueligt.

Men på denne:


<ul class="level2 baggrund1">
<div class="baggrund2">
<div class="undermenuplacering">
<li><span class="linkbaggrund"><a href="#"
class="linktekst"></a></span></li>
<li><span class="linkbaggrund2"><a href="#"
class="linktekst2"></a></span></li>
</div></div>
</ul>

hvad gør nøjagtigt hver ting?

baggrund1 er baggrund på øverste ul, SVJKS.

Hvad laver linkbaggrund og linkbaggrund2? Eller nærmere, hvad laver
<span> der...? Kan man ikke sætte den class på a-elementet?

Den, som hedder undermenuplacering - hvis den placerer en ny undermenu,
altså en ny inddeling af listepunkter, er det bedre at skifte den ud med
en <ul>. Der må gerne være en <ul> i en <li>. Noget a la:

<ul>
<li><a href="#">Hovedmenu, link 1</a></a>
<ul class="undermenuplacering">
<li><a href="#" class="linktekst">Undermenu, link1</a></li>
<li><a href="#" class="linktekst2">Undermenu, link2</a></li>
</ul>
</li>
<li><a href="#">Hovedmenu, link 2</a></li>
<li><a href="#">Hovedmenu, link 3</a></li>
</ul>


MVH
Rune Jensen

---

Den 14-02-2011 16:24, Kim Ludvigsen skrev:

> Span er desværre heller ikke tilladt. Jeg har prøvet at lege
> lidt med :before, men det kniber med at få det til at virke
> i både IE8 og andre browsere. Jeg prøver lige lidt videre,
> før jeg vender tilbage om mere hjælp.

Med fare for at gentage mig selv henviser
jeg til
http://code.google.com/p/ie7-js/
mere specifikt:
http://ie7-js.googlecode.com/svn/test/after.html
og
http://ie7-js.googlecode.com/svn/test/before.html

PS: Er det snyd, hvis du sender koden til mig
privat? Jeg får alligevel ikke tid til selv
at lave noget til konkurrencen, så jeg kan love
komplet diskretion. Vi behøver jo ikke at fortælle
nogen at jeg har givet en hånd med

--
Jørgen Farum Jensen
http://webdesign101.dk
..

---

Jørgen Farum Jensen skrev:

> PS: Er det snyd, hvis du sender koden til mig
> privat? Jeg får alligevel ikke tid til selv
> at lave noget til konkurrencen, så jeg kan love
> komplet diskretion. Vi behøver jo ikke at fortælle
> nogen at jeg har givet en hånd med

Jeg kan ikke tro, det er snyd. Man har vel lov at finde
hjælp/lære, hvor man kan, enten på hjemmesider i
nyhedsgrupper eller i mails. Men det kan Karl Erik sikkert
sige noget om.

Dog vil jeg mene, at man skal undgå sammenblanding af
interesser, hvorfor jeg tidligere spurgte Rune, om han
deltog eller havde planer om at stemme, inden han fik et
link til siden.

Jeg vil lige lege lidt videre i en dag eller to. Jeg tror,
jeg vil prøve at lave forskellige CSS-versioner, hvor jeg
benytter CSS3's mulighed for flere baggrunde, og så tilbyder
en eller to alternative versioner til henholdsvis IE7 og
IE8. Og her kan det så være interessant at bruge
:before/:after og det JavaScript, du nævner til 7'eren.

Jeg vender tilbage sikkert desperat tilbage.

--
Mvh. Kim Ludvigsen
Tips til hjemmesidesnedkeren:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php

---

Kim Ludvigsen skrev:
> Jeg har et valideringsproblem med en menu-liste i HTML5.

Tak til alle for hjælpen. Jeg har nu stykket en løsning
sammen, der virker, validerer, og som nedgraderer pænt i
ældre IE-versioner.

Jeg har benyttet CSS3's mulighed for flere
baggrundsbilleder, hvilket virker fint i alle nyere
browsere. Undtagelsen er naturligvis IE8 og ældre, der
simpelthen ignorerer background-angivelser med flere billeder.

Jeg har derfor først lavet en background-angivelse med et
enkelt billede, og så en med flere billeder. IE7/8 bruger
dermed den første angivelse, mens de andre browsere benytter
den anden angivelse:

..stil {
background: url(billede1) ...;
background: url(billede1) ..., url(billede2) ...;
}

Jeg bruger så en conditional statement til IE lt 9, der
indeholder :before-angivelser, og det virker nu fint i IE8.
Eftersom :before-baggrunden kun skal bruges i IE, er jeg
ovre problemet med, at :before placerede billedet
forskelligt i Firefox og IE.

Tilbage er IE7, der kun får vist det ene baggrundsbillede,
hvilket ikke er helt så kønt i dette tilfælde. Jeg
overvejede at bruge det fix, som Jørgen henviste til, men
dels fylder det 117 KB, og dels synes jeg egentlig, det er
fint, at IE7-brugere kan se, at der er forskel på deres
bedagede browser og nyere versioner. IE7-brugere kan i de
fleste tilfælde sagtens opgradere til 8'eren.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

---

Den 15-02-2011 11:02, Kim Ludvigsen skrev:

> Tilbage er IE7, der kun får vist det ene baggrundsbillede, hvilket ikke
> er helt så kønt i dette tilfælde.

http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php

....lader til andre kan bruge det, men jeg kan ikke lige sådan se,
hvordan han gør.

Man kan jo godt lave fydkode kun for IE7, men så er det bare vigtigt,
man nemt kan se, hvor det er, så man kan fjerne det, når tid er.

Jeg synes, det må være et af kritikpunkterne imod fyldkode til få
browsere, at det forstyrrer det samlede billede af koden, men i dette
tilfælde, hvis der er en hurtig fix (og det er jo vigtigt, man ikke selv
bruger tid på det), så havde jeg sgu nok smidt det på via en test på
user agent i serversiden.

Der er måske mere her:
http://www.google.com/search?q=%3Abefore+and+%3Aafter+in+ie#hl=da&xhr=t&q=:before+and+:after+in+ie7&cp=25&pf=p&sclient=psy&source=hp&aq=f&aqi=&aql=&oq=:before+and+:after+in+ie7&pbx=1&fp=66ef4e0ddb8fb16f


MVH
Rune Jensen

---

Anonymous skrev:
> Den 15-02-2011 11:02, Kim Ludvigsen skrev:
>
>> Tilbage er IE7, der kun får vist det ene baggrundsbillede,
>> hvilket ikke er helt så kønt i dette tilfælde.
>
> http://nanobox.chipx86.com/blog/2006/07/before-and-after-in-ie7-and-below.php
>
> ...lader til andre kan bruge det, men jeg kan ikke lige
> sådan se, hvordan han gør.

Det er i hvert fald sort snak for mig. Men jeg er udmærket
tilfreds med min nuværende løsning, og den kræver ikke andet
end en conditional statement og en ekstra CSS-fil.

Til pokker med IE7, omend layoutet mister lidt af ideen i
den browser. Jeg laver som tidligere nævnt en
opgrader-bjælke, hvor man kan klikke sig videre til en tekst
om, hvorfor man bør opgradere (sikkerhed og funktioner).

--
Mvh. Kim Ludvigsen
Standardoverholdende multimedia på hjemmesiden:
http://kimludvigsen.dk/tips-internet-websnedker-multimedia.php

---

Den 15-02-2011 11:51, Kim Ludvigsen skrev:

> Det er i hvert fald sort snak for mig. Men jeg er udmærket tilfreds med
> min nuværende løsning, og den kræver ikke andet end en conditional
> statement og en ekstra CSS-fil.

Det er i hvert fald langt bedre nu end før. Din HTML er faktisk helt
ren, dine spans er fjernet, og erstattet af meningsfuld kode ;)

Din JS er også blevet optimeret. Din idé med at dele egenskaberne i
selvstændige stylesheets er nok en del hurtigere end det, jeg foreslog
hvor det hele skulle ligge i ét stylesheet, så det ser fint uf.

> Til pokker med IE7, omend layoutet mister lidt af ideen i den browser.
> Jeg laver som tidligere nævnt en opgrader-bjælke, hvor man kan klikke
> sig videre til en tekst om, hvorfor man bør opgradere (sikkerhed og
> funktioner).

Hvis fallbacken til IE7 bare ikke ændrer meningen med siden, samt ikke
ændrer virkemåden (altfor drastisk), burde det være godt nok.

Et tip er at bruge :focus i menu-CSS, så man kan få brugere med, som
bruger tastatur. Det vil kræve, man flytter undermenuer væk, når de ikke
bruges med f.eks. margin-left: -999em, så kan man vise dem igen med
margin-left: 999em.

Operabrugere kan navigere sådan en menu via piletasterne, hvilket er ret
brugervenligt (og smart tænkt af Opera).



MVH
Rune Jensen

---

Den 15-02-2011 23:34, Anonymous skrev:

> Operabrugere kan navigere sådan en menu via piletasterne, hvilket er ret
> brugervenligt (og smart tænkt af Opera).

Nå, jeg testede lige - man kan allerede bruge din menu fuldt ud med
tasterne i Opera. Så er der bare de andre browsere.


MVH
Rune Jensen

---

Anonymous skrev:
> Den 15-02-2011 11:51, Kim Ludvigsen skrev:
>
>> Det er i hvert fald sort snak for mig. Men jeg er udmærket
>> tilfreds med
>> min nuværende løsning, og den kræver ikke andet end en
>> conditional statement og en ekstra CSS-fil.
>
> Det er i hvert fald langt bedre nu end før. Din HTML er
> faktisk helt ren, dine spans er fjernet, og erstattet af
> meningsfuld kode ;)

Men jeg har et andet problem, vist nok kun i Firefox. Kan
jeg få dig til at tjekke med en fuldstændig opfriskning af
siden, hvor du lægger mærke til, hvad der sker allerførst,
når siden skal renderes?

Når jeg gør det, får jeg i et kort glimt vist liste-bullets
til samtlige menupunkter. Også selv jeg slår bullets fra i
CSS. Visningen afhænger lidt af forbindelsens hastighed,
nogle gange er den der måske kun et par milllisekunder,
andre gange kan det vare op til 3 sekunder, indtil den
rigtige rendering af siden startes.

Det er kun bullets, der vises og på en helt hvid side, se
billede her:
http://kimludvigsen.dk/projekter/bullets.png

Det har ikke været sådan hele tiden, så jeg har lavet en
eller anden ændring, der forårsager det, og som sagt, så ser
jeg det kun i Firefox.

For øvrigt en anden "sjov" ting. I menuen i IE7 (kan ses i
IE8 i kompatibilitetsvisning) påvirker en farveangivelse på
body, hvordan menuen udfoldes. Prøv med Web Developer at
ændre farveangivelsen i body fra:
color:rgb(0, 0, 0);
til
color:#000;
og prøv så at køre musen ned og op over menuen, eller fra
siden ind over et menupunkt og så op. Den fatter jeg ikke.
Det tog en del tid at finde årsagen til den fejl.

> Et tip er at bruge :focus i menu-CSS, så man kan få brugere
> med, som bruger tastatur.

Det vil jeg prøve at overveje til den færdige side. Nu vil
jeg gerne have afsluttet bidraget til konkurrencen, der er
gået alt for lang tid, fordi der var for meget, jeg skulle
lære. Men det har da været sjovt.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

---

Den 16-02-2011 00:03, Kim Ludvigsen skrev:

> Men jeg har et andet problem, vist nok kun i Firefox. Kan jeg få dig til
> at tjekke med en fuldstændig opfriskning af siden, hvor du lægger mærke
> til, hvad der sker allerførst, når siden skal renderes?

Jeg kan ikke helt få det frem, som du siger, men jeg tror jeg kender
problemet.

Jeg kan ikke lige helt huske det 100%, så du må tage det med en gran
salt, men...

Javascript blokerer for indlæsning af andet, indtil det er hentet. Med
mindre andre ressourcer er sat i gang og er i gang, når der skal hentes
javascript, for så hentes de begge samtidig.

Det samme ses med CSS, og browserne opfører sig desværre ikke ens hvad
det angår. Så nogle har issues med CSS andre ikke.

Prøv at lave denne test:

Hent siden uden JS slået til. Er der stadig et problem?

Flyt din JS stylesheet valg ned til aller sidst i head. Ændrer det noget?

Der er flere løsninger, bl.a. kan man hente de dele ind, som ikke skal
bruges umiddelbart via AJAX (lazy loading). Men nogle gange kan det
alligevel ordnes ved bare at rykke rundt i koden.

Har du Firebug? Så installér PageSpeed og tag en profil af din side. Så
vil den fortælle, om du kan ændre nogle ting dér. Man kan SVJV lave de
samme numre med Chrome, hvis du har den.

Du har et ppar steder mere end stylesheet-valget, man måske også kunne
hente via lazy loading, fordi JS blokerer...

Jeg får denne i Firebug PageSpeed:

100% of the JavaScript loaded by this page had not been invoked by the
time the onload handler completed.

Hvilket vil sige, at samtlige dine Javascripts i princippet kan hentes
med AJAX.

Hvis du vil have de rigtige data fra Firebug kan jeg sende dem pr. mail,
de er ikke så interessante for andre.

Forklaringen til ovenstående er her:

http://code.google.com/intl/da/speed/page-speed/docs/payload.html#DeferLoadingJS


MVH
Rune Jensen

---

Anonymous skrev:
> Den 16-02-2011 00:03, Kim Ludvigsen skrev:
>
> Jeg kan ikke lige helt huske det 100%, så du må tage det med
> en gran salt, men...
>
> Javascript blokerer for indlæsning af andet, indtil det er
> hentet. Med mindre andre ressourcer er sat i gang og er i
> gang, når der skal hentes javascript, for så hentes de begge
> samtidig.

Jeg tror, du har ret. Jeg kan ikke gøre så meget ved
placeringen af JavaScriptet, men jeg kan prøve at flytte på
andre ting.

> Hvilket vil sige, at samtlige dine Javascripts i princippet
> kan hentes med AJAX.

Jeg har absolut ingen forstand på AJAX, så det må vente til
en anden gang. Jeg gør ikke mere ved siden nu, jeg har
allerede brugt alt for lang tid på den, fordi jeg har
skullet lære så meget nyt.

Jeg har selv Firebug installeret, men har endnu ikke fået
brugt udvidelsen så meget. Jeg har kun brugt plugin'ene
Yslow og Page Speed fra henholdsvis Yahoo og Google.

--
Mvh. Kim Ludvigsen
Stor guide til installation og brug af mailprogrammet
Thunderbird 3:
http://kimludvigsen.dk/programmer-internet-thunderbird.php

---

Den 16-02-2011 14:23, Kim Ludvigsen skrev:

> Jeg tror, du har ret. Jeg kan ikke gøre så meget ved placeringen af
> JavaScriptet, men jeg kan prøve at flytte på andre ting.

Første problem med document.write er at benytte DOM i stedet, prøv at
erstatte denne:

<script type="text/javascript">
var language = (navigator.language);
if($(window).height() < 540) {document.write(
"<link rel='stylesheet' href='style-small.css' type='text/css'>");}
else
{document.write(
"<link rel='stylesheet' href='style.css' type='text/css'>"); }
</script>
<noscript>
<link rel="stylesheet" href="style.css" type="text/css">
</noscript>


med:

<script type="text/javascript">
function loadcssfile(filename){
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)

if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}

if(window.height < 540) {
loadcssfile("style-small.css");
}
else{
loadcssfile("style.css");
}
</script>
<noscript>
<link rel="stylesheet" href="style.css" type="text/css">
</noscript>


Derefter er der det med framework. Prøv helt at fjerne henvisningen til
JQuery eller sætte den i remark, hvis ovenstående virker.

Hvis det ikke virker, kan du prøve at indsætte en defer="defer" i den
<script>, som henter JQuery. Det vil tvinge browseren til at hente JQery
ressourcen sammen med andre ressourcer (SVJKS på hvad folk skriver om
"defer").


MVH
Rune Jesen

---

Anonymous skrev:
> Den 16-02-2011 14:23, Kim Ludvigsen skrev:
>
>> Jeg tror, du har ret. Jeg kan ikke gøre så meget ved
>> placeringen af
>> JavaScriptet, men jeg kan prøve at flytte på andre ting.

Hej Rune

Du skal først og fremmest have tak for, at du stadig bruger
tid på det her, men jeg beholder min nuværende løsning. Se
også mit indlæg sendt samtidig som dit, hvor jeg beskriver
en løsning til at fjerne "glimtet". Jeg skal også til at
komme i gang med at lave noget indhold til siderne.

Jeg forstår ikke helt det, som du skriver, men problemet er,
at jeg har brug for at få JQuery indlæst som det første, da
det skal bruges for at kunne vælge den rette CSS-fil.

Og den er den forsinkelse, som du tidligere skrev, der får
Firefox til at tro, der ikke er CCS-koder og så begynde
renderingen uden.

Problemet er, at de forskellige browsere benytter
forskellige metoder til at udregne tilgængelig plads, så
selvom der var tale om samme højde i indholdsruden, kunne
forskellen mellem den rapporterede højde i Firefox og IE
sagtens være 50px.

Jeg kæmpede virkelig længe med dette, indtil jeg fandt ud
af, at JQuery får det til at virke pålideligt cross browser.

Jeg vil hellere end gerne undvære scriptet, for det fylder
77 KB (26 KB gzippet), og jeg bruger det udelukkende til at
udregne den tilgængelige højde.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

---

Den 16-02-2011 16:16, Kim Ludvigsen skrev:

> Jeg forstår ikke helt det, som du skriver, men problemet er, at jeg har
> brug for at få JQuery indlæst som det første, da det skal bruges for at
> kunne vælge den rette CSS-fil.

Ja... men min idé var at bruge "rigtig" JS i stedet for det lille JQuery
script, som du bruger til at hente CSSen. På den måde spare nogle kb
bl.a. samt undgå document.write, som jeg "hører" meget dårligt om.

> Og den er den forsinkelse, som du tidligere skrev, der får Firefox til
> at tro, der ikke er CCS-koder og så begynde renderingen uden.

Ja... for JQuery udfører ikke i sig selv kode som ændrer på siden, det
er en masse functions, som bare skal hentes. Desværre har du noget andet
kode, som er afhængigt af dit framework, det script, som henter din CSS,
og dén kode ændrer også på sidens struktur. Ellers kunne man sagtens
bruge AJAX til at hente frameworket. Hvis nu du ville bruge JQuery andre
steder. Så skulle man bare bruge "ren" JS til at hente CSSen.

> Problemet er, at de forskellige browsere benytter forskellige metoder
> til at udregne tilgængelig plads, så selvom der var tale om samme højde
> i indholdsruden, kunne forskellen mellem den rapporterede højde i
> Firefox og IE sagtens være 50px.

OK, det havde jeg ikke lige overvejet.

Men hvis du senere får lyst til at kigge på det, så spørg i client-side.
Alt hvad man kan lave med JQuery, kan man også lave med native JS.


MVH
Rune Jensen

---

Kim Ludvigsen skrev:

> Jeg tror, du har ret. Jeg kan ikke gøre så meget ved
> placeringen af JavaScriptet, men jeg kan prøve at flytte på
> andre ting.

Jeg prøvede at fjerne bullets ved at sætte en style hertil
op tidligt i headeren, men så var der blot noget andet af
indholdet, der blev vist for tidligt. Problemet må være, at
indhold bliver hentet før CSS-filen, og at browseren - i
dette tilfælde Firefox - straks begynder renderingen i
stedet for at vente på CSS-filen.

Hvis andre oplever lignende problem med indhold, der vises,
før siden endelig renderes, kan denne løsning bruges:

Tidligt i headeren, altså før indlæsning af JavaScripts og
CSS-fil, indsætttes:
<style type='text/css'>
html{visibility:hidden;}
</style>

I CSS-filen indsættes så:
html {visibility:visible;}

På den måde er alt usynligt, indtil CSS-filen er indlæst, og
sidens indhold er klar til at blive renderet.

--
Mvh. Kim Ludvigsen
Stor guide til installation og brug af mailprogrammet
Thunderbird 3:
http://kimludvigsen.dk/programmer-internet-thunderbird.php

---

Den 15-02-2011 11:02, Kim Ludvigsen skrev:

> Jeg bruger så en conditional statement til IE lt 9, der indeholder
> :before-angivelser, og det virker nu fint i IE8.

Hemmeligheden ved sådan noget er, at koden bliver så generisk som
muligt, og det lader til, det også er det, som du har gjort.

Jeg lavede engang nogle tests, hvor der er brugt text-shadow og rounded
corners i IE8 via before og after.

http://www.webdesigngruppen.dk/designteknik/soegeboks_tekst.asp

Her er idéen at man indætter en runding via en class, som så er via
before i IE og via CSS3 i andre browsere. Disse "enheder" skal så
arbejde selvstændigt fra andre deklarationer, så man kan plugge på hvor
man vil uden at tænke på, om de overlapper. Så her med en menu, skal
selve menu-delens funktioner være helt ens kode i IE og de andre
browsere. Kun pynten laves forskelligt.

Det er en ret langstrakt proces at lave generiske CSS-scripts, men
fordelen er jo, de kan benyttes på alle ens hjemmesider uden yderligere
redigering i koden. Man kan bare copy/paste.


MVH
Rune JEnsen

---

Den 15-02-2011 11:02, Kim Ludvigsen skrev:

> .stil {
> background: url(billede1) ...;
> background: url(billede1) ..., url(billede2) ...;
> }

Det er sgu smart nok tænkt.

Jeg forsøgte med CSS3-multiple background images-teknikken i IE8 engang,
og den droppede hele deklarationen med hvid skærm som resultat.
Hemmeligheden er selvfølgelig at lave en deklaration mere før
CSS3-deklarationen. Så er den første deklaration fallback fordi den
anden droppes automastisk i IE8.. Det dæmrer...


MVH
Rune Jensen