CSS, DIVs, positionnement : IE va me rendre fou ...

Marsh Posté le 09-02-2004 à 00:24:59

Jamais je n'avais vu un tel désastre. Tout ce que je peux faire pour faire entendre raison à ce foutu navigateur ne fait qu'enpirer les choses. (je parle de Internet Explorer la)

Voici : je fais un template qui n'utilise que des DIVs et une feuille de style (dans le but de permettre d'utiliser des "thèmes" pour plus tard). J'ai donc fait un template.

Le voici visible à cet endroit : >> le truc qui foire sous IE <<

Pour plus d'informations, voici la CSS utilisée :

Code :

/*
Style du weblog. Tout est dabs ce fichier. Pour changer d'apparence, il suffit juste
de modifier ici (sans changements trop grands). Il ne sert à rien de toucher aux
autres fichiers. Sauf si on sait ce que l'on fait bien sur (rajout de modules par
exemple) ...
Fichier exemple à personaliser selon vos désirs.
*/
body {
background-color: #f9e6b1;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size: 15px;
color: #000000;
border: 1px solid #000000;
margin-top: 0px;
margin-bottom: 5px;
}
h3 {
font-size: 9px;
color: #000000;
border: 1px solid #000000;
margin-top: 0px;
margin-bottom: 5px;
}
#main {
margin-top: 5px;
padding: 0px;
width: 920px;
text-align: left;
}
#header {
background-image: url("header.png" );
margin: 0px;
padding: 0px;
width: 920px;
height: 343px;
}
#content {
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
width: 916px;
margin: 0px;
position: absolute;
}
#menu {
float: top;
float: right;
margin-right: 2px;
padding: 2px;
width: 225px;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #fcdc82;
font-size: 10px;
position: relative;
text-align: right;
}
#blocs {
float: top;
float: left;
position: relative;
width: 684px;
margin: 0px;
}
.blocs-index {
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 3px;
padding: 2px;
border: 1px solid #000000;
font-size: 11px;
color: #000000;
}

Et la page HTML (au cas ou) :

Code :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Le-Node :: étude de template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="themes/lenode/style.css" />
</head>
<body>
<div align="center">
<div id="main">
<div id="header"></div>
<div id="content">
<div id="blocs">
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, est nec vehicula ornare, libero tellus gravida wisi, vel gravida orci nibh in ante. Etiam tincidunt auctor nulla. Aenean sit amet mi. Duis accumsan velit non elit. Maecenas at nisl non mauris sagittis porttitor. Fusce ut sem eget tortor mollis dignissim. Sed tellus. Vestibulum sit amet massa. Aenean ornare, mauris et iaculis congue, turpis eros tempus tortor, in aliquet turpis neque quis turpis. Aliquam nunc risus, sollicitudin et, vulputate at, gravida at, justo. Nunc a ante. Aliquam semper dui sed risus. Nulla scelerisque tempus velit.</div>
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Vestibulum id arcu ac magna commodo ornare. Ut sagittis vestibulum felis. Vestibulum vel risus vitae felis porttitor commodo. Etiam semper, nisl sed blandit facilisis, libero sem placerat dolor, et auctor purus risus sed nunc. Vestibulum arcu risus, sollicitudin in, iaculis ac, interdum nec, enim. Aenean rutrum. Mauris viverra, risus non viverra hendrerit, eros lacus malesuada mauris, id iaculis mauris tellus id ligula. Sed auctor ornare dolor. Curabitur pharetra erat at est adipiscing ornare. Vestibulum velit arcu, gravida vitae, dapibus facilisis, aliquam sed, urna. Nulla lacus leo, tincidunt at, sagittis sed, tempor nec, nisl. Aliquam erat volutpat. Morbi mi quam, lobortis quis, auctor eu, mattis nec, libero. Aenean egestas faucibus eros. Praesent libero nibh, dictum a, placerat eget, imperdiet ut, magna. Ut sapien.</div>
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Donec augue quam, porta vel, tristique porttitor, euismod eget, leo. Praesent gravida. Curabitur sodales. Integer quis libero. Integer quis dolor non ligula sodales elementum. Nulla dignissim interdum massa. Nullam arcu justo, consectetuer vel, convallis quis, facilisis a, pede. Donec pellentesque nunc quis lectus. Aenean sapien erat, iaculis eget, porttitor ac, fringilla non, diam. Nunc tempor turpis in purus. Maecenas condimentum ligula sollicitudin libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed diam dolor, varius nec, varius id, molestie vel, est. Cras tortor eros, interdum eget, ornare vitae, adipiscing in, nunc. Fusce elementum felis id lacus. Phasellus ornare, magna et blandit viverra, dolor arcu porta mauris, placerat scelerisque lectus quam a justo.</div>
</div>
</div>
<div id="menu"><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, est nec vehicula ornare, libero tellus gravida wisi, vel gravida orci nibh in ante. Etiam tincidunt auctor nulla. Aenean sit amet mi. Duis accumsan velit non elit. Maecenas at nisl non mauris sagittis porttitor. Fusce ut sem eget tortor mollis dignissim. Sed tellus. Vestibulum sit amet massa. Aenean ornare, mauris et iaculis congue, turpis eros tempus tortor, in aliquet turpis neque quis turpis. Aliquam nunc risus, sollicitudin et, vulputate at, gravida at, justo. Nunc a ante. Aliquam semper dui sed risus. Nulla scelerisque tempus velit.</div>
</div>
</div>
</body>
</html>

Je précise que sous Mozilla le résultat correspond exactement à mes attentes ...

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 00:24:59

Reply

Marsh Posté le 09-02-2004 à 00:26:25

En fait, ce que je ne comprends pas, c'est que tout le bloc #content se déporte sur la droite sous Internet Explorer alors qu'il est cesé être dans un autre bloc centré ...

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 00:40:33

Beaucoup de choses bizarres... Pourquoi #content est en positionnement absolu ? "float: left" et "position: relative" s'excluent. "float: top" est une invention. Attention, le prolog XML fait que IE 6 n'est plus en mode standard.

Message édité par gm_superstar le 09-02-2004 à 00:41:14

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 09-02-2004 à 00:52:49

Effectivement pour le float:top : il aime pas le validateur ... http://jigsaw.w3.org/css-validator [...] medium=all

J'ai du mal comprendre cela : http://forum.hardware.fr/forum2.ph [...] =2#t234624

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 00:57:20

gm_superstar a écrit :

Beaucoup de choses bizarres... Pourquoi #content est en positionnement absolu ? "float: left" et "position: relative" s'excluent. "float: top" est une invention. Attention, le prolog XML fait que IE 6 n'est plus en mode standard.

Bon pour le "absolute" de #content, c'est la seule possibilité que le content contienne bien le reste. Sinon c'est complètement en dehors ... J'ai supprimé le float:top ... Je regarde sous IE.

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 00:59:31

La c'est à n'y rien comprendre : sous Mozilla, les blocs #menu et #blocs (et leurs contenus respectifs) sont en dehors du bloc #content alors que sous IE, le bloc #menu est encore en dehors du #content pendant que le #blocs est à l'intérieus du #content ...

J'ai remis le "absolute" sur le #content (et ça fait toujours déconner IE) ... Et ma CSS est valide. Qui peut m'aider à faire entendre raison à IE ? (je ne veux pas utiliser de tables)

Message édité par Gilbert Gosseyn le 09-02-2004 à 01:08:30

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 01:33:12

Ouf j'ai réussi ...

La bonne solution était :

La CSS :

Code :

/*
Style du weblog. Tout est dabs ce fichier. Pour changer d'apparence, il suffit juste
de modifier ici (sans changements trop grands). Il ne sert à rien de toucher aux
autres fichiers. Sauf si on sait ce que l'on fait bien sur (rajout de modules par
exemple) ...
Fichier exemple à personaliser selon vos désirs.
*/
body {
background-color: #f9e6b1;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
font-size: 15px;
color: #000000;
border: 1px solid #000000;
margin-top: 0px;
margin-bottom: 5px;
}
h3 {
font-size: 9px;
color: #000000;
border: 1px solid #000000;
margin-top: 0px;
margin-bottom: 5px;
}
#main {
margin-top: 5px;
padding: 0px;
width: 920px;
}
#header {
background-image: url("header.png" );
margin: 0px;
padding: 0px;
width: 920px;
height: 343px;
}
#content {
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
width: 916px;
margin: 0px;
}
#menu {
padding: 2px;
width: 225px;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #fcdc82;
font-size: 10px;
text-align: right;
float: right;
}
#blocs {
width: 684px;
margin: 0px;
text-align: left;
float: left;
}
.blocs-index {
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 3px;
padding: 2px;
border: 1px solid #000000;
font-size: 11px;
color: #000000;
}
.spacer {
clear: both;
}

Le fichier template lui-même :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Le-Node :: étude de template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="themes/lenode/style.css" />
</head>
<body>
<div align="center">
<div id="main">
<div id="header"></div>
<div id="content">
<div id="blocs">
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, est nec vehicula ornare, libero tellus gravida wisi, vel gravida orci nibh in ante. Etiam tincidunt auctor nulla. Aenean sit amet mi. Duis accumsan velit non elit. Maecenas at nisl non mauris sagittis porttitor. Fusce ut sem eget tortor mollis dignissim. Sed tellus. Vestibulum sit amet massa. Aenean ornare, mauris et iaculis congue, turpis eros tempus tortor, in aliquet turpis neque quis turpis. Aliquam nunc risus, sollicitudin et, vulputate at, gravida at, justo. Nunc a ante. Aliquam semper dui sed risus. Nulla scelerisque tempus velit.</div>
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Vestibulum id arcu ac magna commodo ornare. Ut sagittis vestibulum felis. Vestibulum vel risus vitae felis porttitor commodo. Etiam semper, nisl sed blandit facilisis, libero sem placerat dolor, et auctor purus risus sed nunc. Vestibulum arcu risus, sollicitudin in, iaculis ac, interdum nec, enim. Aenean rutrum. Mauris viverra, risus non viverra hendrerit, eros lacus malesuada mauris, id iaculis mauris tellus id ligula. Sed auctor ornare dolor. Curabitur pharetra erat at est adipiscing ornare. Vestibulum velit arcu, gravida vitae, dapibus facilisis, aliquam sed, urna. Nulla lacus leo, tincidunt at, sagittis sed, tempor nec, nisl. Aliquam erat volutpat. Morbi mi quam, lobortis quis, auctor eu, mattis nec, libero. Aenean egestas faucibus eros. Praesent libero nibh, dictum a, placerat eget, imperdiet ut, magna. Ut sapien.</div>
<div class="blocs-index"><h2>Titre</h2><br /><h3>Date - Auteur - Catégorie</h3><br />Donec augue quam, porta vel, tristique porttitor, euismod eget, leo. Praesent gravida. Curabitur sodales. Integer quis libero. Integer quis dolor non ligula sodales elementum. Nulla dignissim interdum massa. Nullam arcu justo, consectetuer vel, convallis quis, facilisis a, pede. Donec pellentesque nunc quis lectus. Aenean sapien erat, iaculis eget, porttitor ac, fringilla non, diam. Nunc tempor turpis in purus. Maecenas condimentum ligula sollicitudin libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed diam dolor, varius nec, varius id, molestie vel, est. Cras tortor eros, interdum eget, ornare vitae, adipiscing in, nunc. Fusce elementum felis id lacus. Phasellus ornare, magna et blandit viverra, dolor arcu porta mauris, placerat scelerisque lectus quam a justo.</div>
</div>
<div id="menu"><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, est nec vehicula ornare, libero tellus gravida wisi, vel gravida orci nibh in ante. Etiam tincidunt auctor nulla. Aenean sit amet mi. Duis accumsan velit non elit. Maecenas at nisl non mauris sagittis porttitor. Fusce ut sem eget tortor mollis dignissim. Sed tellus. Vestibulum sit amet massa. Aenean ornare, mauris et iaculis congue, turpis eros tempus tortor, in aliquet turpis neque quis turpis. Aliquam nunc risus, sollicitudin et, vulputate at, gravida at, justo. Nunc a ante. Aliquam semper dui sed risus. Nulla scelerisque tempus velit.</div>
<div class="spacer"></div>
</div>
</div>
</div>
</body>
</html>

(bon OK ça buggue encore un peu sous IE avec une largeur un peu trop faible mais ça marche au moins et n'est pas très génant ...)

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 09-02-2004 à 20:59:21

Gilbert Gosseyn a écrit :

J'ai du mal comprendre cela : http://forum.hardware.fr/forum2.ph [...] =2#t234624

Qu'est ce que tu ne comprends pas ? Parce que là c'est un peu vague ce que tu dis...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 14-02-2004 à 20:55:17

Et c'est reparti mais ce coup-ci ce n'est que IE 6.0 qui me pose problème (pour ma part avec IE 5.01 SP3 j'ai quelques bugs d'aspect mineurs mais pas ce que sort IE 6 tout patché ...)

Je ne comprends pas du tout mon problème, mais alors pas du tout. Je vous invite à regarder ce topic :
http://forum.mon-forum.net/cheznou [...] t-54-1.htm

Et plus particulièrement cette page :
http://forum.mon-forum.net/cheznou [...] t-54-3.htm

Si quelqu'un peut m'aider à corriger par une ruse de sioux (c'est le cas de le dire) ces problèmes ...

Message édité par Gilbert Gosseyn le 14-02-2004 à 20:55:49

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 14-02-2004 à 20:57:41

en fait le bug provient de ça :
h2 {
font-size: 15px;
line-height:18px;
background-color: #fcdc8d;
color: #000000;
border-bottom: 1px solid #000000;
margin: -2px;
padding-left: 10px;
}

Apparament IE6 n'aime pas les marges négatives

Message édité par Flyman30 le 14-02-2004 à 21:22:29

Reply

Marsh Posté le 14-02-2004 à 20:57:41

Reply

Marsh Posté le 14-02-2004 à 21:03:35

Sauf que j'en ai besoin pour question d'estétique (et vouloir faire la même chose en onservant une marge de 2 pixels pour mon texte à l'intérieur des divs bloc-nows m'imposerai la création d'un div supplémentaire).

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 14-02-2004 à 21:04:50

Flyman30 a écrit :

en fait le bug provient de ça :
h2 {
font-size: 15px;
line-height:18px;
background-color: #fcdc8d;
color: #000000;
border-bottom: 1px solid #000000;
margin: -2px;
padding-left: 10px;
}

Apparament IE6 n'aime pas les marges négatives

Ah oui je précise que pour une fois les navigateurs IE antérieurs gèrent la situation (enfin pas trop mal) : ils annulent la marge négative mais font le redimentionnement du bloc correctement ...

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 15-02-2004 à 11:20:14

Quelqu'un peut m'aider ?

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

Marsh Posté le 17-02-2004 à 12:27:06

Un p'tit up

Reply

Marsh Posté le 17-02-2004 à 18:45:44

Bon c'est un bug d'IE. Donc soit tu ajoutes un DIV comme tu l'as dit, soit tu construis tes blocs comme ça :

<h2>...</h2>
<h3>...</h3>
<div class="blocs-index">...</div>
<h2>...</h2>
<h3>...</h3>
<div class="blocs-index">...</div>
...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Reply

Marsh Posté le 17-02-2004 à 18:46:37

Merci :jap: .

---------------
Tant que la couleur de la peau sera plus importante que celle des yeux, nous ne connaitrons pas la paix. ● L'écriture, c'est la mémoire du futur. ● Mods FO4

Reply

CSS, DIVs, positionnement : IE va me rendre fou ...

Sujets relatifs:

Leave a Replay