Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

rare layout van een formulier in ie7

snowman2
8 antwoorden
  • Voor mijn site heb ik een contact formulier gemaakt.
    Maar in ie7 staan de invulvelden lijkt het helemaal naar rechts terwijl in ff de invulvelden goed staan namelijk aan de linkerkant.

    Wie kan me een tip geven waar het verkeerd gaat.
    Het formulier kun je vinden op : http://textpattern.tamarawobben.nl/?s=contact

    Alvast bedankt,

    Roelof
  • kan je je css van je formulier geven daar zit waarschijnijk een fout in of het heeft een ie7 hack nodig
  • hoi Ytterx,

    Hier het css :

    [code:1:9169cd44a5]
    input,
    textarea,
    select {
    padding: 2px;
    font: 400 1em verdana, sans-serif;
    color: #444;
    background-color: #EEEEEE;
    border: 1px solid #444444;
    }

    input:focus,
    input:hover,
    textarea:focus,
    textarea:hover,
    select:focus,
    select:hover {
    color: #000000;
    background-color: #E4F7FA;
    border: 1px solid #00DFFF;
    }

    input.button {
    padding: 2px 5px 2px 5px;
    font: 400 1.1em "trebuchet ms", serif;
    color: #555555;
    background-color: #9FF3FF;
    border-width: 1px;
    border-style: solid;
    border-color: #FFF #00DFFF #00DFFF #FFF;
    }

    #txpCommentInputForm {
    margin-top: 20px;
    }

    #txpCommentInputForm p {
    text-transform: none;
    text-align: left;
    }

    #txpCommentInputForm label {
    text-transform: capitalize;
    padding-left: 5px;
    }

    #txpCommentInputForm input.checkbox {
    width: 13px;
    }

    p#txpCommentInputForm,
    p.closed {
    color: #9FF3FF;
    text-align: center;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 4px 0px 3px 7px;
    }

    #txpCommentInputForm input {
    width: 250px;
    }

    #txpCommentInputForm input.button {
    width: 80px;
    }

    #txpCommentInputForm textarea {
    width: 350px;
    height: 200px;
    }

    .zemContactForm {
    padding-left: 15px;
    }

    legend {
    display: none;
    }

    fieldset {
    border: 0;
    }

    ol.comments {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ol.comments li .reply {
    color: #FFFFFF;
    margin: 10px 15px 10px 15px;
    padding: 10px;
    display: block;
    background: #444444;
    border: 1px solid #9FF3FF;
    }
    [/code:1:9169cd44a5]

    Het is ook een ie6 en ie7 probleem. Dit heb ik gecontroleerd via browsershots.

    Roelof
  • Kijk, zo zie ik code graag: gevalideerd XHTML 1.0 Strict en CSS. Ik heb helaas niet de tijd om uitgebreid te kijken naar het probleem, maar als ik zou moeten gokken dan denk ik dat je even moet kijken naar het stukje CSS van #right:
    [code:1:ef11e6ef96]#right {
    margin-left: 340px;
    margin-top: 70px;
    margin-right: 50px;
    }[/code:1:ef11e6ef96]
    Speel er even mee en kijk of het invloed heeft op de weergave in IE.

    Overigens één klein puntje uit de validator: pas je character set encoding even aan in je broncode, hij komt nu niet overeen met de http-headers van dezelfde pagina:
    [code:1:ef11e6ef96]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/code:1:ef11e6ef96]
    Succes!

    - Bas
  • Hoi Bas,

    Dank je voor het meedenken.
    Ik heb wat gespeeld met de getallen maar helaas geen verbetering.
    Right wordt gebruikt om het content gedeelte op de goede plaats te zetten.

    Groetjes,

    Roelof
  • ik heb er even naar gekeken en volgens mij moet je
    [code:1:3c777b8bcf]float: left;[/code:1:3c777b8bcf]
    gebruiken bij label, input en textarea
  • Hoi Ytterx,

    Ik begrijp je niet helemaal.
    Waar in de bestaande css moet ik de regel toevoegen ?

    Roelof
  • [code:1:a78c00a1b5]
    input, textarea, label {
    float: left;
    }
    [/code:1:a78c00a1b5]

    in je css zetten. moet volgens mij het probleem oplossen

Beantwoord deze vraag

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