[résolu] Problème de height IE et Firefox

Bonjour, pour bien comprendre et faire simple :

http://ombre.et.lumiere.free.fr/images/ie1.jpg
Là on a IE

http://ombre.et.lumiere.free.fr/images/ff.jpg
Et là on a firefox...

Voilà donc mon soucis... je voudrais que ça soit comme IE que ma barre grise s'allonge. Sa valeur est en height="100%" dans un <div>. Je l'ai déjà fait sur le site dans d'autres endroits et ça ne pose pas de soucis... C'est juste ici que se pose le problème.

Le code html :

<tr><td class="carreg" colspan="2"><div class="carregauchegris">&nbsp;</div></td></tr>

Le code css :

td.carreg
{
width:155px;
height:100%;
}

div.carregauchegris
{
position:relative;
margin-left:16px;
background-color:#cacaca;
width:5px;
height:100%;
}

J'ai essayé de faire une <table> à la place mais même résultat... Si quelqu'un peut m'aider je le remercie d'avance !
Modifié par sanosuke85 (11 Mar 2006 - 12:43)

Attention, à utiliser des tableaux pour la mise en forme dans un forum intitulé « Forum Alsacréations : CSS et Standards Web », tu risques de te faire lyncher !

Pour ma part, je me demande surtout pourquoi tu n'utilises pas une simple div pour toute cette zone, et une bordure pour le trait gris. C'est pour obtenir le petit dégradé en haut ?
Dans ce cas je conseille une petite image de fond en repeat-y et positionnée à gauche pour la bordure et une autre avec le petit dégradé, en no-repeat et toujours alignée à gauche, pour le petit dégradé (à placer sur un élément à l'intérieur du conteneur).

Mais ça ne m'a pas l'air super compatible avec ta structure de page, que tu ne donnes pas d'ailleurs. Tu n'aurais pas un lien vers la page en question, qu'on puisse voir ce que ça donne ?

Bonjour, Avant tout merci de ta réponse.

Effectivement je conçois le soucis de poster pour du html avec mise en tableau pour la structure de ma page... Je commence un peu à utiliser le CSS mais je suis encore un peu novice en la matière. J'assure donc mon développement qui se doit d'être rapide (c'est mon site promotionnel donc..) par le html que je connais bien.

Pour la structure de page, je vais te donner le code source ; ça peut être un peu "cafouillis" mais j'ai fait rapidement ce site...

<style>

/*---------------------------------------- body général -------------------------------------------------*/
body{
background-image:url("images/fond2.jpg");
background-attachment:fixed;
background-repeat: no-repeat;
background-position: 70% 50%;
font:1em Arial,"times new roman",Geneva,Helvetica,sans-serif;
margin:0;
padding:0;
}

/*------------------------------------------- LIENS -----------------------------------------------------*/
/* liens des menus*/
a.menu:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:14px;font-weight:bolder;}
a.menu:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* lien actuel */
a.menu2:link {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}
a.menu2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:15px;font-weight:bolder;}

/* liens des sousmenus*/
a.soustitre:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre:hover {color:#000000;text-decoration:none;font-family:arial;font-size:13px;font-weight:bolder;}

/* lien actuel sous menu*/
a.soustitre2:link {color:#797979;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre2:visited {color:#797979;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}
a.soustitre2:hover {color:#000000;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;}

/* lien pour les mentions légales */
a.mentions:link {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:visited {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}
a.mentions:hover {color:#cacaca;text-decoration:none;font-family:arial;font-size:12px;font-weight:bolder;font-style:italic;}

/*------------------------------------------- TD --------------------------------------------------------*/

/* td de contenu */
td.contenu
{
width:640px;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:12px;
vertical-align:top;
padding:30px;
padding-top:50px;
height:100%;
}

/* -------------------------------------------------*/

/* td droite degradé */
td.degradedroit
{
width:5px;
height:100%;
vertical-align:top;
}

/* -------------------------------------------------*/

/* td du haut avec le dégradé */
td.hautg
{
width:150px;
height:60px;
}

/* -------------------------------------------------*/

/* td du bas de menu avec le dégradé */
td.basg
{
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 11% 100%;
width:150px;
height:60px;
}

/* td de menu */
td.menu
{
background-image:url("images/plumemenu.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#999999;
width:150px;
height:50px;
}

/* td de sous menu */
td.sousmenu
{
vertical-align:top;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#999999;
width:150px;
height:25px;
}

/* td haut pour degradé de droite */
td.hautdroit
{
width:5px;
height:30px;
}

/* td milieu pour degradé de droite */
td.milieudroit
{
width:5px;
height:100%;
}

/* td bas pour degradé de droite */
td.basdroit
{
width:5px;
height:30px;
}


/* td du carre gris continu */
td.carreg
{
width:155px;
height:100%;
}

/* -------------------------------------------------*/

/* td pour la barre droite du menu */
td.bgris
{
width:5px;
height:100%;
vertical-align:top;
}

/* -------------------------------------------------*/

/* td pour le pied de page à gauche */
td.piedpagegauche
{
width:790px;
height:50px;
vertical-align:top;
}

/* td pour les mentions légales */
td.plumebas
{
background-image:url('images/plumebas.jpg');
background-repeat: no-repeat;
background-position: 100% 50%;
height:50px;
width:230px;
vertical-align:top;
}

/*------------------------------------------------- DIV ---------------------------------------------------*/

/* degradé en haut à gauche */
div.degradentiergauche
{
background-image:url('images/deggtot.jpg');
background-repeat: no-repeat;
background-position:0% 50%;
width:5px;
height:60px;
margin-left:16px;
}

/* -------------------------------------------------*/

/* div pour le haut de la barre droite du menu */
div.bgrish
{
position:relative;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* div pour le haut de la barre du milieu du menu */
div.bgrism
{
z-index:2;
background-color:#cacaca;
width:5px;
height:100%;
}


/* div pour le haut de la barre basse du menu */
div.bgrisb
{
z-index:3;
background-image:url("images/degbas.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* format des titres du menu*/
div.titres
{
position:relative;
background:none;
margin-top:6px;
margin-left:43px;
}

/* format des titres des sous menu*/
div.soustitres
{
position:relative;
background:none;
margin-top:6px;
margin-left:20px;
font-size:12px;
padding-left:5px;
padding-right:5px;
font-weight:bolder;
}

/* -------------------------------------------------*/

/* carre de gauche qui s'allonge */
div.carregauchegris
{
position:relative;
margin-left:16px;
background-color:#cacaca;
width:5px;
height:100%;
}

/* -------------------------------------------------*/

/* degradé droit haut */
div.degdroith
{
position:relative;
margin-top:70px;
z-index:1;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* carre de droite qui s'allonge */
div.carredroitegris
{
position:relative;
z-index:2;
background-color:#cacaca;
width:5px;
height:100%;
}

/* dégradé droit bas */
div.degdroitb
{
position:relative;
margin-top:70px;
z-index:3;
background-image:url("images/deghaut.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
width:5px;
height:30px;
}

/* -------------------------------------------------*/

/* barre grise du bas à gauche pied de page */
div.carrepiedgauche
{
position:relative;
background-color:#cacaca;
width:100%;
height:5px;
}

/* carre bas qui s'allonge */
div.carregrisbas
{
position:relative;
margin-left:16px;
background-color:#cacaca;
width:500px;
height:5px;
font-size:1px;
}

/* degradé droit en pied de page */
div.degdroit
{
background-image:url('images/degdroite.jpg');
background-repeat: no-repeat;
width:30px;
height:5px;
font-size:1px;
}

/* -------------------------------------------------*/

/* plume en bas à droite */
div.basdroite
{
position:relative;
margin-top:14px;
font-size:12px;
font-weight:bolder;
font-family:arial;
font-style:italic;
color:#cacaca;
}

/*------------------------------------------------------- copyright ---------------------------------------------*/
p.copy
{
color:#cacaca;
font-family:arial;
font-size:12px;
font-style:italic;
}

</style></head>
<body><center>
<table border="0" width="790" cellspacing="0" cellpadding="0" height="100%">
<ul style="list-style-type:disc;">
	<tr>
		<td width="785" height="102" colspan="3"><img src="images/banniere.jpg"></td><td class="degradedroit" rowspan="2">
			<table border="0" cellspacing=0 cellpadding=0 width="5" height="100%" style="vertical-align:top;">
				<tr>
					<td class="hautdroit"><div class="degdroith"> </div></td>
				</tr>
				<tr>
					<td class="milieudroit"><div class="carredroitegris"> </div></td>
				</tr>
				<tr>
					<td class="basdroit"><div class="bgrisb"> </div></td> 
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td width="155" height="100%">
			<table border="0" cellspacing="0" cellpadding="0" width="155" height="100%" style="vertical-align:top;">
				<tr>
					<td class="hautg"><div class="degradentiergauche"></div></td>
					<td width="5" height="60" valign="bottom"> </td>
				</tr>
			
<tr><td class="menu"><div class="titres"><a href="index.php?page=accueil" class="menu2">Accueil</a></div></td><td width="5" height="50" style="background-color:#cacaca;" valign="top"><div class="bgrish"></div></Td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=prestations" class="menu">Prestations</a></div></td><td width="5" rowspan="4"><div class="bgrism"></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=references" class="menu">Références</a></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=livreor" class="menu">Livre d'or</a></div></td></tr><tr><td class="menu"><div class="titres"><a href="index.php?page=contact" class="menu">Contact</a></div></td></tr>			<tr>
				<td class="basg"> </td><td width="5" height="60" valign="top"><div class="bgrisb"> </div></td>
			</tr>
			<tr>
				<td class="carreg" colspan="2"><div class="carregauchegris"> </div></td>
			</tr>
			</table>
		</td>
		<td class="contenu">
</td>
	</tr>
	<tr>
		<td colspan="4" class="piedpagegauche">
			<table border="0" cellspacing="0" cellpadding="0" width="790" height="50">
				<tr>
					<td height="30" width="30"><div class="carregauchegris"> </div></td>
					<td height="30" width="530"> </td>
					<td width="230" rowspan="3" height="50" class="plumebas" align="center"><div class="basdroite"><a href='index.php?page=mentions' class='mentions'>Mentions</a>                       <a href='index.php?page=mentions' class='mentions'>Légales</a></div></td>
				</Tr>
				<tr>
					<td height="5" width="560" colspan="2" style="vertical-align:top;">
						<table border="0" width="560" cellspacing="0" cellpadding="0">
							<tr>
								<td width="500"><div class="carregrisbas"> </div></td>
								<td width="60"><div class="degdroit"> </div></td>
							</tr>
						</table>
					</Td>
				</tr>
				<tr>
					<td height="15" width="560" colspan="2"> </td>
				</tr>
			</table>					
		</td>
	</tr>
</ul>
</table>
<center><p class='copy'><b>Copyright © Ronan TEXIER 2006</b></p></center>
</body>
</html>

C'est long je m'en excuse mais je n'ai pas encore mis en ligne le site (des gens ayant l'adresse on comprendra je pense).

EDIT : je suis ouvert à toute suggestion sur ma façon de coder je ne suis pas quelqu'un de parfait donc il ne faut pas hésiter. C'est ainsi qu'on apprend et qu'on s'améliore, en écoutant les critiques (negatives ou positives) et en les analysant pour les comprendre.
Modifié par sanosuke85 (04 Mar 2006 - 20:28)

Bon, j'ai essayé de reconstituer ta page à partir de ce que tu donnes, mais vu que je n'ai aucune image, je ne vois pas du tout ce qu'on est censé obtenir.
Si tu as une maquette de type image (en jpeg par exemple), on peut peut-être te donner un coup de main sur la structuration.

Ce qui m'étonne, c'est que tu as trois kilomètres de CSS pour très peu de contenu...

Enfin bref, d'après ce que j'en vois, ta page toute entière est structurée en tableaux. Je dirais même plus : en tableaux imbriqués.
Or les tableaux ne sont pas prévus pour la mise en page, au départ. Pour la mise en page, on a les CSS, et ça marche plutôt bien. Mais comme c'est relativement complexe (surtout pour tout ce qui est du domaine du positionnement), on a recours aux tableaux pour établir la structure de la page.
Bon, à la rigueur on peut avoir un tableau général pour la page, ou ponctuellement dans le code pour réaliser facilement l'alignement horizontal d'éléments. C'est pas tip top, mais ça passe.

Par contre, ce qu'il faut proscrire :
- les tableaux imbriqués (un tableau dans une cellule d'un tableau dans une cellule d'un tableau dans une cellule d'un tableau...), cauchemar d'accessibilité, mais aussi super lourds à gérer je trouve ;
- les éléments vides rajoutés uniquement pour la mise en page (comme deux de tes tableaux, et peut-être une quinzaine de tes cellules de tableaux).

Partant de là, tout dépend de ta situation :
- tu fais un site perso vite fait pour toi ou pour des amis, et tu préfères garder les choses en l'état en corrigeant les plus gros problèmes si possible ;
- tu comptes réaliser d'autres sites à l'avenir, auquel cas je ne peux que t'inciter à passer aux standards du web et à te former un peu aux technologies comme XHTML et CSS.

Bien, je te remercie déjà pour tous tes conseils et ta franchise.

je vais t'envoyer par mail si cela te dérange pas l'impression d'écran du site (y'a des données personnelles). Je prends l'adresse mail mise sur ce site.

Merci encore.

Bien...

Mpop suite à tes conseils me voilà parti dans la mise en page css. Et voilà un soucis où je suis confronté qui m'exaspère un peu... J'ai lu divers tutoriaux sur le sujet, mais toujours le même dilème :

marging et padding différents sur IE et Firefox...

J'ai tenté une mise en page mais naturellement si c'est bien sur IE c'est "faussé" sur firefox et inversement.

Je désire aligner dans un <div> un autre <div> qui contient du texte (un menu). Je ne peux pas faire sous système de liste car il y a un arrière plan pour chaque menu...

Je pense qu'il n'est pas utile d'avoir tous les éléments de mon code car finalement le soucis est de positionner deux blocs : un dans l'autre...

div.menu
{
background-image:url("images/plumemenu.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
font-family:Arial,"times new roman",Geneva,Helvetica,sans-serif;
font-size:14px;
font-style:italic;
color:#999999;
width:150px;
height:50px;
}

div.titres
{
position:relative;
background:none;
margin-top:16px;
margin-left:43px;
}

Voilà... Dans IE pas de soucis... Dans Firefox les 16px et les 43px sont ajoutés à la longueur et hauteur du <div menu>...

Si vous avez une solution... Ce serait vraiment très utile merci d'avance !

EDIT : je précise que les titres du menu doivent commencer à 43 px du bord gauche... Obligatoirement vis à vis de mon "design".
Modifié par sanosuke85 (06 Mar 2006 - 19:21)

Bien je reposte une dernière fois pour indiquer que... euh la solution est arrivée un peu au hasard... Si solution il y a vraiment. en fait je fais un border:1px solid; sur le <div> conteneur. Je mets la bordure en blanc pour qu'elle ne se voit pas et là autant IE que Firefox prennent en compte les margin-top et margin-left... Voilà.