28221 sujets

CSS et mise en forme, CSS3

[résolu] Padding-right qui ne marche pas sous firefox

bonjour a tous ! Smiley biggrin

bon voici mon probleme, en fait c'est un probleme de compatibilité IE/Firefox, mais etant donné que Firefox est plus exigeant je me dis forcemment que il doit y a voir un probleme avec mon Css.

mon objectif est de créer un bloc en 100 % de large. de créer une marge droite pour le contenu de ce bloc de 250 px. jusque la tout va bien -->

la div en CSS : 

#conteneur_haut {
BACKGROUND: #FFFFFF; 
LEFT: 0px; 
WIDTH: 100%; 
POSITION: absolute; 
TOP: 100px; 
HEIGHT: 250px; 
BORDER-BOTTOM: #FFFFFF 1px solid; 

padding-right: 250px; 
vertical-align: middle; 
display: table-cell;



La ou ca se complique c'est que maintenant je voudrais ajouter dans ce meme bloc, une div qui serait en 100 %, qui serait donc lui aussi margé a droite a 250 px du bord et auquel j'aimerai ajouter un ascenceur (j'ai ajouter le css directement dans la page et pas dans la feuille de styles)


code : 

.frame 

{
	margin-left: 10px;
	width: auto;
	height: 240px;
	overflow: auto;
	overflow-x : hidden;
	

    scrollbar-face-color:#FFFFFF;
	scrollbar-shadow-color:#8F8349;
	scrollbar-highlight-color:#8F8349;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-darkshadow-color:#FFFFFF; 
	scrollbar-track-color:	#FFFFFF;
	scrollbar-arrow-color:	#C1B885;
	margin: 5;
}


Code Html : 


<DIV id=conteneur_haut>
<div class="frame"> 
<p>
bla bla bla bla bla bla bla........
</p>
</div>
</DIV>


voila sous IE ca marche niquel pas de probleme avec le ptit ascenceur et tout, ca chasse en fonction de la taille du navi. Mais sous Forefox ca chasse bizarrement sur la gauche et ca me met un ascenceur horizontal Smiley decu

Si qq a une solution ! je comprend vraiment pas pquoi ca marche pas...

Merci par avance de vos réponses !
Modifié par Precu (16 Feb 2005 - 13:16)
Tu viens de découvrir la différence entre le modèle de boîte Microsoft, et le modèle de boîte Standard.

Avec le modèle standard, impossible d'avoir par exemple un bloc qui ferait 100% avec une bordure ou du padding. Parce que la propriété width est en fait la largeur du contenu, donc sans marge, ni bordure, ni padding.

Le seul moyen est de procéder comme ceci : tu rajoute une <div> avec une margin-right de 250px dans ta <div> qui fait 100% de large.


Sinon, je pense personnellement que le modèle de boîte Microsoft est plus logique : il permet d'avoir une boîte avec bordure et padding, tout ça avec des % Smiley smile . D'ailleurs, en CSS3, on pourra choisir le modèle désiré.
ok merci je vais essayer le truc.. j'espere que ca va marcher !

Sinon si qq a d'autre infos sur le probleme n'hesiter pas !

Merci encore a FlorentG Smiley biggrin !
Administrateur
Precu a écrit :
Sinon si qq a d'autre infos sur le probleme n'hesiter pas !

La FAQ par exemple Smiley cligne

Ps : c'est un problème de mise en page, donc je déplace dans le salon CSS Smiley smile
Modifié par Raphael (16 Feb 2005 - 13:04)
Sujet clos
Aller à