• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Opgelost Formulier werkt niet in verschillende browsers

Status
Niet open voor verdere reacties.

markvelde

veldesign
Lid geworden
9 aug 2006
Berichten
818
Waarderingsscore
6
Hallo,



In html formulier gemaakt en opgemaakt met css3.
Naast de tekst staan de besteltypes in Firefox netjes onder elkaar.
IE verschuift bepaalde items.
Van alles geprobeerd maar krijg het niet voor elkaar.
Kom er niet uit,

Alvast bedankt voor het meedenken
HTML:
<form>
    <p><span class="cijfer">1 </span> Think and Grow Rich (Napoleon Hill)
      <input id="kaartjes" name="Kaartjes" type="number"  value="0" min="0" max="10">
      <label for="Kaartjes">Maximaal 10 exemplaren: </label>
  </form>
  <form>
    <p><span class="cijfer">2 </span> De Kleine Prins (Antoine de Saint-Exupéry)
      <input id="kaartjes" name="Kaartjes" type="number"  value="0" min="0" max="3">
      <label for="Kaartjes">Maximaal 99 exemplaren: </label>
  </form>
  </p>
  </form>
  <form>
    <p><span class="cijfer">3 </span>Droom van de rode kamer (Cao Xueqin)
      <input id="bereik1" type="range" min="0" max="15" step="5" list="bereik-lijst">
      <label for="bereik1">Bestel 5,10 of 15 exemplaren: </label>
      <datalist id="bereik-lijst">
        <option value="0" label="0">
        <option value="1" label="5">
        <option value="2" label="10">
        <option value="3" label="15">
      </datalist>
    </p>
  </form>
  <form>
    <p><span class="cijfer">4 </span>Harry Potter en de Steen der Wijzen (J.K. Rowling)
      <label for="opt">20 </label>
      <input id="opt" type="radio" name="mw" value="3">
      <label for="opt">10 </label>
      <input id="opt" type="radio" name="mw" value="2">
      <label for="opt">1 </label>
      <input id="opt" type="radio" name="mw" value="1">
    </p>
  </form>
  <form>
    <p><span class="cijfer">5 </span>Da Vinci Code (Dan Brown)
      <select name="stijl" id="stijl">
        <option value="geen">Geen</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </p>
  </form>
CSS:
@charset "utf-8";
body {
    
}
header {
    padding-bottom: 1em;
    
}
aside {
    padding-top: 1em;
    width: 50%;
    
    float: left;
}
form {
    width: 100%;
    float: left;
}

span {
    color: rgba(255,255,255,1);
    background-color: rgba(0,0,0,1);
}
#kaartjes {
    float: right;
}
#opt {
    float: right;

}
article {
    float: left;
    width: 60%;
    
}
.button {
    float: right;
    width: 30%;
    height: auto;
}
.button form button {
    background-image: url(afbeeldingen/button.jpg);
    float: right;
    margin-right: 10em;
}

#bereik1 {
    float: right;
    display: inline-block;
    width: 8%;
}
.visually-hidden {
    color: rgba(255,255,255,1);
}


#stijl {
    float: right;
}
form p label  {
    float: right;
}
range {
    color: rgba(255,0,0,1);
}
















footer {
}
 
Welk tekenset gebruik je voor het formulier?
 
Hallo,

in dreamweaver cs6 ontwerp ik de ode en de code neem ik over uit mijn cursusboek html 5 &css3
 
Ok maar dan zal je de gehele code moeten plaatsen want het hoeft niet in het formulier te zitten.

En kijk eens wat er gebeurt als je het hele formulier in een div zet en die positioneert.
 
In de useragent stylesheet van IE heeft de schuif een bepaalde padding ingesteld waardoor hij naar beneden schuift. Dit kun je fiksen door zelf de regel padding: 1px; toe te passen op de schuif (zoals bij de useragent stylesheet van Firefox).
 
In navolging op @hekje47 : neem de volgende media-query op binnen de style tags, deze wordt alleen geparsed door Internet Explorer:

CSS:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #bereik1 {
        padding: 5px;
    }
}
 
In navolging op @hekje47 : neem de volgende media-query op binnen de style tags, deze wordt alleen geparsed door Internet Explorer:

CSS:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #bereik1 {
        padding: 5px;
    }
}
Deze padding is te groot. Als je het toont in Microsoft Edge, zal hij alsnog te ver naar onderen verschoven worden.
 
Deze padding is te groot. Als je het toont in Microsoft Edge, zal hij alsnog verschoven worden.

Voor Edge zou het dan deze media-query moeten zijn:

CSS:
@supports (-ms-accelerator:true) {
    #bereik1 {
        padding: 1px;
    }
}

Ik kan het niet uittesten, want ik heb geen Edge (W8.1)
 
Sorry, de style tag uit het bovenstaande bericht werkt niet.

Ik heb via browserstack.com getest in Edge met de volgende style tag:

CSS:
_:-ms-lang(x), _:-webkit-full-screen, #bereik1
{
  margin-top: 0px;
}

Deze werkt goed in Edge en de range slider komt op de juiste plek terecht. Alleen de width van de slider gaat verloren.
 
Beste,


nu alle type's in <fieldset> geplaatst en de id een margin px left meegegeven.
Werkt iig beter nu.
Voorlopig opgelost, nu kijken wat de feedback is van mijn docent loi ;)
 
bij deze, IE en firefox geven de code goed weer. Er zal misschien nog wel een andere code zijn maar ik doe het voorlopig met deze.
 
<style type="text/css">
input {
width: 30px;
}
#kaartjes {
float: right;
margin-right: 50px;
}
label {
float: right;
}
#kaartjes1 {
float: right;
margin-right: 50px;
}
#bereik1 {
float: right;
margin-right: 50px;
}
</style>
</head>
<body>
<fieldset>
<p><span class="cijfer">1 </span> Think and Grow Rich (Napoleon Hill)
<input id="kaartjes" name="Kaartjes" type="number" value="0" min="1" max="10">
<label for="Kaartjes">Maximaal 10 exemplaren: </label>

<p><span class="cijfer">2 </span> De Kleine Prins (Antoine de Saint-Exupéry)
<input id="kaartjes1" name="Kaartjes1" type="number" value="0" min="1" max="99">
<label for="Kaartjes1">Maximaal 99 exemplaren: </label>
<p><span class="cijfer">3 </span>Droom van de rode kamer (Cao Xueqin)
<input id="bereik1" type="range" min="0" max="15" step="5" list="bereik-lijst">
<label for="bereik1">Bestel 5,10 of 15 exemplaren: </label>
<datalist id="bereik-lijst">
<option value="0" label="0">
<option value="1" label="5">
<option value="2" label="10">
<option value="3" label="15">
</datalist>
</fieldset>
</body>
 
Ik heb deze code zojuist overgenomen in dreamweaver maar de range slider staat nog steeds op de volgende regel. Het enige wat er door de fieldset veranderd is, is dat er een kader verschijnt om het formulier.
markvelde2.jpg

Is deze opdracht dan van de loi of staat die in het cursusboek ?
 
Deze code is overgenomen uit het cursusboek van de LOI. Zal de docent wel vragen hoe ik dat moet oplossen en plaats het wel in dit topic.
 
Hallo,

opdracht was goedgekeurd dus bovenstaande code was goed geformuleerd.
De code door de validator gehaald, css was goed behalve html code waar ik de volgende melding van kreeg.
The value of the for attribute of the label element must be the ID of a non-hidden form control.
From line 20, column 7; to line 20, column 28
0">↩ <label for="Kaartjes">Maxima

iemand idee?
 
Is opgelost, bedankt iedereen!!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan