Probleme de largeur de <td> sous IE

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Probleme de largeur de <td> sous IE

nero27

Bonjour, j'ai un problème de largeur de mes cellules sous IE alors que sous FireFox, tout va parfaitement

Voilà ce que ça donne sous FireFox :

Et sous IE (6 et 7) :

Voici mon code source :

le HTML:

Code :

<html>
<head>
<title>MonCobaye - Simulation d'élevage de cochons d'Inde avec concours, reproduction, entrainement ...</title>
<meta name="keywords" content="cochons d'inde, cochon d'inde, cobaye, cobayes, chonchon, chonchons, animal, animaux, jeu d'élevage, jeux d'élevages, jeux d'élevage, élevage virtuel, élevage virtuel, elevage virtuel, elevage, virtuel, virtuels, élevage, élevage, jeu, jeux, simulations, simulation, gratuit, gratuite, jeu gratuit, ferme, fermes, loisir, loisirs, tchat, forum, site, sites, rongeur, rongeurs, hamster, hamsters, lapins, lapin, cage, animalerie, concours, entrainement, entrainements, reproduction, reproduire, bébé, bébés, graines, granulés">
<meta name="robots" content="index, follow">
<meta name="Description" content="MonCobaye est une simulation d'élevage de cochons d'Inde avec des concours, de la reproduction, des entrainements ...">
<meta name="abstract" content="Bienvenue sur MonCobaye, jeu d'elevage virtuel de cochons d'Inde.">
<meta name="author" lang="fr" content="Florian PETIT">
<meta name="copyright" content="MonCobaye">
<meta name="identifier-url" content="http://www.mon-cobaye.net/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/form2.css">
</head>
<body>
<table cellpadding="0" cellspacing="2" width="900" align="center">
<tr>
<td colspan="3" valign="bottom">
<a href="#">
<img src="images/titre-trans.png" style="border: none;" alt="Mon-Cobaye, Simulation gratuite d'élevage de cochons d'Inde !" />
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="barre">
<form>
Pseudo: <input type="text" name="pseudo" size="11" class="text">  Mot de Passe: <input type="password" name="pass" size="11" class="text">
</form>
</div>
</td>
</tr>
<tr>
<td valign="top" style="width: 150px; background-image:url(images/fond6.png); background-repeat: repeat-xy;">
<div class="titre">
 .:: Menu du jeu ::.
</div>
<div class="contenu">
<a href="#"><img src="images/boutons/elevage.gif" border="0" alt="Mon Elevage" /> Mon Elevage</a><br />
<a href="#"><img src="images/boutons/inventaire.gif" border="0" alt="Mon Inventaire" /> Mon Inventaire</a><br />
<a href="#"><img src="images/boutons/runes.gif" border="0" alt="Les Runes" /> Les Runes</a><br />
<a href="#"><img src="images/boutons/entrainement.gif" border="0" alt="Entrainement" /> Entrainement</a><br />
<a href="#"><img src="images/boutons/concours.gif" border="0" alt="Les Concours" /> Les Concours</a><br />
<a href="#"><img src="images/boutons/sms.gif" border="0" alt="Mes SMS" /> Mes SMS</a><br />
<a href="#"><img src="images/boutons/bourg.gif" border="0" alt="Le Bourg" /> Le Bourg</a><br />
<a href="#"><img src="images/boutons/halles.gif" border="0" alt="Les Halles" /> Les Halles</a><br />
<a href="#"><img src="images/boutons/journal.gif" border="0" alt="Le Journal" /> Le Journal</a><br />
<a href="#"><img src="images/boutons/blocnotes.gif" border="0" alt="Le Bloc-Notes" /> Le Bloc-Notes</a><br />
</div>
</td>
<td valign="top" style="width: auto; background-image:url(images/fond6.png); background-repeat: repeat-xy;">
<div class="titre">
 .:: Présentation de Mon Cobaye ::.
</div>
</td>
<td valign="top" style="width: 150px; background-image:url(images/fond6.png); background-repeat: repeat-xy;">
<div class="titre">
 .:: Menu principal ::.
</div>
<div class="contenu">
<a href="#"><img src="images/boutons/accueil.gif" border="0" alt="Accueil" /> Accueil</a><br />
<a href="#"><img src="images/boutons/inscription.gif" border="0" alt="S'Inscrire" /> S'Inscrire</a><br />
<a href="#"><img src="images/boutons/classements.gif" border="0" alt="Classements" /> Classements</a><br />
<a href="#"><img src="images/boutons/faq.gif" border="0" alt="La Règle du Jeu" /> Règle du Jeu</a><br />
<a href="#"><img src="images/boutons/forum.gif" border="0" alt="Le Forum de MonCobaye" /> Le Forum</a><br />
<a href="#"><img src="images/boutons/tchat.gif" border="0" alt="Le Tchat" /> Le Tchat</a><br />
<a href="#"><img src="images/boutons/livredor.gif" border="0" alt="Le Livre d'or" /> Le Livre d'or</a><br />
<a href="#"><img src="images/boutons/contact.gif" border="0" alt="Contactez-nous" /> Contactez-nous</a><br />
</div>
</td>
</tr>
<tr bgcolor="#EDE3FC">
<td colspan="3" style="background-image:url(images/fond6.png); background-repeat: repeat-xy;">
<div class="bas_de_page">
Site déclaré à la CNIL sous le n° 1137279<br>
Copies interdites, même partielles, sans autorisations.<br>
<A HREF="http://www.hit-parade.com/hp.asp?site=438304" TARGET="_top"><IMG SRC="http://loga.hit-parade.com/logohp1.gif?site=a438304" Title="Hit-Parade des sites francophones" WIDTH="77" HEIGHT="15" BORDER="0" alt="Hit-Parade" /></A>  
<a href="http://www.xiti.com/xiti.asp?s=240718" title="Mesurez votre audience">
<script type="text/javascript">
<!--
Xt_param = 's=240718&p=';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" ';
Xt_i += 'src="http://logv30.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Analyse d\'audience">');
//-->
</script>
</a>
<noscript>Mesure d'audience ROI frequentation par <img width="39" height="25" src="http://logv30.xiti.com/hit.xiti?s=240718&p=" alt="Analyse d'audience" /></noscript>
</div>
</td>
</tr>
</table>
</body>
</html>

Et le CSS:

Code :

/* CSS Document */
body {
background-image: url(../images/fond4.png);
}
form {
margin: 0px;
padding: 0px;
}
a:link, a:visited {
color: #1B6429;
background-color: transparent;
text-decoration:none;
}
a:active, a:hover {
color:#DBD1EC;
text-decoration:underline;
}
textarea, form .text, form .password {
border: 1px solid #CDB3FD;
font-size: 11pt;
background: white;
vertical-align: middle;
}
form .text, form .password {
height: 17px;
}
.barre {
width: inherit;
font: 12px Arial, Helvetica, sans-serif;
color: #009900;
font-weight: bold;
background-color: #FFDF6E;
text-align: left;
padding: 3px;
}
.titre {
/*border-bottom: 3px dotted #B6A5D3; */
background-color: #FDF7F9;
font: 12px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #B6A5D3;
text-align: center;
padding-top: 2px;
padding-bottom: 3px;
}
.contenu {
text-align:left;
margin: 5px;
font: 12px Arial, Helvetica, sans-serif;
font-weight: bold;
}
.bas_de_page {
text-align: center;
font: 9px Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-top: 3px;
margin-bottom: 3px;
}

Auriez-vous une idée d'où ça peut venir ?

Merci d'avance :jap:

Publicité

gatsu35

Blablaté par Harko

You Fuck the Table and made all in CSS, Go go go

nero27

J'ai essayé en all in CSS et c'est vraiment la merde, je m'en sors pas, c'est pourquoi je suis repassé en HTML 4.01 transitionnal

gatsu35

Blablaté par Harko

nan on peut très bien faire des CSS en HTML 4.01 transitionnal ou dans n'importe quel autre doctype

c'est juste qu'il faut bien positionner les éléments correctement et arrêter le tableau

nero27

J'ai tenté pendant je ne sais combien de temps de faire mes 3 colonnes avec des div et du CSS (float: left; et compagnie) : ça ne passe jamais pareil sous FireFox ou IE, alors je me rabats sur les tableaux, plus fiables pour le moment.

EDIT: je ne veux pas commencer un débat sur les tableaux, je voudrais juste savoir ce qui ne va pas !

Message édité par nero27 le 29-04-2006 à 16:50:00

gatsu35

Blablaté par Harko

en fait c'est simple
tu vires tes tableaux
tu refais comme tu avais fait en CSS
tu nous files ton truc pour qu'on le corrige

et surtout il nous faut un lien vers ta page

Cheinz

Vi un design comme ca est faisable en CSS relativement facilement, sur mon site j'ai le même genre d'organisation (header, 3 colonnes, footer) et ca passe bien et sur tout les navigateurs.

Tu peux t'aider de http://css.alsacreations.com/modeles/modele5.htm aussi.

nero27

Je viens d'adapter ce modele sur mon site, c'est loin d'être concluant

http://www.mon-cobaye.net/nouveau% [...] sign5.html

Je n'arrive pas à faire certaines choses :
- centrer le conteneur peu importe la résolution de l'écran
- laisser 1 px entre chaque bloc
- adapter la taille des menus à celle du bloc central et vice versa
- coller l'image d'en-tête à la barre jaune sous IE

Cheinz

- centrer le conteneur peu importe la résolution de l'écran

Avec la technique des marges négative, ce que tu sembles avoir fait ca se centre tout le temps normalement.

- laisser 1 px entre chaque bloc

margin ou border?

- adapter la taille des menus à celle du bloc central et vice versa

La il faut mettre un min-height (pour firefox et autres) sur le conteneur central, ce qui permet, en cas de contenu trop court, une taille minimale et donc pas de fond rayé et un _height sur ce même conteneur qui permet de faire pareil mais seulement pour IE qui ne connait pas min-height.
Ensuite tu appliques le fond bleu au niveau du div "conteneur" et ca devrait aller.

EDIT: C'est comme ca que j'ai fait et ca fonctionne, ya p'tet une autre technique.

- coller l'image d'en-tête à la barre jaune sous IE

Enlever le <br /> ?

Message édité par Cheinz le 30-04-2006 à 00:56:09

nero27

- centrer le conteneur peu importe la résolution de l'écran

Avec la technique des marges négative, ce que tu sembles avoir fait ca se centre tout le temps normalement.

J'ai testé en 800*600, le site sort de la fenêtre sur la gauche et pas moyen d'y accéder

- laisser 1 px entre chaque bloc

margin ou border?
En effet, ça fonctionne, merci :jap:

- adapter la taille des menus à celle du bloc central et vice versa

La il faut mettre un min-height (pour firefox et autres) sur le conteneur central, ce qui permet, en cas de contenu trop court, une taille minimale et donc pas de fond rayé et un _height sur ce même conteneur qui permet de faire pareil mais seulement pour IE qui ne connait pas min-height.
Ensuite tu appliques le fond bleu au niveau du div "conteneur" et ca devrait aller.
Cette méthode permet d'allonger le bloc central si les menus sont plus longs, mais ça n'allonge pas les menus si le bloc central est plus long qu'eux

EDIT: C'est comme ca que j'ai fait et ca fonctionne, ya p'tet une autre technique.

- coller l'image d'en-tête à la barre jaune sous IE

Enlever le <br /> ?
Il reste encore une marge de 2 ou 3 pixels sous IE

Publicité

Cheinz

-----> J'ai testé en 800*600, le site sort de la fenêtre sur la gauche et pas moyen d'y accéder

Normal, tu a mi 900px pour le conteneur et 500px de marge négative... il faut mettre la moitié. Mais bon en même temps en 800x600 il y aura toujours un ascenseur.

-----> Cette méthode permet d'allonger le bloc central si les menus sont plus longs, mais ça n'allonge pas les menus si le bloc central est plus long qu'eux

Si bien sur, si tu mets le fond bleu au niveau du div appelé conteneur alors il s'appliquera aussi au dessous des menus quand ceux ci seront plus court que le bloc central.

-----> Il reste encore une marge de 2 ou 3 pixels sous IE

J'ai trouvé une solution, mettre le logo en background-image de "header" (et réduire sa hauteur a 120px vu que l'image en fait 120).

Si tu prends cette solution il ne faut pas que le div "barre" fasse partie du div "header" dans la page html.

Tu peux aussi rajouter un h1 en display hidden ou none dans le header, il me sembles que ca aide pour le référencement.

Message édité par Cheinz le 30-04-2006 à 12:45:18

FORUM HardWare.fr

Programmation

HTML/CSS

Probleme de largeur de <td> sous IE

Sujets relatifs
probléme : passage de l'adresse d'une matrice	Problème de compilation de Jonas
Problème de gestion des droits d'accès sous Access 2003	probleme Idframe et textearea
[CSS débutant] Problème sur un bouton	Gros problème de formulaire
[VBS] Problème de double quote (")	probleme avec la commande revoke
problème de recherche sur une table	Amélioration de la structure des tables - problème d'évolution
Plus de sujets relatifs à : Probleme de largeur de <td> sous IE

Page générée en 0.135 secondes