<input> et <td>

Myfred · 8 Février 2007

Bonjour,

j'ai un ptit soucis de mis en page sur la reprise d'un oscommerce.

Pas facile, la mise en page est faite uniquement en tableau inbriquer.

Mon problème se situe du coté internet explorer :whistling: .

Lorsque je met un <input type="text"> dans une cellule <td>,

il met automatiquement une marge en haut et à droite dans cette cellule,

se qui fait que le rendu est totalement différent avec firefox etant donné que par

defaut il ne met pas de marge automatique.

Mais comment puis je empecher cela?

Merci beaucoup

TheRec · 8 Février 2007

Bonsoir,

- As-tu défini la propriété CSS "border-collapse: collapse;" sur le tableau contenant ces champs ?

- As-tu défini les propriétés CSS "margin: 0;" et "padding: 0;" sur les éléments <input> et sur les éléments <td> ?

Montre-nous un peu de code (HTML et CSS), afin qu'on puisse t'aider... et un conseil pour cela, utilise les balises BB Code pour présenter ton code dans tes messages sur le forum

Myfred · 8 Février 2007

- As-tu défini la propriété CSS "border-collapse: collapse;" sur le tableau contenant ces champs ?

Non ca je ne l'ai pas fait, mais etant donné que j'ai pas de bordure, ca a une importance?

As-tu défini les propriétés CSS "margin: 0;" et "padding: 0;" sur les éléments <input> et sur les éléments <td> ?

Oui mais seulement sur les input, cela pourrait il etre le soucis?

concernant le code, ya rien d'extraordianire, c'est de l'oscommerce, des tableaux dans des tableaux.... :unsure:

TheRec · 8 Février 2007

Non ca je ne l'ai pas fait, mais etant donné que j'ai pas de bordure, ca a une importance?

Comme je ne vois pas ton code (CSS en l'occurrence) j'ai de la peine à te le dire...

Oui mais seulement sur les input, cela pourrait il etre le soucis?

Idem. Vu que tu me le demandes je suppose que tu n'a pas essayé... donc pourquoi ne pas le faire

concernant le code, ya rien d'extraordianire, c'est de l'oscommerce, des tableaux dans des tableaux....

Si je te demande ton code c'est qu'il y a une raison... si tu ne souhaite pas le communiquer pas de problème, personnellement je n'ai pas le temps de jouer aux devinettes avec toi... je t'ai proposé deux pistes des réflexion en fonction des données que tu nous as fournis.

Myfred · 8 Février 2007

si je te donne pas le code c'est simplement parce que c'est de l'oscommerce, il appel plein d'autre fichier donc je sais pas si tu arrivera a t'y retrouver.

Mais si ca peut nous aider voila:


<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="<? echo TEMPLATE_STYLE;?>">

</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- body_text //-->
<div class="boxText" style="padding-top: 8px;">
	 > <a href="index.php">Accueil</a> > <a href="contact_us.php"><b>Contact</b></a>
</div>
<br/>
<div class="pageHeading" align="left" style="padding-left: 5px; padding-right: 5px;">
	Pour nous contacter, vous pouvez utiliser ce formulaire.   <br/>
	<hr style="color: #5ab2ff; background-color: #5ab2ff; border: none;"/>
</div>

<center>
<table border="0" cellspacing="0" cellpadding="0" align="left" style="margin-left: 5px;">

<?php echo tep_draw_form('contact_us', tep_href_link(FILENAME_CONTACT_US, 'action=send')); ?>

<?php
  if ($messageStack->size('contact') > 0) {
?>
	  <tr>
		<td colspan="3"><?php echo $messageStack->output('contact'); ?></td>
	  </tr>
	  <tr>
		<td colspan="3"><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
	  </tr>
<?php
  }

  if (isset($HTTP_GET_VARS['action']) && ($HTTP_GET_VARS['action'] == 'success')) {
?>
	  <tr>
		<td class="main" align="center"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_man_on_board.gif', HEADING_TITLE,'0','0', 'align="left"') . TEXT_SUCCESS; ?></td>
	  </tr>
	  <tr>
		<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
	  </tr>
	  <tr>
		<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
		  <tr class="infoBoxContents">
			<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
			  <tr>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
				<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
				<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
			  </tr>
			</table></td>
		  </tr>
		</table></td>
	  </tr>
<?php
  } else {
?>
	<tr>
		<!-- Informations perso-->
		<td valign="top" width="275">

			<table width="265" style="border-collapse: collapse;" cellpadding="2" cellspacing="0">
				<tr>
					<td colspan="2" style="color: #ffffff; background-color: #73beff; font-weight: bold; font-size:0.7em; font-family: Tahoma, Verdana, Arial, sans-serif;">
						 Vos informations personnelles
					</td>
				</tr>
				<?php
				if (tep_session_is_registered('customer_id'))
				{
				  $customer_query_raw = "select c.customers_firstname, c.customers_lastname, c.customers_email_address, c.customers_telephone, ab.entry_street_address, ab.entry_postcode, ab.entry_city from " . TABLE_CUSTOMERS . " c, " . TABLE_ADDRESS_BOOK . " ab where c.customers_id='" . $customer_id . "' AND ab.address_book_id = c.customers_default_address_id";
				  $customer_query = tep_db_query($customer_query_raw);
				  $customer_array = tep_db_fetch_array($customer_query);
				?>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; padding: 0; margin: 0;">
						Nom
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['customers_firstname'] . " " . $customer_array['customers_lastname'];?>" style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Email
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['customers_email_address'];?>" style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Adresse
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['entry_street_address'];?>"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Code Postal
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['entry_postcode'];?>"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Ville
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['entry_city'];?>"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Téléphone
					</td>
					<td>
						<input type="text" name="telephone" value="<?php echo $customer_array['customers_telephone'];?>"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;" readonly />
					</td>
				</tr>
				<?php
				}
				else
				{
				?>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Nom
					</td>
					<td>
						<input type="text" name="name"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Email
					</td>
					<td>
						<input type="text" name="email"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Adresse
					</td>
					<td>
						<input type="text" name="adresse" style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Code Postal
					</td>
					<td>
						<input type="text" name="codepostal" style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Ville
					</td>
					<td>
					<input type="text" name="ville"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<tr>
					<td style="font-weight: bold; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 0.6em; ">
						Téléphone
					</td>
					<td>
						<input type="text" name="telephone"  style="border: 1px solid #5e5d60; height: 14px; width: 195px; font-size: 10px; padding: 0; margin: 0;"/>
					</td>
				</tr>
				<?php
				}
				?>
			</table>

		</td>
		<!-- Barre de separation-->
		<td valign="top" width="7">

			<table>
				<tr>
					<td>
						<div style=" width: 7px; height: 120px; border-left: 1px solid #5e5d60;">
						</div>
					</td>
				</tr>
			</table>

		</td>
		<!-- Message-->
		<td valign="top" width="340">

			<table width="350" cellpadding="2" cellspacing="0" style="border-collapse: collapse;">
				<tr>
					<td  style="color: #ffffff; background-color: #ffa538; font-weight: bold; font-size:0.7em; font-family: Tahoma, Verdana, Arial, sans-serif;">
						 Message
					</td>
				</tr>
				<tr>
					<td>
						<textarea name="enquiry" wrap="soft" cols="300" rows="7" style=" border: 1px solid #5e5d60;" ></textarea>
					</td>
				</tr>
			</table>

		</td>
	</tr>
	<tr>
		<td colspan="3">
		<br/>
		<img src="templates/topacces/images/barre-pointille.gif" alt="" border="0"/>
		</td>
	</tr>
	<tr>
		<td colspan="3">
		<br/>
		<?php
		// identify sender as customer or guest
		echo tep_draw_hidden_field('sendertype',  tep_session_is_registered('customer_id') ? TEXT_CUSTOMER : TEXT_GUEST);
		echo tep_template_image_submit('button_send.gif', IMAGE_BUTTON_SEND); ?>
		<br/><br/>
		</td>
	</tr>
	<tr>
		<td colspan="3" align="center">
			<script type="text/javascript">creerFlash("templates/topacces/images/mag-acc-564x136.swf", 564, 136, {wmode:'transparent'});</script>
		</td>
	</tr>
<?php
  }
?>
</table>

</td>
<!-- body_text_eof //-->

<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

**EDIT Modérateur (TheRec)** Merci d'utiliser la balise BB Code "CODEBOX" pour présenter du code aussi long.

TheRec · 8 Février 2007

As-tu au moins essayé ce que je t'ai proposé en premier ? Tu semblais ne pas l'avoir fait dans ta première réponse.

Sinon effectivement sans la feuille de style liée, le code ne sert pas à grand chose vu que ton problème est liée à la mise en forme (et donc à la feuille de styles).

Tu devrais aussi essayer de donner la même taille de police aux cellules (<td>) qui contiennent les champs du formulaire...

Ce genre de modifications serait grandement facilités si pour ton formulaire tu utilisait des en-tête pour ton tableau (<th>) pour les libellés des champs et de cellules normales (<td>( pour les champs. Ainsi il te suffit d'appliquer un classe à ton tableau et tu gèrerais tout ceci depuis ta feuille de style (en une ligne tu modifierait toutes les cellules de ton tableau...sans devoir aller sur chaque cellule et modifier l'attribut style, ce qui est fastidieux et est une source d'erreurs).

Connexion

<input> et <td>

Sujets conseillés

Myfred

Lien vers le commentaire

Partager sur d’autres sites

TheRec

Lien vers le commentaire

Partager sur d’autres sites

Myfred

Lien vers le commentaire

Partager sur d’autres sites

TheRec

Lien vers le commentaire

Partager sur d’autres sites

Myfred

Lien vers le commentaire

Partager sur d’autres sites

TheRec

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité