28173 sujets

CSS et mise en forme, CSS3

Inclusion de boite en width:auto.

Bonjour,

dans une boîte contenante dont la largeur est fixée en auto, je place une seconde boîte dont la largeur est elle aussi fixée en auto.
avant tout, je le signale à tout hasard, ça peut être utile : si je me souviens bien, une taille fixé en pourcentage est calculée à partir de l'ancêtre le plus proche dont la taille est fixée; dans une boîte dont la taille n'est pas fixé explicitement, un width:100% fait référence à une boîte englobante, voire le body lui-même.

Bref, dans mon cas, je fixe la taille de ma boite intèrieure en auto, je ne peux pas la fixer à 100% à cause du comportement que je viens d'évoquer. Pas de problême sous Firefox, mais sous explorer, ma boîte ne se positionne pas exactement au bord gauche du cadre de ma boite englobante, laissant un espace de quelques pixels entre ma boîte intèrieur et le bord de celle qui la contient.Si la taille de ma boîte contenante ou celle de ma boite contenue est fixée à 100%, je n'ai plus ce décalage...

Avant de démonter complètement mon code, je me demandais si ça ne viendrait pas d'explorer, comme d'habitude : donc, est ce que par hasard c'est un problême connu ?

Merci et bon week end.
Modifié par lex (26 Aug 2007 - 15:32)
Bonjour,
si ta boîte englobante est le body, ce sont ses marges par default qui créent
l'espace (si celles-ci ne sont pas annulées) Si ce n'est pas le cas il faudrait
que tu puisses donner le bout de code correspondant.
Modifié par Hermann (26 Aug 2007 - 15:48)
Merci pour la réponse;

il ne s'agit pas du body, et j'ai pris soin d'annuler les marges et paading par défaut qui varient d'un navigateur à l'autre.

pour le html :

<body>
	<!--------------------------------- 		NAVIGATION 		--------------------------------->	
	<div id="menu">
	</div>

	<a href="#" name="content"></a>
	<!--------------------------------- 		CONTENU 		--------------------------------->
	<!-- AFFICHAGE -->
	 <!-- pour éviter la sélection de l'image  -->
	<div id="content" >
		<div id="uri">
			<span id="uri_paper"><strong><a href="/presseIllustree/search"><?=$paper_name;?></a></strong></span> 
			<span id="uri_issue">» <a href="">fascicule n°<strong><?=$issue_number;?></strong> ( <?=($issue_date)?formateDate($issue_date):null;?> )</a></span>
			<?php if ( $page_number ) :?><span id="uri_page">» <a href="">pp.<strong><?=$page_number;?></strong></a></span><?php endif; ?>
		</div>
	<!-- FOOTER -->
	<div id="footer">
	</div>
</body>


pour le css :

body {
	background      	: #fafafa 
	}
#menu { /* colonne de gauche */
	float				: left;
	width				: 155px;
	}
#content { /* colonne de droite */
	margin-left			: 155px;
	width				: auto;
	}
#footer {
    clear				: both;
	padding-left		: 155px;
}


et la boite problematique :


#content #uri{
	display				: block;
	position			: relative;
	top				: -24px;
	width				: auto;
	height				: 45px; (*)
	}


j'en ai profité pour tester avec ce bout de code minimal, et je me retrouve avec le même probleme (sous ie6). bon, au moins, je sais que ça vient pas du reste de mon code... Merci en tout cas, de te pencher sur mon problême...

(*) : après vérification sur ce code minimum, le code "plante" dès qu'on affecte une taille verticale au bloc contenu.

tiens, dans la série, "je vais encore perdre quelques heures à cause des gars de Redmond", je viens de m'apercevoir que quand on redimmenssionne une fenêtre, les éléments positionnés, ben sous ie, ils restent sur place : c'est à dire qu'explorer ne les repositionne pas dynamiquement quand la fenêtre est redimenssionnée ! j'ai rêvé ou quoi ?
Modifié par lex (26 Aug 2007 - 16:48)
C'est dû à un bug de haslayout (je te conseil de lire la première partie de cet article pour bien comprendre ce concept).

Donc ça peut se régler avec un height:1%;
Le mieux étant de placer ce correctif dans une feuille de style spécifique à IE via les commentaires conditionnels (voir la FAQ).
#content { 
	margin-left:155px;
	height: 1%;
	}

Le width et height:auto ne servent à rien ici puisque c'est la valeur par default des ces propriétés.
Modifié par Hermann (26 Aug 2007 - 16:47)
Hermann a écrit :
C'est dû à un bug de haslayout (je te conseil de lire la première partie de cet article pour bien comprendre ce concept).

Donc ça peut se régler avec un height:1%;
Le mieux étant de placer ce correctif dans une feuille de style spécifique à IE via les commentaires conditionnels (voir la FAQ).
#content { 
	margin-left:155px;
	height: 1%;
	}



Un grand merci ! Quant aux "spécialités" propres à ie, il va de soi qu'elles sont toutes dans mon cas réunies dans un fichier à part. Je garde ainsi un css propre conforme aux spécifications w3c, avec l'espoir qu'un jour j'aurais juste à jeter aux orties mes fichiers correctifs ie... on peut rêver.

Hermann a écrit :

Le width et height:auto ne servent à rien ici puisque c'est la valeur par default des ces propriétés.

Juste à me rappeler qu'il y a une bonne raison pour laquelle je les ai laissé en auto Smiley lol
Hermann a écrit :
C'est dû à un bug de haslayout (je te conseil de lire la première partie de cet article pour bien comprendre ce concept).

Donc ça peut se régler avec un height:1%;
Le mieux étant de placer ce correctif dans une feuille de style spécifique à IE via les commentaires conditionnels (voir la FAQ).
#content { 
	margin-left:155px;
	height: 1%;
	}



Bon, en fait ça ne marche qu'à moitié. C'est à dire que la marge disparait bien dans mon conteneur, mais elle est reportée à l'extèrieur de celui-ci... Le comportement devient assez halucinant d'ailleurs : quel que soit la marge imposée à mon conteneur (ici 155px) elle n'est pas prise en compte. L'élément flotte à gauche de la boite "menu" qui précède... avec une marge de quelques pixels.

J'ai essayé d'ajouter un height:1% à l'élément body qui englobe mon conteneur, mais baste, rien ne se passe...
Bonjour,
je ne vois pas trop d'ou vient ton problème. Peut-être que quelqu'un ici t'apportera une aide.

Tu n'as dû lire l'article auquel je fais référence Smiley cligne
Les éléments suivant (dont le body) ont déja le layout, leur attribuer un height:1% n'aura donc aucun effet.

  * <table>
    * <td>
    * <body>
    * <img>
    * <hr>
    * <input>, <select>, <textarea>, <button>
    * <iframe>, <embed>, <object>, <applet>
    * <marquee>

Modifié par Hermann (27 Aug 2007 - 17:20)
Je l'ai lu, évidemment. Smiley cligne mais le desespoir me fait essayer même les solutions les plus absurdes...

Pour mon problême, sinon, le bout de code le reproduit même dans ce dernier développement de la marge à l'extèrieur. il s'agit probablement d'une conséquence de la gestion bizarre des layout de ie, mais la solution du height:1% (en fait n'importe quelle valeur, ce qui explique que dans la plupart des cas il est corrigé d'emblée)

Bon, je suis relativement serein, c'est le dernier gros bug que j'ai encore sous explorer. Merci encore. Et je suis preneur de tout début de piste pour ceux qui auraient déjà été confronté à ce problême (on peut s'en tirer avec un positionnement absolu de l'élément, mais je préfèrerais éviter...)
Sujet clos
Aller à