[CSS] Accessible forms in IE, layout niet goed

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...

quote:

Evertt schreef op maandag 21 juli 2008 @ 00:50:
[edit] Te laat, ik kijk wel of ik de css kan terugbrengen tot 1 bestand.

En zorg deze keer dat je enkel relevante CSS/HTML overhoudt die het probleem illustreert

Anyhoe, ik ben naar bed

RobIII wijzigde dit bericht 21-07-2008 00:56 (54%)

'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

Dit duurt te lang, ik ga ook maar slapen.
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.

Evertt wijzigde dit bericht 21-07-2008 01:33 (23%)

quote:

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

quote:

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

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

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.
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.

Evertt wijzigde dit bericht 21-07-2008 14:59 (8%)

quote:

Evertt 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.
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

quote:

Evertt 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?

quote:

Evertt 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

quote:

Evertt 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

quote:

RobIII schreef op maandag 21 juli 2008 @ 15:07:
[...]

Luister dan ook meteen eppo


[...]

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.

quote:

[...]

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

quote:

[...]

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?

quote:

offtopic:
En het is relevant

offtopic:
Ik deed een poging tot engels.

Evertt wijzigde dit bericht 21-07-2008 15:44 (9%)

quote:

Evertt 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.

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?

quote:

Evertt 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

quote:

Evertt 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.)

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.

Evertt wijzigde dit bericht 22-07-2008 21:56 (13%)

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 )

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
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;}

quote:

imp4ct schreef op woensdag 23 juli 2008 @ 00:25:
IE 6.0 (Avant) : ok

ok?
Jij hebt zo te zien nog steeds hetzelfde probleem als ik, de labels van de nested fieldset verdwijnen:

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.
• 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