contact formulier opmaak probleem IE maar niet Firefox

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Hoi!
Ben al tijd bezig met een website die nu bijna af is en nu loop ik tegen problemen aan bij het contactformulier. Want bij Firefox ziet er er goed uit maar bij IE staat het captcha veld niet goed.
zie deze test website

Ik wordt er echt helemaal simpel van, ben al met van alles bezig geweest en nu eindelijk captcha plaatje op juiste plek maar bij IE dus niet.
Wie weet waarom?

Dank jullie!
 
Laatst bewerkt:
Ik heb IE9 en ik zie geen verschil met FF ?
 
Het kost heeeeel veeeel tijd om alle html en css te gaan bekijken.
Misschien kun je het form gedeelte er uit halen en dit posten?
Bij IE8 werkt het uiteraard niet (nieuws: nog 1 miljoen pc's met XP in gebruik... hopelijk wel met moderne browser).
Probeer eens dit:
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>....</title>
<meta name="description" content="...." />
......
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- ------ hier al je stylesheets ------ -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="uploads/site/scripts/respond.js"></script>
<![endif]-->

*** edit: respond.js (alternatief: css3-mediaqueries.js) kun je googelen.
 
Laatst bewerkt:
Bedankt @Jedi en @Bron voor jullie reacties. Ik heb het met IE11 getest. Ik zal plaatje toevoegen wat ik bedoel.
screenshot.JPG

Ja Bron, het is veel code maar dacht dat met Firebug een helpmij collega het zou kunnen zien of dat het een bekend IE / FF probleem was. Ik zal de code los zien te weken en plaatsen :)
 
Op basis van de bestaande html heb ik een css conceptje (niet kunnen testen)
Code: 
<p class="captcha">
  <input type="hidden" name="...." value="...." />
  <img class="..." width="72" height="24" alt="" src="..." />
  <span class="...">
    <input type="text" name="..." value="..." size="40" class="..." />
  </span><br />
  <input type="submit" value="send" class="... ..." />
</p>

[hidden] {
  display: none;
}
:focus, *:focus {
  outline: 0; outline-style: none;outline-width: 0;
}
.captcha img, .captcha span, .captcha input {
  margin: 0; padding: 0;
}
.captcha img {
  float: left;
  vertical-align: baseline;
}
.captcha span {
  float: left;
  margin-left: ...px; /* ruimte tussen img en input */
  padding-top: ....px; /* img en input oplijnen */
}
.captcha input[type="text"] {
  /* opmaak tekst veld */
}
.captcha input[type="submit"] {
  /* opmaak submit knop */
}
 
Het werkt!! Phoei... ben ik erg blij mee. Kan je me uitleggen hoe het komt dat in jouw benadering het wel werkt? Ik vermoed o.a. vertical-align: baseline; maar het is natuurlijk meer.
 
Laatst bewerkt:
vertical-align:baseline behoort de standaard waarde te zijn in css maar sommige (oudere) browsers gaan hier slordig mee om. Ook kan het zijn dat elders in de css deze eigenschap is gewijzigd. Eveneens margin en padding kan elders in de css anders zijn ingesteld. Voor de zekerheid zijn deze hier opnieuw ingesteld.

Ik ben iemand die css graag minimaliseer en geordend opbouw. Leuke opmaak komt bij mij later wel. De eerste fase bij mij is:
- eerst een css reset en defaults instellen
- dan zorgen dat alle images de juiste afmeting en naam hebben
- dan de layout in blokken met float, margin, padding (test ik met background-color)
- dan ga ik elk blok (hier de captcha) een layout geven met float, margin, padding

Gek genoeg is de uitleg van float, margin en padding simpel maar gaan veel mensen hier in de praktijk niet handig mee om. Houdt er bijvoorbeeld rekening mee dat margin, padding en border invloed hebben op width/height.
 
Ha bron, ik begin ook altijd met volledige css reset (Eric Meyer) maar zie nu dat ik die later ook moet gebruiken. Voor mijn start WordPress thema's gebruik ik nu een heel kaal framework wat veel fijner werkt.
Je geordende opbouw daar zitten wat goede tips in, dank je wel.
 
Mooi, doe ik bron. Is die ook met WordPress te gebruiken naar jij weet? Ik start nu met het _underscores theme nml. en dan nog specifiek de shape variant.
 
In principe is elke html om te zetten in WP maar bij de ene heb je meer werk als bij de andere. Als je uitgaat van bestaande WP templates dan scheelt je dit veel werk maar is de structuur niet altijd naar je zin. Voor- en nadelen dus.
De boilerplate is een mooi html5 / css3 startpunt. Als je googelt op html5 staat hij gelijk in de uitklap.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan