28220 sujets

CSS et mise en forme, CSS3

[Problème] Tableau qui déborde dans IE

Hello Hello Happy Forumeurs(ses) Smiley cligne

Z'aller (peut être) me dire : takapa utiliser des tableaux
mais c'est quand même le meilleur moyen de présenter et d'ordonner des données et de les trier en cliquant sur les colonnes, ce qui est le cas

Voici donc le machin sous Firefox :

upload/4598-FFok.png

et son caca sous IE :

upload/4598-IEbugTable.png

J'ose pas regarder encore ce que ça peut donner sous d'autres navigateurs. Smiley lol
Modifié par Haddock (29 Dec 2005 - 09:23)
non ce n'est pas le cas : l'image vient d'être ajoutée et ne fait que 4 pixels de large.
C'est un filet de séparation.
Que dois-je vous donner comme information ?
Le code ?
Mille sabords ! j'y arrive pas !
Cette cochonnerie d'IE me fait déborder mes tableaux de la page.
le conteneur dans la CSS indique pourtant cela :

#page {
margin-left: auto; margin-right: auto; width: 99%; min-width: 770px; max-width: 1000px;
}

et les tableaux se contruisent ainsi :

echo "<table class='tableborder' border='0' cellpadding='3' cellspacing='0' width='100%'>
	<tbody><tr>
		<td class='toolbar' colspan='2'>
		<ul id='toolbar'>
			<li id='tblogo'><a href='#'></a></li>
			<li><img src='../themes/TMII/navsep2.gif' alt='sep'></li>
			<li id='tbprojects'><a href='#'>Vos projets</a></li>
			<li id='tbsite'><a href='#'>Site des projets</a></li>
			<li id='tbcal'><a href='#'>Votre agenda</a></li>
			<li id='tbprefs'><a href='#'>Vos préférences</a></li>
			<li><img src='../themes/TMII/navsep2.gif' alt='sep'></li>
			<li style='float: right;' width='98' height='31' id='tbtm'><a href='#'></a></li>
		</ul>
		</td>
	</tr>
	</table>";

quoique je fasse, ils débordent toujours !
Sur un forum j'ai lu que c'était normal avec IE.
Normal, normal... je veux bien. Mais comment le contraindre ?
une réponse similaire a été donné dans le forum des débutants

Le problème provient des "margin-left: auto; margin-right: auto;"
que tu as mis dans ta CSS.

l'explication a été donné par Habot et se trouve au lien suivant :

http://openweb.eu.org/articles/dimensions_boites_css/

En gros il te faut définir les valeurs de margin et de padding.

Smiley cligne
Modifié par philippe84 (31 Dec 2005 - 11:23)
Merci pour ta réponse... elle a réussi malgré mon esprit embrumé à me réveiller pour essayer ce que préconisé.
Hélas, quoique je fasse en jouant sur les marges et le remplissage rien n'y fait Smiley eek
dans IE mon tableau déborde toujours : c'est infernal !
Mais je m'y prends mal sans doute.
ça commence mal pour moi 2006 ! Smiley smile
Je ne comprends rien aux modes d'interprétation d'IE mille sabords !
Si je donne à mon tableau une valeur de 100% est-ce qu'il comprend 100% à l'intérieur du conteneur ou 100% de la fenêtre ?

J'en suis toujours au même point et totalement découragé. Smiley confus
j'avais aussi pensé à cela : mais même si je donne au tableau une margeur fixe ainsi qu'au conteneur cela déborde toujours.
Je ne m'étais jamais affronté aux tableaux (en utilisant toujours la mise en page par CSS) mais là je n'y échappe pas : la page doit présenter des données issues de MySQL avec des colonnes pouvant être triées.
le reste du code de la CSS concernant le problème du 1er tableau est celui-ci :
.toolbar { margin: 0px; padding: 0px 0px 0px 6px; background: url(toolbar_bg.gif) #f4f4f4; color: #000000; }
#toolbar {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 100%;
	background: url(toolbar_bg.gif) #f4f4f4;
	color: #000000;
	font-size: 9px;
}
#toolbar ul{ margin: 0; padding: 0px; list-style: none; }
#toolbar li{ float: left; margin: 0 0 0 1px; padding: 0; display: inline; text-align: center; vertical-align: middle; }
#toolbar a{ margin-left: 1px; margin-right: 1px; padding: 39px 5px 3px 5px; display: block; color: #000000; text-decoration: none; }
#toolbar a:active{ border-left: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; margin-left: 0px; margin-right: 0px; background: url(toolbara_bg.gif) #f4f4f4; color: #000000; }
#toolbar #tcurrent a{ border-left: 1px solid #b6b6b6; border-right: 1px solid #b6b6b6; margin-left: 0px; margin-right: 0px; background: url(toolbara_bg.gif) #f4f4f4; color: #000000; }
#toolbar #tblogo a { padding: 0px; margin: 0px; width: 170px; border: 0px; display: block; background: url(site_logo.gif) no-repeat; height: 55px; }
#toolbar #tblogo:active { border: 0px; margin: 0 0 0 1px; }
#toolbar #tbprojects:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbprojects a { display: block; background: url(projects.gif) no-repeat top center; }
#toolbar #tbprojects a:active { display: block; background: url(tb_forum_a.gif) no-repeat top center; }
#toolbar #tbsite:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbsite a { display: block; background: url(sites.gif) no-repeat top center; }
#toolbar #tbsite a:active { display: block; background: url(sites.gif) no-repeat top center; }
#toolbar #tbprefs:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbprefs a { display: block; background: url(prefs.gif) no-repeat top center; }
#toolbar #tbprefs a:active { display: block; background: url(prefs.gif) no-repeat top center; }
#toolbar #tbcal:active { background: url(toolbara_bg.gif) #f4f4f4; }
#toolbar #tbcal a { display: block; background: url(cal.gif) no-repeat top center; }
#toolbar #tbcal a:active { display: block; background: url(cal.gif) no-repeat top center; }
#toolbar #tbtm a {
	padding: 0px;
	margin: 0px;
	width: 98px;
	border: 0px;
	display: block;
	background: url(tb_tm.gif) no-repeat;
	height: 55px;
	z-index: auto;
}
#toolbar #tbtm:active { border: 0px; margin: 0px; }

infernal ce truc Smiley decu
Sujet clos
Aller à