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 :

Pb avec background color et border


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de dream_of_australia
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Juin 2007
    Messages : 167
    Par défaut Pb avec background color et border
    Bonjour tout le monde !

    J'ai un petit souci d'affichage :

    • sous IE 7 :

    • sous FF :


    Mon code HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="entete">
         <div id="titre_entete">&nbsp;Forum : authentification</div>
         OPTIONNEL (conditions en php) : <div id="user_entete">Nom&nbsp;</div> 
    </div>
    Mon code CSS :
    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
     
    body { 
    	background-color:#FEF0D3; 
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	color:#000000;
    }
    #entete {
    	width:100%;
    	background-color:#FFCC99;
    	border-style:solid;
    	border-color:#000000;
    	border-width:1px;
    	margin:0;
    	padding:0;
    }
     
    #titre_entete {
    	float:left;
    	font-size:18px;
    }
     
    #user_entete {
    	float:right;
    	font-size:8pt;
    	line-height:18px;
    }
    Est-ce que quelqu'un sait pourquoi la couleur de fond et la bordure ne s'affichent pas correctement sous firefox ?

    Merci !!

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Parce que l'élément entete contient deux élément en float, donc hors flux et ne sont donc pas comptés dans la hauteur totale de leur conteneur.

    Pour résoudre ça, il faut créer un nouveau contexte de formatage sur le conteneur, en mettant par exemple overflow:hidden sur le div entete.

  3. #3
    Membre confirmé Avatar de dream_of_australia
    Profil pro
    Inscrit en
    Juin 2007
    Messages
    167
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Juin 2007
    Messages : 167
    Par défaut
    Effectivement c'est résolu ! Merci beaucoup !! Je n'y avais carrément pas pensé.

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

Discussions similaires

  1. [CSS 3] Bouton background-color avec Bootstrap 2
    Par Leinox dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 17/06/2014, 11h22
  2. [Débutant] trackbar avec background color transparent
    Par softcode dans le forum C#
    Réponses: 0
    Dernier message: 08/12/2011, 12h36
  3. Faire passer le border devant le background-color et non l'inverse
    Par Marc22 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 15/03/2010, 09h02
  4. Problème avec background-color
    Par LEF97 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/10/2009, 10h16
  5. Probleme avec div + css background-color
    Par shwin dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 11/01/2006, 00h14

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