28111 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Voila, j'applique un background (image de type png transparent) sur une balise <tr>

côté css, ça me donne ça

table.tiny{
	width:390px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	margin-top:10px;
	border-width:0;
	border-collapse:collapse;
}
tr.tiny_head { background : url(../pic/table_tiny_head_01.png); }
th {
	font-style : italic;
	font-weight: bold;
	color : #e0621c;
}


côté html

<table class="tiny">
		<tr class="tiny_head">
			<th>Nom</th>
			<th width="7%"></th>
		</tr>
........
</table>


Sous Firefox & Opéra, aucun probleme. Sous IE7, l'image s'applique non sur le <tr> mais se répète à chaque cellule <th>
Voila deux images pour bien illustrer mon problème.

upload/13794-nok.jpg upload/13794-ok.jpg

Merci d'avance pour votre aide.
Salut,

Aurais tu une page en ligne ou au moins l'intégralité du code html et css, pour t'aider, ça sera plus simple. Smiley cligne
Je pensais que ce que j'avais donné suffirait Smiley lol
Le site n'est pas en ligne mais je peux fournir le code
Je vais essayer de mettre en gras, les parties qui nous intéressent.

css

/*<!CDATA[*/
@media screen, projection
{
	.cache { display: none; }
}
/*]]>*/

html, body {
	background-color:#222222;
	/*background-color:#c8beb7;
	background-color:#ff9ab9;*/
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 11px;
	height: 100%;
	margin: 0;
}

/* DIV */

div#global {
	min-height: 100%;
	width: 1007px;
	padding: 0;
	margin: 0 auto;
	position: relative;
}

div#centre {
	padding-bottom: 16px;
	margin-top:1px;
	overflow: auto;
}

div#content {
	float: left;
	padding-left:0px;
	padding-right:1px;
	width: 805px;
}

div#content_nav {
	color:white;
	font-weight:bold;
	display:block;
	font-size:95%;
	padding:2px 2px 2px 2px;
	background: url(../pic/content_nav_01.png);
}

div#content_main {
		background: url(../pic/content_02.png) repeat-y;
		min-height:529px;
}
div#content_bottom {
		background: url(../pic/content_bottom_02.png);
		height:19px;
}

div#head_block {
	margin:0;
	padding:0;
	background-image: url(../pic/banniere_02.png);
	color: #e0621c;
	text-align: right;
	padding-right:10px;
	/*font-weight: bold;*/
	font-size:98%;
	height:50px;
}

div#side {
	float: right;
	width: 195px;
	padding-right:4px;
}

div#footer {
	position: absolute;
	width: 1007px;
	height:16px;
	bottom: 0;
	color: black;
	background: url(../pic/footer_02.png);
	font-weight: bold;
	text-align:center;
}

div#topleftG,div#topleftE,div#toprightG,div#toprightE,div#btleftG,div#btleftE,div#btrightG,div#btrightE,div#subS { display:none;}


/* SPAN */

span.nav, span.nav2 {
	color:white;
	font-weight:bold;
	background-color:black;
	display:block;
	font-size:95%;
	padding:2px 0 2px 0;
}
span.nav2 {
	font-size:98%;
	text-align:center;
}
span.intro {
	font-weight:bold;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	display:block;
}

span.erreur {
	font-weight:bold;
	text-align:center;
	padding-top:2px;
	padding-bottom:2px;
	display:block;
	color:RED;
}

span.info, span.probleme {
	font-weight:bold;
	color:black;
	display:block;
	background-color: #7fb6fb;
	text-align:center;
}
span.probleme {
	color:white;
	background-color:red;
}

span.adminOption {
	margin-top:5px;
	display:block;
	text-align:center;
}

span.head_stats {
	background-color : #00CCFF ;
	border-width : 1px;
}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul.gstats,ul.gstats li{list-style-type:none;margin:0;padding:0;}
ul.gstats{margin-left: 0px;background-color:#f3ecec;}
ul.gstats li{float:left;margin-right: 3px;text-align: center;}
ul.gstats a{float:left;width: 6em;padding: 2px 0;background: #99cccc;text-decoration:none;color: #666;}
ul.gstats a:hover{background: #7b81c6;color: #FFF;}
ul.gstats li.activelink a,ul.gstats li.activelink a:hover{background: #7b81c6;color: #003;}

#sidemenu dl {
	/*float: left;*/
	width: 100%;
	padding:0;
}
#sidemenu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	/*background: #fff;*/
	border-bottom: 1px solid gray;
	/*margin: 1px;*/
}
#sidemenu dd {
	display: none;
	border: 1px solid gray;
}
#sidemenu li {
	text-align: center;
	/*background: #fff;*/
}

#sidemenu li a, #sidemenu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}
#sidemenu li a:hover, #sidemenu li a:focus, #sidemenu dt a:hover, #sidemenu dt a:focus {
	background: #ccc;
}

/* FORM */

form .default {
/*	font-size:85%;*/
	margin-top:10px;
}

input.texte {
	background-color:#62a5e3;
	border: 1px solid #666666;
	font-size:85%;
}

input.boutton {
	border: 1px solid #666666;
	background-color: #d2d2e7;
	font-size:85%;
}

select.texte {
	background-color:#62a5e3;
	border: 1px solid #666666;
	font-size:85%;
}

/* TABLE */

table.default ,table.tiny, table.default_invisible,table.service, table._650_v2{
	width:780px;
	margin-left:auto;
	margin-right:auto;
	/*border-width:2px;
	border-style:groove;*/
	border-width:0;
	border-collapse:collapse;
}

table.tiny {
	width:390px;
	margin-bottom:10px;
	margin-top:10px;
}
table.service {width:200px;}
table.question {width:100px;margin-left:auto;margin-right:auto;}
table.default_invisible {border-width : 0;}

table.default_invisible td {vertical-align: top;}

table.stats {
	width:395px;
	margin-left:1px;
	margin-right:1px;
	margin-top:1px;
	border-collapse:collapse;
}

table.stats caption {
	color:blue;
	font-style: italic;
}

tr.center, tr.centerT, tr.titre,tr.coloraltern_c {
	text-align:center;
	height:19px;
	padding:0;
	border-width:0;
}
tr.centerT {background-color: black; color: white;}

tr.titre {font-style:italic;}

tr.highlight1:hover, tr.center:hover, tr.coloraltern_c:hover {
  background-color:#4169E1;
  font-weight:bold;
}

tr.coloraltern,tr.coloraltern_c { background-color: #CCCCCC;}

tr.tiny_head { background : url(../pic/table_tiny_head_01.png); }

th {
	font-style : italic;
	font-weight: bold;
	color : #e0621c;
	/*background : none;*/
/*	background-color:#d2d2e7;*/
/*	border:1px solid black;*/
}

td.libel {font-weight:bold;}

td.borde { padding:0;}
td.bordeCT {text-align:center;background-color:black;font-weight:bold;color:white; }

td.droit {text-align: right; font-weight:bold; }
td.gauche {text-align: left; font-weight:bold;}

table.tiny caption {
  font-style:italic;
  text-align:center;
/*  display:block;*/
}

a.lienboutton ,a.lienbouttondel, a.lienbouttonedit, a.bouttonblock{
	background-color: #4cbdc7;
	border: 1px solid #666666;
	padding: 0px;
	font-weight:bold;
	color:black;
	text-align:center;

}
a.lienbouttondel {display:block;padding:0;margin:0;}
a.lienbouttonedit {display:block;padding:0;margin:0;font-size:75%;}
a.bouttonblock {display:block; padding: 2px;}
a.edition, a.edition:visited {color: #4cbdc7;}

a.nav, a.nav:visited {color:white;}

h1 {
	font-size: 28px;
	color: #ccc;
	font-family : 'Trebuchet MS', times, verdana;
	text-align: left;
}

h2 {
	font-size : 15px;
	font-family : 'Trebuchet MS', times, verdana;
	color : #cce;
	padding-left:15px;
}

a.info, a.little{
	position: relative;
	text-decoration: none;
	color:black;
}

a.info span, a.little span{
	display:none;

}

a:hover.info, a:hover.little {
  text-decoration: none;
  background: none;
}

a:hover.info span,a:hover.little span {
  display: inline;
  position: absolute;
  top:5px;
  left:50px;
  z-index: 20;
  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:200px;
  text-align:center;
  line-height:10px;
  font-weight:normal;
  font-size: 90%;
  padding:2px 4px;
}

a.little {font-style:italic;font-size:75%;}

a:hover.little span {font-size:100%;}

a, a:visited {text-decoration:none;color:black};

img {
	vertical-align: middle;
}


côté html, voici la page principale

{ php }
  require_once('config/ajax.common.php');
{ /php }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Galynea</title>
		<link rel="stylesheet" type="text/css" href="./templates/site.css"/>
		<link rel="shortcut icon"  type="image/x-icon"  href="pic/favicon.ico"/>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
		<script type="text/javascript" language="javascript" src="./js/simple.js"></script>
		<script type="text/javascript" language="javascript" src="./js/common.js"></script>
	{*	<script type="text/javascript" language="javascript" src="./js/NiftyCube/niftycube.js"></script> *}
		{ php }$xajax->printJavascript('./xajax');{ /php }
    </head>
	<body>
		<div id="global">
			<div id="head_block">
				{ $titre } { $prenom } { $nom }<br/>
				{ $smarty.now|date_format:"%d/%m/%y %H:%M" }<br/>
				<i><b><a href="index-logout.html">Deconnexion</a></b></i>
			</div>
			<div id="centre">
				<div id="content">
					<div id="content_nav">Navigation :
						{ section name=custo loop=$nav }
							<a class="nav" href="{ $nav[custo][1] }">{ $nav[custo][0] }</a>
						{ /section }
					</div>
					<div id="content_main">
					[b]{ include file="$lang/$centre" }[/b]
					</div>
					<div id="content_bottom">
					</div>
				</div>
				<div id="side">
					{ include file="$lang/side.tmpl" }
				</div>
			</div>
			<div id="footer">
				Powered by beeeeeeep.
			</div>
		</div>
	</body>
</html>


et mon template central , là ou apparait le probleme

<span class="intro">Liste de vos comptes client</span>

{ if $nocustomer == TRUE }
	<span class="erreur">Aucun client ne vous est associé</span>
{ else }
	[b]<table class="tiny">
		<tr class="tiny_head">
			<th>Nom</th>
			<th width="7%"></th>
		</tr>[/b]
	{ section loop=$custoList name=custo start=$custoStart*10 max=10 }
		<tr { if ($smarty.section.custo.index % 2 == 0) }class="center"{ else }class="coloraltern_c"{ /if }>
			<td class="borde">
        <a class="info" href="index-provisionning-custoDetails-{ $custoList[custo].name }.html">{ $custoList[custo].name }
          <span>
		  	{ $custoList[custo].name }<br/>
			{ $custoList[custo].serviceC } service(s)<br/>
			{ $custoList[custo].aboC } abonnement(s)<br/>
			{ $custoList[custo].userC } abonné(s)
			{ if ($custoList[custo].parent) }<br/>sous compte de { $custoList[custo].parent }{ /if }
			{ if ($custoList[custo].child) }
				<br/>compte parent de<br/>
				{ section loop=$custoList[custo].child name=child }
					{ $custoList[custo].child[child] }<br/>
				{ /section }

			{ /if }
		  </span>
		</a></td>

		{* OP *}
			<td class="borde"><a href="#" onclick="xajax_delCustomer('{ $custoList[custo].name }');" title="Supprimer { $custoList[custo].name }"><img src="./pic/supp_01.png" border="0" /></a></td>
		</tr>
	{ /section }

	{* Liste client navigation *}
		<tr>
	 		<td class="gauche">
	 		{ if ($custoStart-1) >= 0 }
   				<a href="index.php?page=provisionning&custoStart={ $custoStart-1 }" title="Page Précédente"><<</a>
   			{ else }
   				<a href="#index" title="Page Précédente"><<</a>
   			{ /if }
   			</td>

		   	<td class="droit">
   			{ if ($custoStart*10+10) < $custoMax }
   				<a href="index.php?page=provisionning&custoStart={ $custoStart+1 }" title="Page Suivante">>></a>
   			{ else }
   				<a href="#index" title="Page Suivante">>></a>
   			{ /if }
   			</td>
		</tr>
	{* Fin navigation *}
	</table>
{ /if }
<span class="adminOption">
	<a class="lienboutton" href="index-provisionning-customerNew.html">Nouveau Client</a>
</span>