Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS icm formulier

7 antwoorden
  • Voor een nieuwe website ben ik bezig met een contact formulier. Het gaat allemaal prima, op een opmaakprobleem in Internet Explorer na. Ik maak gebruik van de volgende code voor een invoerveld: [code:1:0a080df6b4] <p>E-mail adres:</p> <input name="from" type="text" id="from" value="<?php echo $_GET['from'];?>"/> <br /> [/code:1:0a080df6b4] In Firefox en Opera komen 'E-mail adres' en het invoerveld netjes onder elkaar. Maar met Internet Explorer staat het invoerveld ongeveer 5 pixels naar rechts ingesprongen. Ik denk dat ik voor het invoerveld een waarde moet aangeven zodat dit niet gebeurt, maar hoe? Ik heb al iets geprobeerd als: [code:1:0a080df6b4] input { margin: 0 0 0 0px; } [/code:1:0a080df6b4] Helaas zonder succes. Het is voor het eerst dat ik een formulier probeer 'op te maken' met CSS. Wie kan mij helpen?
  • Wat is je bijbehorende CSS?
  • [quote:679d864615="berkery"]Wat is je bijbehorende CSS?[/quote:679d864615] Dat is inderdaad wel handig. Dit is de inhoud van de inhoud van de stylesheet: [code:1:679d864615] body { background: #B6B4B6 url(images/bg.png) repeat-x fixed; margin: 0; padding: 0 } #container { margin: 1em auto; width: 650px; text-align: left; background-color: white; border: 1px solid #AAAAAA } #header { height: 95px; width: 100%; background-repeat: no-repeat; background-position: 0 0; border-bottom: 1px solid #fff; position: relative; border: 1px none #AAAAAA } #menu { font: 60% verdana, arial; color: #FFFFFF; background-color: #000000; color: #272900; padding: 2px 0; margin-bottom: 10px } #menu ul { list-style-type: none; margin: 0 0 0 0px; padding: 0; list-style-type: none } #menu li { display: inline; padding: 0 10px } #menu li a { text-decoration: none; color: #FFFAF0 } #menu li a:hover { text-decoration: underline; } #rechts { float: right; margin: 0 5px 0 0; width: 165px; padding-left: 15px; font: 100% verdana, arial } #rechts a, #content a:hover, #content a:visited { text-decoration: underline; color: #FFFFFF; font-weight:normal } #content { margin: 0 190px 10px 5px; font: 100% verdana, arial; color: #000000 } #content a, #content a:hover, #content a:visited { text-decoration: underline; color: #000000; font: 100% verdana, arial; font-weight:normal } #footer { clear: both; color: #02737B; text-align: right; padding: 0px; font: 80% verdana, arial; margin: 0 10px 0 10px; border-top: 1px solid #AAAAAA } h1 { font: 80% verdana, arial; font-weight: bold; color: #A40008; margin: 0 0 0px 0 } h2 { font: 70% verdana, arial; font-weight: bold; color: #000000; margin: 10px 0 0 0 } p { font: 70% verdana, arial; color: #000000; margin: 5px 0 0px 0 } .date { font: 60% verdana, arial; color: #000000; margin: 0 0 5px 0 } .form { font: 70% verdana, arial; font-weight: bold; color: #000000; margin: 10px 0 0 0 } img { border:0; margin: 0 0 0 0 } .imagefloat { padding: 2px; border: 1px solid #AAAAAA; margin: 0 0 10px 0 } .header-title { font: 140% verdana, arial; font-weight: bold; color: #A40008; background-color: inherit; padding-left: 20px; padding-top: 10px; margin: 0 0 0 0 } .header-subtitle { font: 80% verdana, arial; color: #191919; background-color: inherit; padding-left: 20px; margin: 0 0 0 0 } .blogentry { margin: 0 0 20px 0 } .boxy{display:block} .boxy *{ display:block; height:1px; overflow:hidden; font-size:.01em; background:#000000} .boxy1{ margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px; border-left:1px solid #919191; border-right:1px solid #919191; background:#3f3f3f} .boxy2{ margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; background:#303030} .boxy3{ margin-left:1px; margin-right:1px; border-left:1px solid #303030; border-right:1px solid #303030;} .boxy4{ border-left:1px solid #919191; border-right:1px solid #919191} .boxy5{ border-left:1px solid #3f3f3f; border-right:1px solid #3f3f3f} .boxyfg{ background:#000000} .boxyh1 { font: 80% verdana, arial; font-weight: bold; color: #A40008; margin: 0 0 0 5px } .boxyp { font: 70% verdana, arial; color: #FFFFFF; margin: 5px 0 0 5px } [/code:1:679d864615]
  • Bij deze ook een screenshot van het probleem: [URL=http://img199.imagevenue.com/img.php?image=28404_form_122_402lo.jpg][img:618ccbc0a3]http://img199.imagevenue.com/loc402/th_28404_form_122_402lo.jpg[/img:618ccbc0a3][/URL] Bij 'content' heb ik dus in de stylesheet een marge aangegeven van 5 pixels vanaf de linkerzijde. Bij 'p' is de linkermarge 0 pixels. Dat ziet er zowel in IE en FF prima uit. Alleen de invoervelden staan dus te ver naar rechts in IE.
  • Wat voor doctype staat erboven en kun je niet een gestripte testcase online zetten? Helpt jezelf ook om het probleem te isoleren. Verder, als je aangeeft wat voor invulveld er komt, dan gebruik je het label-element. http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/formulieren/
  • Ik heb een testsituatie online geplaatst: << URL verwijderd, probleem is opgelost. >> Het document heeft de extentie .php omdat ik met een 'include' de agenda rechts op het scherm oproep. Bedankt voor de tip van het label-element. Daar zal ik zeker naar kijken.
  • Ik heb het gedownload en hetzelfde probleem gevonden. Omdat ik niet van inline styles houd, heb ik die verwijderd. Zonder de inline style bij de form was het probleem verdwenen. "Waarom", geen flauw idee. wimb

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.