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 :

compatibilité firefox ie padding


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de keub51
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    349
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2007
    Messages : 349
    Par défaut compatibilité firefox ie padding
    j'ai mon texte dans un div qui sous internet explorer se colle a la bordure : normal car dans ma css il n'y a pas de padding-top mais sous firefox il réussi a trouver un padding et a me decaler le texte de la bordure denviron 15px ...

    je ne trouve aps quel est la cause de ce comportement ..

    voici mes codes :

    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
    219
    220
    221
    222
    body
    {
    margin:auto;
    width: 814px;
    }
    #ban
    {
    width : 815px;
    height : 90px;
    background-image : url("images/ban2.JPG");
    background-repeat : no-repeat;
    }
    #menu
    {
    clear: both;
    background-repeat : no-repeat;
    float : left;
    width : 146px;
    display: inline;
    margin-bottom : 10px;
    }  
    #up_menu
    {
    background-image : url("images/menu.jpg");
    background-repeat : no-repeat;
    width : 148px;
    height : 19px;
    text-align : center;
    font-weight : bold;
    font-size : 12px;
    padding-top : 6px;
    font-family : arial;
    }  
    #in_menu
    {
    padding-top : 6px;
    width : 146px;
    text-align : center;
    font-weight : bold;
    font-size : 12px;
    font-family : arial;
    background-image : url("images/in_menu.jpg");
    background-repeat : y-repeat;
    }
    #in_menu a
    {
    color : #777777;
    text-decoration : none;
    }
    #in_menu a:hover
    {
    color : black;
    }    
    #foot_menu
    {
    background-image : url("images/menu2.jpg");
    background-repeat : no-repeat;
    width : 148px;
    height : 25px;
    text-align : center;
    font-weight : bold;
    font-size : 12px;
    }     
    #header {
    width:655px;
    font-size:10px;
    line-height:normal;
    margin-left : 160px;
    margin-top : 5px;
    }
    #header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
    #header li {
    float:left;
    background:url(images/norm_left.gif) no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    border-bottom : 1px solid black;
    }
    #header a {
    float:left;
    display:block;
    background:url(images/norm_right.gif) no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration : none;
    color : black;
    font-family:"arial" ;
    }
     
    #header a 
    {
    float:none;
    }
        /* End IE5-Mac hack */
    #header a:hover {
    color:#333;
    }
    #header #current {
    background-image:url(images/norm_left_on.gif);
    border-width:0;
    color : black;
    }
    #header #current a 
    {
    background-image:url(images/norm_right_on.gif);
    color:#333;
    padding-bottom:5px;
    border-bottom : 0px solid black;
    }
    #corps
    {
    float : right;
    width : 632px;
    border : 1px solid white;
    text-align : justify;
    border : 1px solid black;
    padding : 10px;
    border-top : 0px solid black;
    font-family : "arial";
    font-size : 12px;
    background-color : white;
    margin-bottom : 10px;
    }
    p
    {
    text-indent : 30px;
    }
    #categorie p
    {
    text-indent : 30px;
    }
    #pied
    {
    font-size : 11px;
    font-family : "arial";
    width : 814px;
    height : 53px;
    clear : both;
    background-image : url("images/fond.JPG");
    padding-top : 20px;
    }
    #menu_deroulant {
    margin-left : 50px;
    width : 715px;
    }
    #menu_deroulant dl {/*les titres*/
    float: left;
    width: 100px;
    margin: 0 1px;
    }
    #menu_deroulant dt {
    text-align: center;
    }
    #menu_deroulant dd {
    margin-top : 0%;
    margin-left : 0px;
    width: 98px;
    position: absolute;
    border : 1px solid black;
    background-image : url("images/in_menu.JPG");
    }
    #menu_deroulant li {
    list-style-type : none;
    text-indent : -40px;
    }
    #menu_deroulant a,#menu_deroulant li a, #menu_deroulant dt a {
    color : black;
    text-decoration: none;
    font-size : 10px;
    padding-left : -14px;
    }
    #menu_deroulant li a:hover, #menu_deroulant dt a:hover 
    {
    }
    #categorie
    {
    padding-top:0px;
    width : 364px;
    float : right;
    margin-bottom : 10px;
    background-image : url("images/titre.JPG");
    background-repeat : no-repeat;
    border : 1px solid pink;
    font-size : 11px;
    font-family : arial;
    }
    #categorie2
    {
    width : 364px;
    float : left;
    margin-bottom : 10px;
    background-image : url("images/titre.JPG");
    background-repeat : no-repeat;
    padding-left : 15px;
    padding-right : 15px;
    padding-bottom : 15px;
    border : 1px solid pink;
    font-size : 11px;
    font-family : arial;
    }
    h2
    {
    text-align : center;
    font-size : 16px;
    font-family : arial;
    color : #999999;
    }
    #corps a
    {
    color : grey;
    }
    #corps a:hover
    {
    color : #55BBFF;
    }
    #corps a:visited
    {
    color : grey;
    }

    Code html : 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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <head>
      <title>Nordtech Grossiste Informatique</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <meta http-equiv="Content-Language" content="fr" />
    <link rel="stylesheet" media="screen" type="text/css" title="style_nordtech" href="style.css" />
    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
            for (var i = 1; i<=7; i++) 
            {
                    if (document.getElementById('smenu_deroulant'+i)) {document.getElementById('smenu_deroulant'+i).style.display='none';}
            }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
    </head>
    <body onclick="javascript:montre();">
    <div id="ban">
    </div>
    <div id="header">
    <ul>
      <li><a href="Contacter Nordtech Grossiste Informatique.html">Accueil</a></li>
      <li id="current"><a href="Nordtech Grossiste Informatique Integration.html">Intégration</a></li>
      <li><a href="Nordtech Grossiste Informatique Péripherique.html">Périphériques</a></li>
      <li><a href="Nordtech Grossiste Informatique Connectique.html">Connectique</a></li>
      <li><a href="Nordtech Grossiste Informatique Multimédia.html">Multimédia</a></li>
      <li><a href="Nordtech Grossiste Informatique Accesoires.html">Accesoires/Conso</a></li>
      <li><a href="Nordtech Grossiste Informatique Réseaux.html">Réseaux</a></li>
      <li><a href="Nordtech Grossiste Informatique Divers.html">Divers</a></li>
    </ul>
     
    </div>
     
    <div id="menu">
    	<div id="up_menu">
    	Intégration
    	</div>
    	<div id="in_menu">
    <a href="">.: Alimentation :.</a>
    <br />
    <a href="">.: Boitiers :.</a>
    <br />
    <a href="">.: Cartes d'extention :.</a>
    <br />
    <a href="">.: Cartes Mères :.</a>
    <br />
    <a href="">.: Cartes Vidéos :.</a>
    <br />
    <a href="">.: Clé USB :.</a>
    <br />
    <a href="">.: Disque Dur :.</a>
    <br />
    <a href="">.: Façade Multifonction :.</a>
    <br />
    <a href="">.: Logiciels :.</a>
    <br />
    <a href="">.: Mémoire Flash :.</a>
    <br />
    <a href="">.: Mémoire Vive :.</a>
    <br />
    <a href="">.: Mini Barbones :.</a>
    <br />
    <a href="">.: Mobil Rack :.</a>
    <br />
    <a href="">.: Optique :.</a>
    <br />
    <a href="">.: Processeur :.</a>
    <br />
    <a href="">.: Système de stockage :.</a>
    <br />
    <a href="">.: Système RAID :.</a>
    <br />
    <a href="">.: Ventilation :.</a>
     
    	</div>
    	<div id="foot_menu">
    	</div>
    </div>
     
    <div id="corps">
    <img src="images/integration.jpg" style="float : left">
    <div id="categorie">
    <h2>Alimentation</h2>
    <br>
    <img src="images/alim.jpg" style="float : right">
    <p>Caractéristiques :
    Réf. const : FSP270-50SNV
    Poids : 2 Kg
    Conditionnement : 2 pcs</p>
    <br>
    <a href="#">En savoir plus ></a>
    <br><br><br><br>
    <img src="images/alim2.jpg" style="float : left" width='120' height='100'>
    <p>Alimentation de type SFX delivrant une puissance de 270W.
    Elle est munie d'un ventilateur d'une taille de 8cm et bénéficie de la fonction de thermorgulation.</p>
    <br>
    <a href="#">En savoir plus ></a>
    <br><br><br><br>
    <center>
    <a href="#">Voir tout nos produits de ce type ></a>
    </center>
    </div>
    <div id="categorie2">
    <h2>Boitiers</h2>
    <br>
    <img src="images/boitier.jpg" style="float : left" width='120' height='120'>
    <p>Boitier moyenne tour ATX de 2 ports USB 2.0 et de connecteurs audio en façade. Ce produit est compose de vis a main permettant une ouverture facile et de plusieurs types d'emplacements (5.25,3.5) en interne et en externe.
    Les alimentations sont garanties 2 ans.</p>
    <br><br><br>
    <center>
    <a href="#">Voir tout nos produits de ce type ></a>
    </center>
    </div>
    </div>
    <div id="pied">
     
    <div id="menu_deroulant">
    	<dl>			
    		<dt  onmouseover="javascript:montre('smenu_deroulant1');">Nordtech</dt>
    			<dd id="smenu_deroulant1">
    				<ul>
    					<li><a href="#" title="Nordtech Activitées">Activitées</a></li>
    					<li><a href="#" title="Nordtech Produits">Produits</a></li>
    					<li><a href="#" title="Nordtech Adresse">Adresse</a></li>
    					<li><a href="#" title="Nordtech Juridique">F. Juridique</a></li>
    				</ul>
     
    			</dd>
    	</dl>
     
     
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant2');">Fournisseurs</dt>
    			<dd id="smenu_deroulant2">
    				<ul>
    					<li><a href="#" title="Nordtech Selection">Sélection</a></li>
    					<li><a href="#" title="Nordtech Marque">Marque</a></li>
    				</ul>
    			</dd>
    	</dl>
     
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant3');">Clients</dt>
     
    			<dd id="smenu_deroulant3">
     
    				<ul>
    					<li><a href="#" title="Nordtech Qui">Qui?</a></li>
    					<li><a href="#" title="Nordtech Contact">Contact</a></li>
    					<li><a href="#" title="Nordtech Client">Formulaire Client</a></li>
    					<li><a href="#" title="Nordtech Entreprise">Pack créateur d'entreprise</a></li>
    					<li><a href="#" title="Nordtech Délai">Délai</a></li>					
    				</ul>
    			</dd>
    	</dl>
     
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant4');">Ce site</dt>
    			<dd id="smenu_deroulant4">
    				<ul>
    					<li><a href="#" title="Nordtech Pourquoi">Pourquoi ?</a></li>
    					<li><a href="#" title="Nordtech Newsletter">Newsletter</a></li>
    				</ul>
    			</dd>
    	</dl>	
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant5');">Opportunité</dt>
    			<dd id="smenu_deroulant5">
    				<ul>
     
    					<li><a href="#" title="Nordtech Profil">Profil</a></li>
    					<li><a href="#" title="Nordtech Candidature">Candidature</a></li>
    				</ul>
    			</dd>
    	</dl>
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant6');">Webmaster</dt>
    			<dd id="smenu_deroulant6">
    				<ul>
    					<li><a href="#" title="Nordtech Partenariat">Partenariat</a></li>
    				</ul>
    			</dd>
    	</dl>	
    	<dl>	
    		<dt onmouseover="javascript:montre('smenu_deroulant7');">Autres</dt>
    			<dd id="smenu_deroulant7">
    				<ul>
    					<li><a href="#" title="Nordtech Presse">La presse</a></li>
    					<li><a href="#" title="Nordtech Liens constructeurs">Liens constructeurs</a></li>
    				</ul>
    			</dd>
    	</dl>
     
     
    	</div>
    </div>
    </body>
    </html>

  2. #2
    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
    Citation Envoyé par keub51
    je ne trouve aps quel est la cause de ce comportement ..
    Peut-être le margin du h2 attribué par défaut par FF:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #categorie h2 {
      margin-top:0;
    }
    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

Discussions similaires

  1. Différence IE / Firefox avec Padding et Margin à 0
    Par gb-ch dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 02/02/2007, 22h40
  2. Compatibilité FIREFOX / IE
    Par delavega dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 25/08/2006, 09h48
  3. Pb de compatibilité Firefox
    Par kiouz dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 07/06/2006, 21h22
  4. Compatibilité Firefox et IE !!
    Par Mike91 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/01/2006, 16h47
  5. [FLASH MX2004] [flashvars] Compatibilité Firefox / IE
    Par CUCARACHA dans le forum Flash
    Réponses: 4
    Dernier message: 20/10/2005, 12h03

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