HTML5 vs IE en Safari/FireFox

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

16/05/2012 19:36:17
Quote Anchor link
Hallo allemaal,

Bijgaande HTML5-code maakt onderdeel uit van een groot PHP-document waarin bezoekers van de site hun kaarten kunnen gaan bestellen. Tenminste, als ze IE gebruiken als browser. Gebruiken ze Safari of FireFox dan zijn alle invulvelden en selectievelden geblokkeerd. Het invulgedeelte is volledig geblokkeerd. De knoppen overigens niet. Die zijn gewoon te gebruiken.
Wie heeft zoiets eerder bij de hand gehad en weet de oorzaak van deze blokkering?

Overigens werkt het formulier in IE goed.

Hieronder de volledige HTML-code

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE HTML>

<html lang="nl">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="../login/css/cco.css" />
    <link rel="stylesheet" type="text/css" href="../login/css/responsive.css" />
    <script src="../login/scripts/jquery.js"></script>
    <title>CC&amp;O Harderwijk | Boekingsformulier</title>
</head>


<body class="paginainstelling">
    <header>
        <img alt="" class="elastic" src="../login/media/header-cco.gif" />
    </header>
    <section>
        <article>
            <div class="elastic">
                <p class="header_eersteregel"><?php echo $cHeader1 ; ?></p>
                <p class="header_tweederegel"><?php echo $cHeader2 ; ?></p>
            </div>
            <div class="container">
                <div class="box">
                    <div class="invoerveld_400x650">
                        <p class="posterheader">&nbsp;<?php echo $cOmschrijving ; ?></p>
                        <p class="postersubheader">&nbsp;<?php echo ES_Fml_Waar ; ?>&nbsp;<?php echo $cTheater ; ?></p>
                        <p class="postersubheader">&nbsp;<?php echo ES_Fml_Wanneer ; ?>&nbsp;<?php echo $dDatum ; ?></p>
                        <p class="postercontent">&nbsp;<?php echo ES_Fml_Prijs ; ?>&nbsp;&euro;<?php echo $nPrijs ; ?></p>
                        <p class="postercontent">&nbsp;<?php echo ES_Fml_Info ; ?>&nbsp;<?php echo $cToelichting ; ?></p>
                        <p class="regelhoogte35"></p>
                        <?php if($cAfbeelding1 != "../login/media/"){ ?>
                            <p class="midden"><img class="geenbordermidden" src="<?php echo $cAfbeelding1 ; ?>" alt="" /></p>
                        <?php } ?>
                    </div>
                </div>
                <div class="box">
                    <div class="invoerveld_400x650">
                        <form action="boekingsformulier.php" method="POST" >
                            <p class="posterheader"><?php echo ES_Fml_Header ; ?></p>
                            <div class="box25">
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Naam ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Adres ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Postcode ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Plaats ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Email ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Telefoon ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Iban ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Geslacht ; ?></p>
                                <p class="zwartetekst_hoogte30"><?php echo ES_Boek_Kaarten ; ?></p>
                            </div>
                            <div class="box75">
                                <p></p>
                                <input type="text" size="30" name="naam" id="naam" title="Uw volledige naam" value="<?php echo $cNaam ; ?>" /><br />
                                <input type="text" size="30" name="adres" id="adres" title="Uw volledige adres" value="<?php echo $cAdres ; ?>" /><br />
                                <input type="text" size="30" name="postcode" id="postcode" title="Uw postcode" value="<?php echo $cPostcode ; ?>" /><br />
                                <input type="text" size="30" name="woonplaats" id="woonplaats" title="Uw woonplaats" value="<?php echo $cWoonplaats ; ?>" /><br />
                                <input type="text" size="30" name="email" id="email" title="Uw e-mailadres" value="<?php echo $cEmailbezoeker ; ?>" /><br />
                                <input type="text" size="30" name="telefoon" id="telefoon" title="Uw telefoonnummer" value="<?php echo $cTelefoon ; ?>" /><br />
                                <input type="text" size="30" name="iban" id="iban" title="Uw bankrekeningnummer/IBAN-nummer" value="<?php echo $cIban ; ?>" /><br />
                                <select name="geslacht" id="geslacht" title="Selecteer het geslacht"><?php echo $cGeslacht ; ?><option>Geslacht</option>
                                                                        <option>Man</option>
                                                                        <option>Vrouw</option></select><br />
                                 <?php
                                    echo '<select title="Selecteer het gewenst aantal plaatskaarten" name="aantal">';
                                    echo '<option value="">Aantal</option>';
                                    for ($iStoelen = 0; $iStoelen <= $nMaxPlaatsen; $iStoelen++ ) {
                                        if ($iStoelen == $iAantal) {
                                            echo '<option selected="selected">';
                                        }
else {
                                            echo '<option>';
                                        }

                                        echo $iStoelen . '</option>';
                                    }

                                    echo '</select>';
                                 ?>
                                
                            </div>
                            <article class="midden">
                                <p class="regelhoogte35"></p>
                                <p class="midden"><input title="Toevoegen concert" class="knop" name="actie" type="submit" value="<?php echo ES_KnopBoeking ; ?>"/>
                                <input title="Alle ingevoerde gegevens wissen" class="knop" name="actie" type="reset" value="<?php echo ES_KnopWissen ; ?>"/></p>
                            </article>
                        </form>
                    </div>
                </div>
            </div>
            <form action="boekingsformulier.php" method="POST" >
                <p class="regelhoogte35">&nbsp;</p>
                <p class="midden"><input title="Terug naar het menu" class="knop" name="naar_menu" type="submit" value="<?php echo ES_KnopTerug ; ?>" /></p>
            </form>
            <footer class="midden">
                <p class="regelhoogte75"></p>
                <img class="elastic" alt="" src="../login/media/footer-cco.jpg" />
            </footer>
        </article>
    </section>    
</body>

</html>


Ik hoop dat iemand mij hiermee kan helpen.


George van Baasbank
 
PHP hulp

PHP hulp

28/03/2024 12:53:09
 
Joey Drieling

Joey Drieling

16/05/2012 20:07:47
Quote Anchor link
Heb je ook een link naar die pagina!?
 
Mark Markson

Mark Markson

16/05/2012 20:56:16
Quote Anchor link
Heb je de nieuwste versies van de browsers? Ik vind dat IE nogal achtergesteld is met HTML5 en CSS3 als je IE met Chrome/Opera/Firefox vergelijkt...

Probeer eerst even te kijken of je wel de nieuwste versie van alles hebt.
 
George van Baasbank

George van Baasbank

16/05/2012 21:00:47
Quote Anchor link
http://www.cco-harderwijk.nl/selectiescherm_concerten2.php

Je kunt hier in dit scherm een concert selecteren die je dan vervolgens naar het bedoelde document stuurt.

Inmiddels heb ik een vervangend document gemaakt waarbij gebruik is gemaakt van tabellen om de teksten uit te lijnen. Hierin zijn o.m. <section> en <article> verwijderd.

Deze link is http://www.cco-harderwijk.nl/concerten

p.s., je mag in dit stadium ook een boeking maken. De database wordt nl dagelijks geleegd.


George
 
Mark Markson

Mark Markson

16/05/2012 21:02:26
Quote Anchor link
Dat je het weet: je website is bij mij idioot traag...

Toevoeging op 16/05/2012 21:03:35:

En doe bij je unordered list even dit:

#ulnaam li
{
list-style-type:none;
}

anders zie je daaronder die bullets van je list...

Toevoeging op 16/05/2012 21:05:43:

Nog iets: probeer foutmeldingen gewoon in de website zelf te laten, tenminste op de pagina zelf. Het zou ook netjes zijn als je de ingevulde waardes zou kunnen onthouden in je textfielden.

Als je iets fouts invult ga je weer terug naar het beginscherm...niet echt goed voor de usability...
 
George van Baasbank

George van Baasbank

16/05/2012 21:09:10
Quote Anchor link
Ik zat zelf net in de database te klooien. Wellicht daarom traag.

Wil je nog even kijken?

p.s., over welke lijst maak je je opmerking?

Dat ik terug ga naar de startpagina wordt ingegeven doordat de alert een wit scherm achter laat.....

Toevoeging op 16/05/2012 21:11:25:

De sourcecode van de test of alles goed is ingevuld en de gehanteerde foutafhandeling

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
if(isset($_POST['actie'])) {
                  
    $cNaam          = $_POST['naam'];
    $cAdres         = $_POST['adres'];
    $cPostcode      = $_POST['postcode'];
    $cWoonplaats    = $_POST['woonplaats'];
    $cTelefoon      = $_POST['telefoon'];
    $cEmailbezoeker = $_POST['email'];
    $cGeslacht      = $_POST['geslacht'];
    $nAantalStoelen = $iAantal;
    $cIban          = $_POST['iban'];
    $nPrijs         = $_SESSION['prijs'];
    $cConcertId     = $_SESSION['concertid'];
    $nTotaalBedrag  = $nAantalStoelen * $nPrijs;
    $cNaam          = trim(strip_tags($cNaam));
    $cAdres         = trim(strip_tags($cAdres));
    $cPostcode      = trim(strip_tags($cPostcode));
    $cWoonplaats    = trim(strip_tags($cWoonplaats));
    $cTelefoon      = trim(strip_tags($cTelefoon));
    $cEmaillid      = trim(strip_tags($cEmaillid));
    $cGeslacht      = trim(strip_tags($cGeslacht));
    $cIban          = trim(strip_tags($cIban));
    $_SESSION['email'] = $cEmailbezoeker;
    $cMelding       = "";

    $AllesGoedIngevuld  =   "Ja";
    $testsql        = "";
        
    if(empty($cNaam))   {
        $Foutmelding    .= "Naam ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }

    if(empty($cAdres))  {
        $Foutmelding    .= "Adres ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }

    if(empty($cPostcode))   {
        $Foutmelding    .= "Postcode ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }

    if(empty($cWoonplaats)) {
        $Foutmelding    .= "Woonplaats ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }
    
    if(empty($cTelefoon)) {
        $Foutmelding    .= "Telefoonnummer ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }

    if(empty($cEmailbezoeker))  {
        $Foutmelding    .= "E-mailadres ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }

    if(empty($cIban))  {
        $Foutmelding    .= "Bankrekeningnummer/IBAN-nr ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }
    
    if($iAantal == 0)  {
        $Foutmelding .= "Aantal kaarten onjuist (is 0)";
        $AllesGoedIngevuld = "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }
    
    if ($AllesGoedIngevuld == "Nee") {
        $cMelding  = "Foutmelding: ".$Foutmelding;
        echo "<script>alert('$cMelding')</script>";
        $cMelding = "";
        include "selectiescherm_concerten.php";
    }
    
 
 
Obelix Idefix

Obelix Idefix

16/05/2012 22:48:30
Quote Anchor link
Controle of een formulier verzonden is, controleer je liever met if($_SERVER['REQUEST_METHOD'] == "POST")

Waarom al die variabelen kopiëren op regel 3 t/m 22? En dan ook nog 2x. Eerst van $_POST naar variabele en dan nog wat functies er over heen. Je controleert overigens niet eens of ze wel bestaan, daar ga je daar maar van uit.
Controleren met empty wordt doorgaans afgeraden.
Waarom overal
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
?

Waar komt $iAantal vandaan?

Heb je error-reporting aan staan?

Heb je site bekeken in IE. Daarin staat het logo tegen de linkerkant uitgelijnd ipv midden in. Als ik daar zonder iets in te vullen klik op kaarten bestellen, verdwijnt het id in de url en de complete opmaak is ook weg (de twee blokken worden strak onder elkaar tegen de linkerkant uitgelijnd).

In FF blijft de layout wel goed, maar doordat het id verdwijnt, krijg ik ook ander concert te zien.
Overigens vind ik het onhandig dat je alleen naar een concert kunt gaan door te klikken op het bolletje voor een concert en niet (ook) op de gegevens van het concert.
 
George van Baasbank

George van Baasbank

17/05/2012 09:31:22
Quote Anchor link
Hier nog een klein stukje code uit mijn doc n.a.v. de vraag van Idefix

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
session_start();
 
error_reporting(0);

include "../login/language/cco_nl.inc";

// Declaratie variabelen
$cPaginanaam    = "boekingsformulier";
$cLogin         = $_SESSION['login'];
$cBeheerder     = $_SESSION['beheerder'];
$cAdministrator = $_SESSION['administrator'];
$cAdministratie = $_SESSION['administratie'];
$cVoll_naam     = $_SESSION['voll_naam'];
$cEmailbeheerder = $_SESSION['email'];
$cSite          = $_SESSION['site'];

if(isset($_SERVER['REMOTE_ADDR'])) {
    $cIpadres = $_SERVER['REMOTE_ADDR'];
} else {
    $cIpadres = "Onbekend";
}
 
if(isset($_SERVER['HTTP_USER_AGENT'])) {
    $cBrowser = $_SERVER['HTTP_USER_AGENT'];
} else {
    $cBrowser = "Onbekend";
}

if(isset($_POST['naar_menu'])) {
    $actie = $_POST['naar_menu'];
    
    if($actie === "Terug naar vorig scherm") {
        include "omzetten_kaartverkoop.php";
        exit();
    }
}

// Aantal stoelen
if (isset($_POST['aantal'])) {
    $iAantal = $_POST['aantal'];
} else {
    $iAantal = null;
}



Als controle op ingevulde velden niet met EMPTY wordt gedaan, met welke functie wordt doorgaans dan wel gecontroleerd?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
if(empty($cNaam))   {
        $Foutmelding    .= "Naam ontbreekt, ";
        $AllesGoedIngevuld  =   "Nee";
    } else {
        $AllesGoedIngevuld  =   $AllesGoedIngevuld;
    }



George
Gewijzigd op 17/05/2012 09:32:17 door George van Baasbank
 
Wouter J

Wouter J

17/05/2012 11:22:55
Quote Anchor link
Met isset.
 
George van Baasbank

George van Baasbank

17/05/2012 13:15:03
Quote Anchor link
Obelix en Idefix op 16/05/2012 22:48:30:
Controle of een formulier verzonden is, controleer je liever met
if($_SERVER['REQUEST_METHOD'] == "POST") {


Moet bij dee methode niet de bron van herkomst opgenomen worden net zoals bij:

if(isset($_POST['actie'])) {
 
Wouter J

Wouter J

17/05/2012 13:18:53
Quote Anchor link
Nee
 
George van Baasbank

George van Baasbank

17/05/2012 13:20:12
Quote Anchor link
Obelix en Idefix op 16/05/2012 22:48:30:
Overigens vind ik het onhandig dat je alleen naar een concert kunt gaan door te klikken op het bolletje voor een concert en niet (ook) op de gegevens van het concert.


Probleem aangepakt en opgelost.

Bedankt voor deze feedback

George


Toevoeging op 17/05/2012 13:26:01:

Wouter,

Hoe doe ik dat dan als ik wel twee of drie keer in één formulier een $_REQUEST heb?

Toevoeging op 17/05/2012 13:36:01:

Obelix en Idefix op 16/05/2012 22:48:30:
Heb je site bekeken in IE. Daarin staat het logo tegen de linkerkant uitgelijnd ipv midden in. Als ik daar zonder iets in te vullen klik op kaarten bestellen, verdwijnt het id in de url en de complete opmaak is ook weg (de twee blokken worden strak onder elkaar tegen de linkerkant uitgelijnd).

In FF blijft de layout wel goed, maar doordat het id verdwijnt, krijg ik ook ander concert te zien.


Blijf ik nog wel zitten met dit probleem. Nu een foutieve invoer verschijnt via een ALERT een futmelding waarna in IE9 de opmaak volledig van slag is. Deze opmaak is overigens volledig in nieuwe opmaak van HTML5 en CSS3
Hieronder de opmaak uit mijn css-bestand:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.invoerveld_400x500 {
    border:4px solid #CC071E;
    padding:10px 40px;
    background: #E0E1DD;
    width:400px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    border-radius:15px;
    -moz-border-radius:15px; /* Firefox 3.6 and earlier */
}

div.box {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border: 0.25em solid black ;
    float:left;
    font-family: Arial;
    color: white;
    background-color: black;
}

div.container {
    width: 990px;
    border:1em solid;
    margin-left: auto;
    margin-right: auto;
    background-color: black;
    border-color: black;
}
Gewijzigd op 17/05/2012 13:27:25 door George van Baasbank
 
Reshad F

Reshad F

17/05/2012 13:36:58
Quote Anchor link
zie ik het nou goed in je broncode? google analytics scriptje boven de html tags? ... overigens zie ik je doctype ook als 1.0 en niet een html5 doctype terwijl je hierboven aangeeft met html5 te werken?
 
George van Baasbank

George van Baasbank

17/05/2012 13:39:42
Quote Anchor link
Ik gebruik GEEN Google-script (bij mijn weten). Waar heb je die gezien?

Ook heb ik in mijn documenten overal aangegeven dat ik HTML5 gebruik. Waar heb je gezien dat ik een andere versie gebruik?

George

p.s., soms bij http://www.cco-harderwijk.nl ???

Dat is de hoofdsite (door een ander gebouwd) Mijn separate deel zit o.m. achter http://www.cco-harderwijk.nl/concerten
Gewijzigd op 17/05/2012 13:43:09 door George van Baasbank
 
Obelix Idefix

Obelix Idefix

17/05/2012 22:08:45
Quote Anchor link
George van Baasbank op 17/05/2012 13:20:12:
Toevoeging op 17/05/2012 13:26:01:
Wouter,

Hoe doe ik dat dan als ik wel twee of drie keer in één formulier een $_REQUEST heb?

Toevoeging op 17/05/2012 13:36:01:

Wat bedoel je met 2 of 3x een $_REQUEST?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.