Black Friday = Pricewatch Bekijk onze selectie van de beste Black Friday-deals en voorkom een miskoop.

[CSS] Accessible forms in IE, layout niet goed

Pagina: 1
Acties:

  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Ik ben een tut aan het volgen over hoe je nette en accessible forms kan maken m.b.v. css.

http://www.sitepoint.com/article/fancy-form-design-css

Dit is goede duidelijke tutorial. Ze geven ook css-code mee om ervoor te zorgen dat IE het ook goed weergeeft. Maar toch kloppen een aantal dingen niet.

Ten eerste zet IE de labels+inputs allemaal wat verder naar rechts dan hoort, waardoor het lijkt alsof iemand er tabs voor heeft gezet ofzo en dat wil ik weg.
En ten tweede geven ze op de 6e pagina een code waarmee je sub-fieldsets in fieldsets kan zetten en ervoor zorgen dat het er goed uit ziet. In FF ziet het er ook perfect uit, maar in IE niet.

En voor beide van de bovenstaande problemen geven ze geen code mee om die te fixen in IE.
Of het kan natuurlijk weer een ontzettende domme fout van mij zijn weer, maar ik zit die al de afgelopen 3 uur te zoeken en ik kan hem niet vinden, dus ik denk ook niet dat ik hem nog ga vinden als die erin zit.

Dus ik vroeg mij af of iemand van jullie ook ooit die tut hebben gedaan en er wel uit kwamen, zoja, zou ik dan de css van het resultaat mogen zien?
Of vindt 1 van jullie die tut misschien sowieso wel interessant. Als jou het dan wel lukt, zou je mij dan misschien willen helpen?
Of als iemand een vergelijkbare manier om met css mooie forms te maken die ook mooi met required-sterretjes en error-messages werkt?

Bij voorbaat dank. :)

[edit]Ik bedacht me net te laat dat die titel eigenlijk niet goed is, veel te vaag, maar kan niet meer editten. Als een mod dat wil doen zou dat heel fijn zijn. :) Of als niemand er zich aan ergert dan maakt het niet uit.

[ Voor 7% gewijzigd door Evertt_IA op 20-07-2008 22:29 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Evertt_IA schreef op zondag 20 juli 2008 @ 22:28:
[edit]Ik bedacht me net te laat dat die titel eigenlijk niet goed is, veel te vaag, maar kan niet meer editten. Als een mod dat wil doen zou dat heel fijn zijn. :) Of als niemand er zich aan ergert dan maakt het niet uit.
Doe dan even een voorstel voor een titel, liefst via een TR (Afbeeldingslocatie: http://tweakimg.net/g/forum/templates/tweakers/images/icons/icon_hand.gif). Wij gaan die niet voor je verzinnen ;)

Verder mis ik relevante code of een (proof-of-concept achtige) site waarin je het probleem toont; nu blijft het gissen naar de oorzaak. Ik vermoed echter dat je een doctype mist ;)

edit:
En het voorstel dat je zojuist indiende via een TR slaat ook als een tang op een varken; try again :P Lama, heb al wat voor je verzonnen voor deze ene keer... ;)

[ Voor 38% gewijzigd door RobIII op 20-07-2008 22:41 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
nope, doctype is not the problem. :)
Ik zal de code wel even online zetten.
Kan wel even duren, want ik heb ondertussen zoveel zitten rommelen in de code dat het niet meer hetzelfde is als wat er in de tut staat.

Lol, zag ik te laat. Dankje iig. :P
[edit] Het gaat ook om IE7 hè:P

[ Voor 16% gewijzigd door Evertt_IA op 20-07-2008 22:43 ]


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Ok, sorry dat het wat lang duurde:
*euh, liever niet*
Dat is de code letterlijk van de tutorial.

[ Voor 26% gewijzigd door RobIII op 21-07-2008 00:14 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Dude! :X

Afbeeldingslocatie: http://tweakers.net/ext/f/7XTzXHhoZMiH8HYd4m2qjkaE/full.gif

....Euh, doe me een lol en maak er even een coherent ding van, er zijn nu 10(!!! :X ) css files met elk maar een paar regels code, 2 html's en een png in een zip op een host die stikt van de pop-ups/unders en andere meuk. Je kunt dit kleine beetje prima inline in je topic zetten m.b.v. code tags. Zorg dan meteen dat je enkel relevante(!!!) code post, strip alle overbodige meuk eruit. Hier heeft niemand zin in om in te gaan zitten graven en spitten, zeker niet als de pop-ups ons om de oren vliegen en we dik kans maken de verkeerde link aan te klikken en daarmee een bak malware danwel adware binnen te halen :X

Verder: heb je al eens gewoon alle margins en paddings nagelopen?

offtopic:
Verder had ik overigens liever een edit ( Afbeeldingslocatie: http://tweakimg.net/g/forum/templates/tweakers/images/icons/edit.gif ) gezien in plaats van een nieuwe post (i.v.m. topickick binnen 24 uur ), maar dat is je voor deze ene keer vergeven ;)

[ Voor 15% gewijzigd door RobIII op 21-07-2008 00:26 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
de reden dat er 10 css-bestanden zijn is omdat de tut dat ook doet. en ik dacht, ik neem de tut letterlijk over zodat dat fouten van mijn kant uitsluit.
Bovendien gaat het niet om code die fout is maar volgens mij om code die mist.
en ja ik heb geprobeert wat aan de margins en paddings te futselen, maar ik krijg het niet voor elkaar.
Dit is volgens mij de code waar het om gaat, de code die die lijst van checkboxes regelt:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
fieldset fieldset {  
margin-bottom: -2.5em;  
border-style: none;  
background-color: transparent;  
background-image: none;
}
fieldset fieldset legend {  
margin-left: 0;  
font-weight: normal;
font-style: none;
}
fieldset fieldset ol {  
position: relative;  
top: -1.5em;  
margin: 0 0 0 11em;  
padding: 0;
}
fieldset fieldset label {  
float: none;  
width: auto;  
margin-right: auto;
}


En voor IE:
code:
1
2
3
fieldset fieldset legend {  
top: 0;
}


en ik zal een andere host doen voor de upload:
http://home.planet.nl/~vanbr116/css%20forms.zip

[ Voor 5% gewijzigd door Evertt_IA op 21-07-2008 00:29 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Nu mis ik nog steeds gewoon een file of post met enkel relevante code. In je post hierboven ontbreekt de HTML en in de zipfile stikt het nog steeds van de CSS files waardoor het debuggen er niet makkelijker op wordt... Je moet je punt toch in een paar regels CSS en HTML duidelijk kunnen maken zonder daar een complete zipfile voor te hoeven posten :?

Als ik 2 minuten aan 't editen sla breng ik de (relevante!) HTML al terug tot:
XHTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        
        <!--[if lte IE 7]>  
        <style type="text/css" media="all">  
        @import "style-ie.css";  
        </style>
        <![endif]-->
        <title>Form test</title>
    </head>
    
    <body>
        <div id="container">
            <form action="example.php">
                <fieldset>
                    <legend><span>Contact Details</span></legend>
                    <ol>
                        <li>
                            <label for="name">Name: <em>*</em></label>
                            <input id="name" name="name" class="text" type="text" />
                        </li>
                        
                        <li>
                            <label for="email">Email address: <strong>This must be a valid email address</strong></label>
                            <input id="email" name="email" class="text" type="text" />
                        </li>
                        
                        <li>
                            <label for="phone">Telephone:</label>
                            <input id="phone" name="phone" class="text" type="text" />
                        </li>
                    </ol>
                </fieldset>
            </form>
        </div>
    </body>
</html>

Voeg nu je CSS nog even samen en strip daar alles uit wat niets met het probleem te maken heeft en je bent al stukken beter te helpen.

Overigens ook even het lezen waard: RobIII in "\[html/css] Div Layout"

[edit]
En na nog wat verder kijken... ik zie in de CSS op meerdere plaatsen dezelde dingen staan (fieldset li komt bijvoorbeeld al 3 keer voor). Nu is dat an sich geen probleem, maar het maakt het niet duidelijker....

[ Voor 73% gewijzigd door RobIII op 21-07-2008 00:52 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
De html is niet zo bijzonder, het zijn gewoon wat fieldsets en ordered lists met in elke li een label een en input.
En in form2.html staat in een fieldset een 2e fieldset wat de lijst met checkboxen weergeeft en die ziet er het foutste uit in IE en daar is dit de html van:

[code]<li>
<fieldset>
<legend><span>Occupation:</span></legend>

<ol>
<li>
<input id="occupation1" name="occupation1"
class="checkbox" type="checkbox" value="1" />
<label for="occupation1">Doctor</label>
</li>

<li>
<input id="occupation2" name="occupation2"
class="checkbox" type="checkbox" value="1" />
<label for="occupation2">Lawyer</label>
</li>

<li>
<input id="occupation3" name="occupation3"
class="checkbox" type="checkbox" value="1" />
<label for="occupation3">Teacher</label>
</li>

<li>
<input id="occupation4" name="occupation4"
class="checkbox" type="checkbox" value="1" />
<label for="occupation4">Web designer</label>
</li>
</ol>
</fieldset>
</li>[/code]


Voor de rest is het heel moeilijk om relevante code te geven omdat er, nogmaals, volgens mij geen specifieke fout is in de code. Alleen een missende aparte code voor IE omdat die dingen nou eenmaal anders weergeeft dan FF. Maar wàt er bij moet weet ik niet, want anders hoefde ik het niet te vragen.


[edit] Te laat, ik kijk wel of ik de css kan terugbrengen tot 1 bestand.

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Begin maar eens met je CSS op te schonen dan, want ik zie zo al op het fieldset element een paar keer een andere padding/margin staan...
Evertt_IA schreef op maandag 21 juli 2008 @ 00:50:
[edit] Te laat, ik kijk wel of ik de css kan terugbrengen tot 1 bestand.
d:)b En zorg deze keer dat je enkel relevante CSS/HTML overhoudt die het probleem illustreert ;)

Anyhoe, ik ben naar bed :w

[ Voor 54% gewijzigd door RobIII op 21-07-2008 00:56 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
'k Heb de tut zelf even snel doorlezen en persoonlijk staat hij mij enorm aan. 'k Heb vaak met forms geworsteld om ze mooi met <label> en <li> enz in goede vorm te krijgen, wat niet echt altijd goed lukte, vermits de CSS ervaring toch nog niet van zo'n hoog niveau is als ik in deze tut lees.

Hoe dan ook denk ik wel dat het mogelijk moet zijn om de fouten eruit te krijgen. Kijk naar het voorbeeld dat men aanhaalt bij LinkedIn, als het daar werkt, moet het ook hier werken, 't zal alleen wat zoeken zijn.

Ik ga deze topic allesinds volgen!! Weet nog niet of ik de tijd zal hebben om zelf relevante oplossingen aan te bieden, but I'll try :)

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Dit duurt te lang, ik ga ook maar slapen. :P
Ik zal morgen zeker niet vroeg zijn dus de code zal waarschijnlijk laat in de middag komen. :)

[edit]@bovenstaande post: ik ben blij dat je hem net zo interessant vind als ik. :P

[ Voor 23% gewijzigd door Evertt_IA op 21-07-2008 01:33 ]


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 11-11 10:24

Bosmonster

*zucht*

imp4ct schreef op maandag 21 juli 2008 @ 01:11:
'k Heb de tut zelf even snel doorlezen en persoonlijk staat hij mij enorm aan. 'k Heb vaak met forms geworsteld om ze mooi met <label> en <li> enz in goede vorm te krijgen, wat niet echt altijd goed lukte, vermits de CSS ervaring toch nog niet van zo'n hoog niveau is als ik in deze tut lees.

Hoe dan ook denk ik wel dat het mogelijk moet zijn om de fouten eruit te krijgen. Kijk naar het voorbeeld dat men aanhaalt bij LinkedIn, als het daar werkt, moet het ook hier werken, 't zal alleen wat zoeken zijn.

Ik ga deze topic allesinds volgen!! Weet nog niet of ik de tijd zal hebben om zelf relevante oplossingen aan te bieden, but I'll try :)
Forms blijven een van de lastigere dingen imho en deze tutorial is een mooie samenvatting.

Ik twijfel alleen nog een beetje in semantisch opzicht aan het plaatsen van het formulier in een OL. Fout is het op zich natuurlijk niet, maar ik vind het niet compleet stroken met de invoermogelijkheden van het formulier en het feit dat formulieren al hun eigen specifieke mogelijkheden hebben voor de beschrijving (fieldset/labels). Het voelt een beetje overbodig.

Maar das wel erg puristisch geneuzel waarschijnlijk :P

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
Bosmonster schreef op maandag 21 juli 2008 @ 10:49:
[...]


Forms blijven een van de lastigere dingen imho en deze tutorial is een mooie samenvatting.

Ik twijfel alleen nog een beetje in semantisch opzicht aan het plaatsen van het formulier in een OL. Fout is het op zich natuurlijk niet, maar ik vind het niet compleet stroken met de invoermogelijkheden van het formulier en het feit dat formulieren al hun eigen specifieke mogelijkheden hebben voor de beschrijving (fieldset/labels). Het voelt een beetje overbodig.

Maar das wel erg puristisch geneuzel waarschijnlijk :P
Hmm, ik denk dat het hier wel symantisch klopt vermits hij de velden in fieldsets zet, dus zit er ergens een "logische" volgorde is, voorzover die logisch kan zijn natuurlijk.
't Feit blijft dat er voor symantisch coden de regels niet echt 100% duidelijk zijn, spijtig dat hier nog geen W3C validator voor bestaat :)

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Je zal het niet geloven, maar na het samenvoegen van de css was het probleem van teveel ruimte tussen de li's verholpen, en daarna met wat tweaken lukte het ook om de lijst links te krijgen en om de labels achter de checkboxen goed te zetten.
Het hielp dus wel om de css samen te voegen, maakte alles een stuk overzichtelijker. :P
Ik dacht eerst, ik doe wel wat de tutorial doet, dan kan er niks fout gaan, maar wel dus. XD

Mààr er is nog wel een heel klein puntje waar ik nog niet tevreden over ben:
In IE namelijk zit er imo een te grote ruimte tussen de laatste input en de bottom-border van de fieldset, en het is mij nog niet gelukt om dat kleiner te krijgen.

Hier is de code met maar 2 css-bestanden, 1 algemene en 1 voor IE. Ik kon dat ook samenvoegen, maar ik dacht dat dit misschien toch overzichtelijker was voor debuggen.
http://home.planet.nl/~vanbr116/relevent.zip

En hier een live voorbeeld:
http://home.planet.nl/~vanbr116/relevent.html


[edit]Oeps, ik zie net dat het in IE6 nog niet goed is:
http://browsershots.org/s...71305f359796e3e88ce1c7b0/
En IE 5.5 ook niet.
Maar dat kan ik wel fixen denk ik.

[ Voor 8% gewijzigd door Evertt_IA op 21-07-2008 14:59 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Evertt_IA schreef op maandag 21 juli 2008 @ 14:21:
Je zal het niet geloven, maar na het samenvoegen van de css was het probleem van teveel ruimte tussen de li's verholpen, en daarna met wat tweaken lukte het ook om de lijst links te krijgen en om de labels achter de checkboxen goed te zetten.
Het hielp dus wel om de css samen te voegen, maakte alles een stuk overzichtelijker. :P
Ik dacht eerst, ik doe wel wat de tutorial doet, dan kan er niks fout gaan, maar wel dus. XD
Luister dan ook meteen eppo :P
Evertt_IA schreef op maandag 21 juli 2008 @ 14:21:
Mààr er is nog wel een heel klein puntje waar ik nog niet tevreden over ben:
In IE namelijk zit er imo een te grote ruimte tussen de laatste input en de bottom-border van de fieldset, en het is mij nog niet gelukt om dat kleiner te krijgen.
Again; al eens naar de paddings e.d. gekeken?
Evertt_IA schreef op maandag 21 juli 2008 @ 14:21:
Hier is de code met maar 2 css-bestanden, 1 algemene en 1 voor IE. Ik kon dat ook samenvoegen, maar ik dacht dat dit misschien toch overzichtelijker was voor debuggen.
http://home.planet.nl/~vanbr116/relevent.zip
En voor de 81ste keer; waarom post je die code nou niet gewoon in het topic :?
Evertt_IA schreef op maandag 21 juli 2008 @ 14:21:
En hier een live voorbeeld:
http://home.planet.nl/~vanbr116/relevent.html


[edit]Oeps, ik zie net dat het in IE6 nog niet goed is:
http://browsershots.org/s...71305f359796e3e88ce1c7b0/
En IE 5.5 ook niet.
Maar dat kan ik wel fixen denk ik.
Dat je uberhaupt IE5.5 nog wil ondersteunen... Dat ding is inmiddels 8 jaar oud en (ik zou het even moeten nakijken) nagenoeg 0,5 % in gebruik ofzo. Niet de moeite waard IMHO.

offtopic:
En het is relevant ;)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
RobIII schreef op maandag 21 juli 2008 @ 15:07:
[...]

Luister dan ook meteen eppo :P


[...]

Again; al eens naar de paddings e.d. gekeken?
Ja, ik heb naar me paddings gekeken en me margins, maar ik kreeg het niet voor elkaar. Wel als ik * {margin: 0; padding: 0;} deed, maar dan kwam de fieldset buitenbeeld en dat kon ik ook niet fixen. En daarna heb ik geen andere manier meer gevonden.
[...]

En voor de 81ste keer; waarom post je die code nou niet gewoon in het topic :?
Ja, maar als ik het in het topic post dan wordt het zo rommelig
[...]

Dat je uberhaupt IE5.5 nog wil ondersteunen... Dat ding is inmiddels 8 jaar oud en (ik zou het even moeten nakijken) nagenoeg 0,5 % in gebruik ofzo. Niet de moeite waard IMHO.
Ok, IE5.5 boeit me niet, maar IE6 wel. In IE8 klopt het btw ook niet helemaal. Kon je niet iets in html of css doen waardoor IE8 IE7 emuleert?
offtopic:
En het is relevant ;)
offtopic:
Ik deed een poging tot engels. :P

[ Voor 9% gewijzigd door Evertt_IA op 21-07-2008 15:44 ]


  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 15-11 15:25
Evertt_IA schreef op maandag 21 juli 2008 @ 15:43:
Ok, IE5.5 boeit me niet, maar IE6 wel. In IE8 klopt het btw ook niet helemaal. Kon je niet iets in html of css doen waardoor IE8 IE7 emuleert?
Ja, maar het toevoegen van een extra (nutteloze voor elke andere browser) regel is nou niet echt elegant. Meer een oplossing voor bestaande producten waarvoor checken of ie8 alles goed doet niet een optie is.

  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Hij doet het trouwens ook niet goed in Opera, moet ik me daar zorgen over maken of is dat ook maar 0,001% van de gebruikers? Of moet ik daar toch maar conditional comments van opzoeken?

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Evertt_IA schreef op maandag 21 juli 2008 @ 18:41:
Hij doet het trouwens ook niet goed in Opera, moet ik me daar zorgen over maken of is dat ook maar 0,001% van de gebruikers?
Kijk eens verder dan je neus lang is :X
Evertt_IA schreef op maandag 21 juli 2008 @ 18:41:
Of moet ik daar toch maar conditional comments van opzoeken?
Ik zou niet voor iedere *fart* terugvallen op conditional comments (overigens is dat een IE only ding v.z.i.w.)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Ok, ik geef het op.
Het werkt perfect in FF, bijna perfect in IE7 en acceptabel in Opera.
Het werkt voor geen meter in IE6 en ik heb geen flauw idee hoe ik dat moet fixen.

Als iemand de code wil hebben voor zichzelf of het resultaat wil zien:
http://home.planet.nl/~vanbr116/forms/relevent.html
http://home.planet.nl/~vanbr116/forms/relevent2.html
http://home.planet.nl/~vanbr116/forms/relevent.zip

[edit]Ben toch nog aan het debuggen, dus de html-pagina's kunnen er verneukt uit zien, maar de zip is nog gewoon intact.

[ Voor 13% gewijzigd door Evertt_IA op 22-07-2008 21:56 ]


  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 15-11 15:25
Opera 9.5 heb ik nog niet op css bugs kunnen betrappen, dus denk ik dat jouw code toch de fout bevat. Even een zipfile neerplempen is natuurlijk wel erg gemakzuchtig he. Reduceer het weer tot een testcase waar het probleem voorkomt met zo weinig mogelijk code (sowieso een goed plan om jezelf dat aan te leren), en post dan de (testcase) code in code tags.

Het ziet er namelijk niet rommelig uit als je in de code tags bijvoorbeeld code=html of code=css neerzet, waardoor de kekke syntax highlighter van GoT ook wakker wordt.

Om maar even de ouwe afgezaagde opmerking te plaatsen: dit is niet de afhaalchinees waar wij even jouw probleem helemaal fixen. (maar wij geven je wel extra sambal bij :P )

  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
Hmm, 'k ben even in de HTML en CSS gedoken van Evertt.
Nu vermits ikzelf geen (x)HTML fan ben heb'k het formulier ook even in HTML 4.01 strict gezet en de CSS ook wat anders aangepakt (niet echt drastisch)

My version : http://www.dev153.net/form/

IE 7.0 : ok
IE 6.0 (Avant) : ok
FF 3 : ok
Safari : ok
Opera: shitte :p

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[if !IE]> Copyright © 2007 - <? echo date('Y'); ?> by webtrix.be <![endif]-->
<html>
<head>
<base href="http://www.dev153.net/form/">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Description" content="default">
<meta name="Keywords" content="default">
<meta http-equiv="Pragma" content="no-cache">
<title>default</title>
<link rel="stylesheet" href="CORE/css/reset.css" type="text/css">
<link rel="stylesheet" href="CORE/css/main.css" type="text/css">
<!--[if lte IE 7]><link rel="stylesheet" href="CORE/css/main-ie.css" type="text/css"><![endif]-->
</head>
<body>
<!--[if !IE]> START container <![endif]-->
<div id="container">
  <!--[if !IE]> START global frame <![endif]-->
  <div id="frm">
    <!--[if !IE]> START middle_frame <![endif]-->
    <div id="frm_m">
      <div id="frm_m_form">
        <form action="example.php" method="POST">
          <fieldset>
            <legend><span>Contact Details</span></legend>
            <p>Required fields are marked with a <em>*</em></p>
            <ol>
              <li>
                <label for="name">Name: <em>*</em> <strong>This field is required</strong></label>
                <input id="name" name="name" class="text" type="text">
              </li>
              <li>
                <fieldset>
                  <legend><span>Occupation: <em>*</em> <small>Select at least 2</small> <strong>select at least 2</strong></span></legend>
                  <ol>
                    <li>
                      <input id="occupation1" name="occupation1" class="checkbox" type="checkbox" value="1">
                      <label for="occupation1">Docter</label>
                    </li>
                    <li>
                      <input id="occupation2" name="occupation2" class="checkbox" type="checkbox" value="1">
                      <label for="occupation2">Lawyer</label>
                    </li>
                    <li>
                      <input id="occupation3" name="occupation3" class="checkbox" type="checkbox" value="1">
                      <label for="occupation3">Teacher</label>
                    </li>
                    <li>
                      <input id="occupation4" name="occupation4" class="checkbox" type="checkbox" value="1">
                      <label for="occupation4">Web designer</label>
                    </li>
                  </ol>
                </fieldset>
              </li>
              <li>
                <label for="email">Email address: <em>*</em> <small>Valid email address</small> <strong>This field is required</strong></label>
                <input id="email" name="email" class="text" type="text">
              </li>
              <li>
                <label for="phone">Telephone:</label>
                <input id="phone" name="phone" class="text" type="text">
              </li>
            </ol>
          </fieldset>
          <fieldset class="alt">
            <legend><span>Delivery Address</span></legend>
            <ol>
              <li>
                <label for="address1">Address 1:</label>
                <input id="address1" name="address1" class="text" type="text">
              </li>
              <li>
                <label for="address2">Address 2:</label>
                <input id="address2" name="address2" class="text" type="text">
              </li>
              <li>
                <label for="suburb">Suburb/Town:</label>
                <input id="suburb" name="suburb" class="text" type="text">
              </li>
              <li>
                <label for="postcode">Postcode:</label>
                <input id="postcode" name="postcode" class="text textSmall" type="text">
              </li>
              <li>
                <label for="country">Country:</label>
                <input id="country" name="country" class="text" type="text">
              </li>
            </ol>
          </fieldset>
          <div><input class="submit" type="submit" value="Begin download"></div>
        </form>
      </div>
      <div class="clear"></div>
    </div>
    <!--[if !IE]> END middle_frame <![endif]-->
  </div>
  <!--[if !IE]> END global frame <![endif]-->
</div>
<!--[if !IE]> END container <![endif]-->
<div class="copyright">&copy; 2007 - <? echo date('Y'); ?> created by <a href="http://www.webtrix.be/"><span style="color: #181818; font-weight: bold;">Webtri</span><span style="color: #6BA242; font-weight: bold;">x</span></a></div>
</body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*HTML ELEMENT*/
body{} 

/*CONTAINER*/
#container{width:600px;  margin:30px auto 0 auto;} 

/*FRAME*/
#frm{}

/*FRAME MIDDLE*/
#frm_m{width:600px;} 

/*FRAME MIDDLE - FORM*/
#frm_m_form{width:600px;  margin:0 auto;  background-color:#FFF;}

#frm_m_form fieldset{float:left;  clear:both;  width:100%;  margin:0 0 1.5em 0;  padding:0; border:1px solid #BFBAB0;  background:#F2EFE9 url(http://home.planet.nl/~vanbr116/forms/gradient.png) repeat-x;} 
#frm_m_form fieldset em{font-weight:bold; color:#f00;} 
#frm_m_form fieldset legend{margin-left:1em;  padding:0 5px 0 5px;  color:#000000;  font-weight:bold; font-family:Verdana,Arial,Sans-serif; font-size:0.9em;}
#frm_m_form fieldset p{padding-left:1.37em;  font-size:0.7em; font-family:Verdana,Arial,Sans-serif;} 
#frm_m_form fieldset p em{font-size:1.33em;}

#frm_m_form fieldset ol{padding:1em 1em 0 1em;  list-style:none;} 
#frm_m_form fieldset ol li{float:left;  clear:left;  width:100%;  padding-bottom:1em;} 
#frm_m_form fieldset ol li label{position:relative; display:block; float:left;  width:150px;  margin-right:1em; font-size:0.7em; font-weight:normal; font-family:Verdana,Arial,Sans-serif;} 
#frm_m_form fieldset ol li label em{top:0;} 
#frm_m_form fieldset ol li label strong{position:absolute; left:330px; top:0.2em; width:19em; color:#C00; text-transform:uppercase;} 
#frm_m_form fieldset ol li label small{display:block; top:0.2em; width:19em; color:#090; text-transform:uppercase; } 

#frm_m_form fieldset ol li fieldset{margin-bottom:-25px;  border-style:none; background-color:transparent;  background-image:none;}
#frm_m_form fieldset ol li fieldset legend{margin-left:0;  font-weight:normal;  font-size:0.7em;} 
#frm_m_form fieldset ol li fieldset legend span{position:relative; font-family:Verdana,Arial,Sans-serif;} 
#frm_m_form fieldset ol li fieldset legend em{top:0;} 
#frm_m_form fieldset ol li fieldset legend strong{position:absolute; left:330px; top:0.2em; color:#C00; text-transform:uppercase;} 
#frm_m_form fieldset ol li fieldset legend small{display:block; top:0.2em; width:19em; color:#090; margin-bottom:-1.25em; text-transform:uppercase;}  
#frm_m_form fieldset ol li fieldset ol{position:relative; top:-1.1875em; margin:0 0 0 163px;  padding:0;}
#frm_m_form fieldset ol li fieldset ol li{margin:0px; padding:0px}
#frm_m_form fieldset ol li fieldset ol li label{display:inline; float:none;  width:auto;  margin-right:auto;}
#frm_m_form fieldset ol li fieldset ol li label em{top:0;} 
#frm_m_form fieldset ol li fieldset ol li label strong{position:absolute; left:24em; top:0.2em; width:19em; color:#C00;} 
#frm_m_form fieldset ol li fieldset ol li label small{display:block; top:0.2em; width:19em; color:#090;} 

#frm_m_form div {width:200px; margin:0 auto;}
#frm_m_form div input.submit{width:200px;}

/*RANDOM CLASSES*/
.clear{clear:both;  padding:0px;  margin:0px;} 

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
ok?
Jij hebt zo te zien nog steeds hetzelfde probleem als ik, de labels van de nested fieldset verdwijnen:
Afbeeldingslocatie: http://home.planet.nl/~vanbr116/screenshot.PNG

  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 15-11 15:25
Goed, ik heb de tutorial ook letterlijk gevolgd, en heb een paar interessante fouten gevonden die niet opgelost worden in de tutorial:
  • Verschillende margins en paddings worden niet gereset wat inconsistent gedrag veroorzaakt
  • De Padding-top die aan de ol wordt gegeven zorgt op een of andere manier dat IE dezelfde afstanden tussen de <li>'s aanneemt. Simpelweg de padding-top op 0 zetten en dezelfde waarde voor margin nemen lost het probleem op.
  • De span in legend zorgt ervoor dat in IE7 (niet in IE6) text wordt gewrapped (text op 2 regels). Een width zetten op de span in de ie only stylesheet lost dit op. Ik heb voor het gemak deze aangehouden op 10em omdat deze waarde vaker voorkomt in de tut. :P
  • Last but not least: de verdwijnende text in IE6 wordt veroorzaakt door de position:relative op de "fieldset fieldset ol". Deze simpelweg verwijderen zorgt ervoor dat de text weer verschijnt in IE6, en zorgt er ook voor dat het gedrag in de browsers consistenter is.
Waardoor we nu aan de interessantere vragen van dit topic komen:
  • Waarom verdwijnt de text in IE6 door position:relative (welke bug...)
  • Waarom wordt de top padding van de ol doorgegeven aan de list items in IE6 en IE7
Dit had je zelf ook best kunnen doen, door simpelweg css properties te verwijderen totdat je de boosdoener te pakken had. (remember: TESTCASE TESTCASE TESTCASE!).

Door daadwerkelijk de tut te volgen ipv copy paste en dan gaan editten, had je ook kunnen zien waar het fout ging.

Ik vind dit eigenlijk luiheid van jouw kant.


Mijn compleet voorbeeld (getest in IE6, IE7, Opera 9.51, FF3 en Safari 3)

IE only CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
legend {  
    position:relative;  
    left:-7px;  
    top:-0.75em; 
}
legend span {  
    margin-top:1.25em;
    width:10em; /* Tijdelijke IE7 word-wrap fix */
}
fieldset {  
    position:relative; 
}
fieldset ol {  
    margin-top:3.25em; /* Omgewisseld met padding-top voor funky IE behavior te voorkomen */
}
fieldset fieldset legend {  
    top: 0; 
}


CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
body {
    margin:20px auto;
    width:600px;
    font:13px/1.231 arial,helvetica,clean,sans-serif;
}
fieldset {
    position:relative; 
    float:left;  
    clear:left;  
    width:100%;  
    margin:0 0 -1em 0;  
    padding:0 0 1em 0;
    border-style:none;  
    border-top:1px solid #bfbab0;  
    background:#f2efe9;
}
fieldset.alt {  
    background-color:#e6e3dd; 
}
legend {
    padding:0;  
    margin:0; 
    color:#000000;  
    font-weight:bold; 
}
legend span {  
    position:absolute;  
    left:0.74em;  
    top:0;  
    margin-top:0.5em;  
    font-size:135%;
}
fieldset ol {
    padding:0 1em 0 1em;
    margin:3.5em 0 0 0;
    list-style:none; 
} 
fieldset li {  
    float:left;  
    clear:left;  
    width:100%;  
    padding:0 0 1em 0;
    margin:0;
} 
fieldset.submit {  
    float:none;  
    width:auto;  
    padding:1.5em 0 0 12em;
    margin:0;
    background-color:#ffffff;
}
label {
    position: relative;
    float:left;  
    width:10em;  
    margin-right:1em;
    padding:0;
}

/* Messages */
label em {  
    display: block;  
    color: #060;  
    font-size: 85%;  
    font-style: normal;  
    text-transform: uppercase;
}
label strong { 
    position: absolute; 
    left: 27em; 
    top: 0.2em; 
    width: 19em; 
    color: #C00; 
    font-size: 85%; 
    font-weight: normal;
    text-transform: uppercase; 
}
fieldset legend em, fieldset legend strong {
    position:absolute;
    top:4em;
    left:0px;
    color: #060;  
    font-size: 85%;  
    font-style: normal; 
    text-transform: uppercase;
}
fieldset legend strong {
    left: 27em; 
    width: 19em; 
    color: #C00;
    font-weight:normal;
}

/* Nested */
fieldset fieldset {  
    margin-bottom: -2.5em;  
    border-style: none;  
    background-color: transparent;  
    background-image: none;
} 
fieldset fieldset legend {  
    margin-left: 0;  
    font-weight: normal;
    width:10em;
    position:relative;
} 
fieldset fieldset ol {  
    top: -1.5em;  
    margin: 0 0 0 11em;  
    padding: 0; 
}
fieldset fieldset label {  
    float: none;  
    width: auto;  
    margin-right: auto;
}


HTML
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Form Test</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, handheld, projection">
        <!--[if lte IE7]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, handheld, projection"><![endif]-->
    </head>

    <body>
        <form action="example.php">  
            <fieldset>  
                <legend><span>Contact Details</span></legend>  
                <ol>
                    <li>  
                        <fieldset>  
                        <legend>Occupation: <strong>Select at least 2</strong><em>Select at least 2</em></legend>  
                            <ol>  
                                <li>  
                                    <input id="occupation1" name="occupation1" class="checkbox" type="checkbox" value="1">  
                                    <label for="occupation1">Doctor</label>  
                                </li>  
                                <li>  
                                    <input id="occupation2" name="occupation2" class="checkbox" type="checkbox" value="1">  
                                    <label for="occupation2">Lawyer</label>  
                                </li>  
                                <li>  
                                    <input id="occupation3" name="occupation3" class="checkbox" type="checkbox" value="1">  
                                    <label for="occupation3">Teacher</label>  
                                </li>  
                                <li>  
                                    <input id="occupation4" name="occupation4" class="checkbox" type="checkbox" value="1">  
                                    <label for="occupation4">Web designer</label>  
                                </li>  
                            </ol>  
                        </fieldset>  
                    </li>  
                    <li>  
                        <label for="name">Name: <em>required</em></label>  
                        <input id="name" name="name" class="text" type="text">  
                    </li>  
                    <li>  
                        <label for="email">Email address: <strong>This must be a valid email address</strong><em>required</em></label>  
                        <input id="email" name="email" class="text" type="text">  
                    </li>  
                    <li>  
                        <label for="phone">Telephone:</label>  
                        <input id="phone" name="phone" class="text" type="text">  
                    </li>  
                </ol>  
                </fieldset>  
                <fieldset class="alt">  
                    <legend><span>Delivery Address</span></legend>  
                    <ol>  
                        <li>  
                            <label for="address1">Address 1:</label>  
                            <input id="address1" name="address1" class="text" type="text">  
                        </li>  
                        <li>  
                            <label for="address2">Address 2:</label>  
                            <input id="address2" name="address2" class="text" type="text">  
                        </li>  
                        <li>  
                            <label for="suburb">Suburb/Town:</label> <input id="suburb" name="suburb" class="text" type="text">  
                        </li>  
                        <li>  
                            <label for="postcode">Postcode:</label>
                            <input id="postcode" name="postcode" class="text textSmall" type="text">  
                        </li> 
                         
                        <li>  
                        <label for="country">Country:</label>  
                            <input id="country" name="country" class="text" type="text">  
                        </li>  
                    </ol>  
                </fieldset>  
                <fieldset class="submit">  
                    <input class="submit" type="submit" value="Begin download">  
            </fieldset> 
        </form>
    </body>
</html>

[ Voor 7% gewijzigd door Kiphaas7 op 23-07-2008 12:27 ]


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
Kiphaas7 schreef op woensdag 23 juli 2008 @ 12:21:
Goed, ik heb de tutorial ook letterlijk gevolgd, en heb een paar interessante fouten gevonden die niet opgelost worden in de tutorial:
  • Verschillende margins en paddings worden niet gereset wat inconsistent gedrag veroorzaakt
  • De Padding-top die aan de ol wordt gegeven zorgt op een of andere manier dat IE dezelfde afstanden tussen de <li>'s aanneemt. Simpelweg de padding-top op 0 zetten en dezelfde waarde voor margin nemen lost het probleem op.
  • De span in legend zorgt ervoor dat in IE7 (niet in IE6) text wordt gewrapped (text op 2 regels). Een width zetten op de span in de ie only stylesheet lost dit op. Ik heb voor het gemak deze aangehouden op 10em omdat deze waarde vaker voorkomt in de tut. :P
  • Last but not least: de verdwijnende text in IE6 wordt veroorzaakt door de position:relative op de "fieldset fieldset ol". Deze simpelweg verwijderen zorgt ervoor dat de text weer verschijnt in IE6, en zorgt er ook voor dat het gedrag in de browsers consistenter is.
Waardoor we nu aan de interessantere vragen van dit topic komen:
  • Waarom verdwijnt de text in IE6 door position:relative (welke bug...)
  • Waarom wordt de top padding van de ol doorgegeven aan de list items in IE6 en IE7
Dit had je zelf ook best kunnen doen, door simpelweg css properties te verwijderen totdat je de boosdoener te pakken had. (remember: TESTCASE TESTCASE TESTCASE!).

Door daadwerkelijk de tut te volgen ipv copy paste en dan gaan editten, had je ook kunnen zien waar het fout ging.

Ik vind dit eigenlijk luiheid van jouw kant.


Mijn compleet voorbeeld (getest in IE6, IE7, Opera 9.51, FF3 en Safari 3)
'k Denk dat we hier nog altijd zijn om elkaar te helpen en dingen bij te leren. 'k Vind luiheid een beetje grof. Hoe dan ook, 'k ga straks even alles doornemen en mijn eigen code verder bewerken.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • alienfruit
  • Registratie: Maart 2003
  • Laatst online: 23:24

alienfruit

the alien you never expected

Ja, ik heb ook accessible forms alleen de submit knoppen worden vergalt in Firefox en Safari terwijl ze prima werken in IE :( Gelukkig moet de website alleen contractueel werken in IE :)

  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 15-11 15:25
imp4ct schreef op woensdag 23 juli 2008 @ 19:05:

'k Denk dat we hier nog altijd zijn om elkaar te helpen en dingen bij te leren. 'k Vind luiheid een beetje grof. Hoe dan ook, 'k ga straks even alles doornemen en mijn eigen code verder bewerken.
Had het ook niet tegen jouw maar tegen Evertt, ik krijg namelijk het idee bij Evertt dat hij even wat eraan doet, en zodra het niet werkt het hier neerplempt. Het enige wat ik heb gedaan is 20 minuutjes de tutorial doorgewerkt, in 5 browservensters constant gerefreshed na iedere stap en daarna de problemen gefixed.

Het minste wat hij had kunnen doen in mijn ogen was proberen het probleem te lokaliseren (de position:relative bijvoorbeeld, of de top-padding) en daarna hier te komen. Dit ook na meerdere (vriendelijke) verzoeken van verschillende personen hier.

Nu lijkt het er toch echt op dat hij snel de tutorial heeft gevolgd, alles hier heeft neergeplempd en hoopt dat iemand het werk voor hem doet onder het motto van: "Help de tutorial werkt niet helemaal zoals ik dat wil, fix dat even voor mij."

Overigens heb ik oplossingen aangedragen, en ook nog eens helemaal voorgekauwd hoe het moet....
alienfruit schreef op woensdag 23 juli 2008 @ 19:47:
Ja, ik heb ook accessible forms alleen de submit knoppen worden vergalt in Firefox en Safari terwijl ze prima werken in IE :( Gelukkig moet de website alleen contractueel werken in IE :)
Het gebruik van <button></button> is een stuk makkelijker(en consistenter in browsers) voor css(!) dan <input type="submit">.

[ Voor 15% gewijzigd door Kiphaas7 op 23-07-2008 20:51 ]


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
All right... na de post van Kiphaas7 en de oplossingen die hij gaf ben ik nog wat gaan rommelen in mijn CSS. En met nog wat aanpassingen hier en daar ben ik toch "vrij" tevreden met het resultaat.

Hoewel de css-IE file een beetje een rommeltje is geworden, maar goed 't werkt, opkuisen kan later nog.

'k Ga de hele CSS code enzow niet meer plaatsen.

FF 2.xx (zou in orde moeten zijn, maar na update naar 3.0 kan'k dat niet meer bekijken)
FF 3 - OK
IE 6.0 - OK
IE 7 - OK, hoewel de padding van de geneste <fieldset> - <ol> list hier wat verschilt met IE 6
Opera - Top padding van de genest <fieldset> is een beetje te hoog, ga hier nog iets proberen op te vinden
Safari - idem probleem als Opera

Morgen nog wat verder prullen, hoop dan een "all round" werkend model te hebben.

URL : http://www.dev153.net/form/

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Ok, ik denk dat ik me excuses moet aanbieden.
Ik had eerst alleen geen idee hoe ik dat moest debuggen, dus ik wist ook niet echt hoe ik het het makkelijkst kon neerzetten voor jullie zodat jullie het makkelijk konden debuggen.
Eigenlijk heel dom van me, want het was idd gewoon code weghalen tot het probleem zich niet meer voordeed. Daardoor ben ik erachter gekomen dat IE6 die labels achter die checkboxen het liefst in display: static; heeft anders verdwijnt die tekst dus gewoon. :s

Nu ziet het er allemaal goed uit in FF, IE7 en IE6. In Opera ziet het er niet super uit, maar nog acceptabel dus dat laat ik maar zo.

Iedereen hartstikke bedankt voor de effort! :)

  • Eijkb
  • Registratie: Februari 2003
  • Laatst online: 15-11 09:05

Eijkb

Zo.

Ik zie verder niets m.b.t navigatie (tab volgorde), controle op invoer. Dus i.p.v accessible forms zou dit "mooie formulieren" moeten heten. Qua bruikbaarheid is er niets veranderd.

.


  • imp4ct
  • Registratie: November 2003
  • Laatst online: 29-10 10:59
Eijkb schreef op donderdag 24 juli 2008 @ 15:39:
Ik zie verder niets m.b.t navigatie (tab volgorde), controle op invoer. Dus i.p.v accessible forms zou dit "mooie formulieren" moeten heten. Qua bruikbaarheid is er niets veranderd.
Hmm vind ik toch een beetje een rare opmerking. Controle invoer is hier een beetje nutteloos vermits forms zoveel verschillende soorten input kunnen hebben dat het een beetje TE uitgebreid wordt om dat ook nog toe te lichten.

't Probleem ... ook in de topic was de "layout" dus jah.. dat is waar het topic zich dus op focused

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600


  • Kiphaas7
  • Registratie: Februari 2005
  • Laatst online: 15-11 15:25
Evertt_IA schreef op donderdag 24 juli 2008 @ 15:15:
Daardoor ben ik erachter gekomen dat IE6 die labels achter die checkboxen het liefst in display: static; heeft anders verdwijnt die tekst dus gewoon. :s

Nu ziet het er allemaal goed uit in FF, IE7 en IE6. In Opera ziet het er niet super uit, maar nog acceptabel dus dat laat ik maar zo.

Iedereen hartstikke bedankt voor de effort! :)
Display static is default gedrag, dus die expliciet defineren is niet nodig. :)

En mijn versie ziet er in opera er wel goed uit, ik neem tenminste aan dat je test in 9.5?

  • Evertt_IA
  • Registratie: April 2008
  • Laatst online: 02-05-2021
Kiphaas7 schreef op donderdag 24 juli 2008 @ 22:24:
[...]


Display static is default gedrag, dus die expliciet defineren is niet nodig. :)
Maar als je het eerst op block hebt gezet moet je het later wel handmatig terugzetten naar static. :P
En mijn versie ziet er in opera er wel goed uit, ik neem tenminste aan dat je test in 9.5?
Ik test met browsershots.org, dus ik test 9.23 t/m 9.51
Pagina: 1