border-radius werkt niet in IE11 op windows10

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

De Clercq Andy

De Clercq Andy

12/03/2019 14:10:36
Quote Anchor link
Hallo,
de code hieronder toont een login scherm. Dit scherm wordt overal correct getoond behalve bij IE11 op windows10. Een IE11 op windows7 toont alles zoals het hoort. Kan iemand helpen?
Dank bij voorbaat!
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
101
102
103
<!DOCTYPE html>
<html>
<head>
<title>E-services DVC Heilig Hart</title>
<link rel="stylesheet" type="text/css" href="./css/huisstijl.css">
<style>
body
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
 margin-right: -50%;
transform: translate(-50%, -50%)
}
#logo
{
width:198px;
height:147px;
float:left;
margin: 1em;
}
form
{
border: 2px solid rgb(38,136,142);
border-radius:10pt;
width:600px;
height:300px;
}
ol
{
float:left;
margin-top:25px;
}
li
{
list-style-type:none;
margin:8pt;    
}
label
{
font-family:verdana;
font-size:10pt;    
width:110px;
float:left;
}
#gebruikersnaam
{
width:150px;    
}
#paswoord
{
width:150px;    
}
.button
{
color:white;
font-size:10pt;
font-weight:bold;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:120px;
}
.helpbutton
{
color:white;
font-family:verdana;
font-size:16pt;
height:25pt;
background-color:rgb(192,154,0);
border-radius:25px;
cursor:pointer;
width:25pt;
margin-right:5px;
}
</style>
</head>
<body>
    <section>
        <form method="post" action="index.php">
        <h2 class="h2paars">Inloggen E-services </h2>
        <img src="./images/dvctrans.png" id="logo" alt="logo DVC Heilig Hart">
            <ol>
                <li><label for="gebruikersnaam">Login</label>
                    <input type="text" name="gebruikersnaam" id="gebruikersnaam" autocomplete="on">
                </li><li>
                <label for="paswoord">Paswoord</label>
                    <input type="password"  name="paswoord" id="paswoord">
                </li><li>
                    <input type="submit" value="OK" id="inloggen" name="inloggen" class="button"> &nbsp;
                    <input type="reset" value="opnieuw" id="reset" name="reset" class="button">
                </li>
                <li>
                <button type="button" class="helpbutton" title="handleiding wijzigen paswoord">?</button><a  class="standaard" href="">wachtwoord vergeten</a>
                </li>
                
            </ol>
        </form>
    </section>
</body>
</html>
 
PHP hulp

PHP hulp

23/03/2019 16:32:02
 
Thomas van den Heuvel

Thomas van den Heuvel

12/03/2019 14:24:49
Quote Anchor link
zou moeten werken?

Heb je alle andere mogelijke oorzaken uitgesloten zoals caching, niet kloppende HTML/CSS (indien er fouten in het document zitten werkt potentieel niets zoals je zou willen). Heb je het document al door een validator gehaald?

NB: Als ik de statistieken op die pagina mag geloven is IE 11 een browser uit 2013 (!). En wordt (globaal) gebruikt door ~2.26% van de wereldwijde populatie (!).
 
De Clercq Andy

De Clercq Andy

12/03/2019 14:33:09
Quote Anchor link
Hey, vriendelijk bedankt voor de snelle reactie.
Heb deze code alvorens ze te posten door de validator van W3C en deze geeft mij enkel de sugestei om bij mijn doctype ook nog een naam te zetten.

Voorlopig staat deze code nog op een wamp64 en eens alles oké, zal ik hem online plaatsen. Kan dit een verschil maken?

Nogmaals dank voor de feedback
 
- Ariën -
Beheerder

- Ariën -

12/03/2019 14:42:09
Quote Anchor link
Het is en blijft HTML en CSS wat client-side draait. Dus uplaoden lijkt mij weinig nut te hebben.
Tenzij het om een pad naar de CSS-file gaat, wat bijvoorbeeld niet gevonden is.
 
Thomas van den Heuvel

Thomas van den Heuvel

12/03/2019 14:51:26
Quote Anchor link
Mogelijk een rendering issue? Heel kort door de bocht schakelt de betreffende IE-browser waarschijnlijk terug naar compatibility mode.

Probeer de volgende meta-tag toe te voegen (in de <head> uiteraard), en kijk of dit helpt?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Anders zul je even verder moeten graven.

Google: ie 11 render mode
> How To Deal With IE (Internet Explorer) 11 Render Issues
> why is IE11 choosing render mode: “IE7 Strict” and how to i make it use current browser?
>> What does <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> do?
Mogelijk enigszins gedateerd, maar dat is IE11 ook ;)
Gewijzigd op 12/03/2019 14:53:29 door Thomas van den Heuvel
 
Ward van der Put
Moderator

Ward van der Put

12/03/2019 14:54:46
Quote Anchor link
De Clercq Andy op 12/03/2019 14:10:36:
Dit scherm wordt overal correct getoond behalve bij IE11 op windows10. Een IE11 op windows7 toont alles zoals het hoort.

Ik zie de border-radius wél in Internet Explorer 11 onder Windows 10.
 
De Clercq Andy

De Clercq Andy

14/03/2019 16:05:30
Quote Anchor link
Met het toevoegen van de meta tag lijkt nu alles in orde.K
Reuze bedankt voor deze dijk van een tip, ik ga er vanuit dat ik deze in de toekomst best overal standaard toevoeg in mijn header.php.
Of kan dit tot problemen leiden?
 
Thomas van den Heuvel

Thomas van den Heuvel

14/03/2019 17:04:24
Quote Anchor link
> Of kan dit tot problemen leiden?
Het zorgt er enkel voor dat oudere IE browsers geïnstrueerd worden om de webpagina op een zo modern mogelijke manier op te bouwen. Voor zover ik weet kan dat geen kwaad.
 



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.