IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

problème d'affichage sous IE


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    1 249
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 1 249
    Par défaut problème d'affichage sous IE
    bonjour,

    voici le code de ma page :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    	<head>
    		<title>TEST</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    		<style type="text/css">
    body
    {   
    	margin: 0;
    	padding: 0;
    	border: none;
    	background-color: rgb(240,240,240); /* gris clair */
    	font-family: arial, helvetica, sans-serif;
    	color: black; 
    	font-size: 1em;
    }	
     
    #page
    {
    	margin: 10px auto;
        width: 90%;
    	min-width: 1040px;
    	padding: 0;
    	border: 2px solid rgb(45,15,180);
    	border-top: 5px solid rgb(45,15,180);
    	color: black;
        background-color: white;
    }
     
    #corps
    {
    	margin: 0;
    	padding: 0;
    }
     
     
    #menu_vertical_gauche
    {	
    	float: left;
    	width: 10em;
    	margin: 0;
    	padding: 0;
    	border: none;
    }
     
    #centre
    { 
    	margin: 0 0 0 10em;	
    	padding: 0;	
    	border-left: 2px solid rgb(45,15,180); /* bleu foncé */ 	
    }
     
     
    a, h1, h2, p
    {
    	margin: 0.3em;
    	padding: 0;
    	border: none;
    }
     
    p
    {
    	margin: 0.3em 1em; 
    }
     
    h1
    {
    	font-size: 1.5em;
    	text-align: center;
    	margin: 0;
    	padding: 0;
    }
     
    fieldset
    {
    	margin: 5px;
    	padding: 5px;
    	border: 2px solid rgb(220,220,210); /* gris */
    }
     
    legend{
    	font-weight: bold;
    	color: rgb(45,15,180); /* bleu foncé */
    }
     
    #boutons
    {
    	text-align: right;
    	margin: 1em;
    }
     
     
    form{
    	margin: 0;
    	padding: 0;
    }
     
    .divport{
    	float: left;
    	width: 24%;
    	min-width: 210px;
    	margin: 0 0 0 5px;
    	padding: 0;
    }
     
    #boutons{
    	clear: both;
    }
     
    .returnbloc
    {
    	clear: both;
    	float: left;
    	width: 48.6%;
    	margin: 0 0 0 5px;
    	padding: 0;
    }
     
    .divport2
    {
    	float: left;
    	width: 48.6%;
    	margin: 0 0 0 5px;
    	padding: 0;
    }
    		</style>
     
    	</head>
     
    	<body>
    		<div id="page">	
     
    			<div id="corps">
    				<div id="menu_vertical_gauche">
     
    				</div>
     
    				<div id="centre">
     
    					<form id="Configuration" action="">
     
    						<div class="divport">
    							<fieldset class="port">
    								<legend>Bloc 1</legend>
     
    								<label><input type="checkbox"/> CheckBox 1A</label><br/>			
    							</fieldset>
    						</div>
     
    						<div class="divport">
    							<fieldset class="port">
    								<legend>Bloc 2</legend>
     
    								<label><input type="checkbox" /> CheckBox 2A</label><br/>			
    							</fieldset>
    						</div>
     
    						<div class="divport">
    							<fieldset class="port">
    								<legend>Bloc 3</legend>
     
    								<label><input type="checkbox"/> CheckBox 3A</label><br/>								
    							</fieldset>
    						</div>
     
    						<div class="divport">
    							<fieldset class="port">
    								<legend>Bloc 4</legend>
     
    								<label><input type="checkbox"/> CheckBox 4A</label><br/>	
    							</fieldset>
    						</div>
     
    						<div class="returnbloc">
    							<fieldset class="port">
    								<legend>Bloc 5</legend>
     
    								<fieldset>
    									<legend>fieldset 5A</legend>
     
    									<p>
    										<label>
    											TexBox 5A :<br />
    											<input type="text"/>
    										</label>
    									</p>									
    								</fieldset>	
    							</fieldset>
    						</div>
     
    						<div class="divport2">
    							<fieldset class="port">
    								<legend>Bloc 6</legend>
     
    								<fieldset>
    									<legend>fieldset 6A</legend>
     
    									<p>
    										<label>
    											TexBox 6A :<br />
    											<input type="text"/>
    										</label>
    									</p>
    								</fieldset>		
    							</fieldset>
    						</div>
     
    						<p id="boutons">
    							<input type="button" value="Validate" id="validation"  />
    						</p>					
     
    					</form>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    sous IE7, la bordure gauche du bloc #centre ne s'affiche pas correctement => le debut de la bordure (le haut) est effacé. Que faire ?


  2. #2
    Membre expérimenté
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Par défaut
    Pour IE7 il faut ajouter min-height:1%; dans #centre

  3. #3
    Membre éprouvé
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    1 249
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 1 249
    Par défaut
    merci

    mais d'ou sorts tu ça ? ... je ne trouve pas d'expliquation logique à ta solution...

  4. #4
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Du problème de haslayout et des propriétés qui permettent de donner le layout à un élément.

    Sur IE6 tu ne rencontrais pas le problème ?
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  5. #5
    Membre éprouvé
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    1 249
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 1 249
    Par défaut
    oui, le probleme est aussi sous IE6

    merci pouer cet eclaircissement

  6. #6
    Membre éprouvé
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    1 249
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 1 249
    Par défaut
    vous connaissez un site qui ressence tous les bug sous FF et IE et le feinte à appliquer pour resoudre les problèmes ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTML] HTML problème d'affichage sous firefox
    Par poupouny dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 12/12/2006, 13h40
  2. Problème d'affichage sous Firefox
    Par palassou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 03/10/2006, 09h43
  3. Problème d'affichage sous Ubuntu
    Par bigben89 dans le forum OpenGL
    Réponses: 9
    Dernier message: 18/05/2006, 12h06
  4. problème d'affichage sous ie
    Par tit_oune dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 27/04/2006, 09h32
  5. [MySQL] Problème d'affichage sous forme de tableau
    Par mogway95 dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 01/03/2006, 16h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo