[CSS] Décalages entre Firefox et IE

Tout est décalé selon le navigateur

Sujet résolu

fmatsos

12 août 2006 à 23:08:00

Salut

C'est simple, regardez le site avec Firefox, puis avec IE et vous comprendrez le problème :-°

http://horny13.free.fr

Je mets le xHTML et le CSS (c'est long :euh:

), j'ai déjà réussis à résopudre une partie du problème de la bannière, mais y a toujours un décalage sous IE. Pour le reste, je vois pas

Merci

/*
Design par Horny13 - horny13@free.fr
Toute reproduction totale ou partielle est interdite sans l'accord des auteurs.
http://horny13.free.fr/
*/

body
{
width: 100%;
margin: auto; /* Pour centrer la page */
margin-bottom: 2%; /* Idem pour le bas du navigateur */
background: black;
font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
}

#global
{
/*margin-top: -0.2%;*/
margin-bottom: 2%;
margin-left: 1.65%;
margin-right: 1.4%;
width: 96.7%;
background: url("../images/fond-global.gif");
padding-top: 1%;
padding-bottom: 2%;
}

/*____________ HEADER _______________*/

/*#header
{
float: left;
width: 400px;
height: 250px;
background-image: url("../images/ban1.jpg");
}
*/

#header01
{
float: left;
width: 400px;
height: 250px;
background-image: url("../images/ban1-part1.jpg");
background-repeat: no-repeat;
margin-right: 0px;

}

#header02
{
height: 250px;
background: url("../images/ban1-part2.jpg");
background-repeat: repeat-x;
margin-right: 0px;
margin-left: 0px;
}

#header03
{
float: right;
width: 50px;
height: 250px;
background: url("../images/ban1-part3.jpg");
background-repeat: no-repeat;
margin-left: 0 px;

}

/*_____________ MENU GAUCHE _________________*/

#menu_g
{
clear: both;
float: left; /* Le menu flottera à gauche */
margin-left: 2%;
width: 8% ;
padding-left: 1%;
margin-left: 0%; /* Pas besoin de margin à cause de l'image de fond */
font-size: 80%;
background: url("../images/fond-menu.gif") repeat-y;
font-family: Arial, "Times New Roman", Times, serif;
}

#menu_g ul
{
list-style-type: none;
text-indent: -45%;
text-align: left;
}

.titre_menu_g
{
color: white;
text-align: center;
background: url("../images/fond-corps.gif") repeat-x;
font-variant: small-caps;
color: #e15429;
font-weight: bold;
font-size: 110%;
}

#menu_g p
{
font-size: 75%;
text-align: center;
color: white;
}

#menu_g a
{
text-decoration: none;
color: white;
font-size: 100%;
text-align: left;
}

#menu_g a:hover
{
text-decoration: none;
color: red;
text-align: left;
}

/*______________ MENU DROIT _________________*/

#menu_d
{
/*clear: both;*/
float: right; /* Le menu flottera à droite */
margin-right: 1%;
width: 8% ;
padding-left: 1%;
margin-left: 0%; /* Pas besoin de margin à cause de l'image de fond */
font-size: 80%;
background: url("../images/fond-menu.gif") repeat-y;
font-family: Arial, "Times New Roman", Times, serif;

}

#menu_d ul
{
list-style-type: none;
text-align: left;
text-indent: -45%;
}

.titre_menu_d
{
color: white;
text-align: center;
background: url("../images/fond-corps.gif") repeat-x;
font-variant: small-caps;
color: #e15429;
font-weight: bold;
font-size: 120%;
}

#menu_d a
{
text-decoration: none;
color: white;
font-size: 100%;
text-align: left;
}

#menu_d a:hover
{
text-decoration: none;
color: red;
text-align: left;
}

/*_______________ CORPS _________________________*/

.titre_corps /* Titres dans le corps */
{
background: url("../images/fond-global.gif") repeat-x;
border: black solid 1px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

#corps
{
margin-top: 0;
margin-left: 10%;
margin-right: 1%;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
width: 78%;
font-family: Arial, sans-serif;
font-size: small;
background: url("../images/fond-corps.gif");
color: #C56721;
padding-right: 1%;
padding-left: 1%;
}

/*_____________ CORPS INDEX _______________________*/

.bienvenue
{
text-align: center;
font-variant: small-caps;
color: red;
background-color: rgb(223,221,219);
font-family: Verdana, "Comic Sans MS", Arial, sans-serif;
}

p a
{
color: blue;
text-decoration: none;
}

p a:hover
{
color: red;
text-decoration: none;
}

/*_____________ CORPS INDEX JAPON ______________*/

.titre_japon
{
text-align: center;
font-variant: small-caps;
}

.kanji_japon
{
display: block;
width: 267px;
margin: auto;
}

#menu_japon
{
border: 1px none #000;
width: 580px;
height: 15px;
text-align: center;
margin: auto;
padding: 5px;
margin-bottom: 5px;
margin-top: 5px;
}

#menu_japon a
{
color: blue;
text-align: center;
text-decoration: none;
}

#menu_japon a:hover /* Modifie la couleur lors du survol du lien */
{
color: red;
text-decoration: none;
}

#menu_japon a:visited /*Modifie la couleur quand un lien a été visité */
{
color: red;
text-decoration: none;
}

/*____________ CORPS CULTURE JAPON _____________________*/

a
{
color: blue;
text-decoration: none;
}

a:hover
{
color: red;
text-decoration: underline;
}

a:active
{
background-color: #FFCC66;
text-decoration: underline;
}

a:visited
{
color: teal;
text-decoration: none;
}

/*____________FOOTER_______________________*/

.footer
{

}

Candygirl

12 août 2006 à 23:16:00

Hello,

je t'ai répondu là

fmatsos

12 août 2006 à 23:17:34

Je viens de le lire justement

Merci je vais essayer

Anonyme

12 août 2006 à 23:18:36

Essaye aussi avec Opera
Certain truc ne sont pas pris en charge de la même manière.

fmatsos

12 août 2006 à 23:23:22

A ce que tu dis Candygirl, je dois refaire une TRES grosse partie de mon CSS

Encore du boulot en vue

Anonyme

12 août 2006 à 23:27:17

Et travail sur trois navigateurs en même temps : IE, Firefox et Opera

Philias

13 août 2006 à 2:31:22

background-position va résoudre ton problème, parce que les marges que tu utilises ne sont pas interprétés de la même façon (Ie et FF n'ont pas la même "Model Box" à ce que j'ai lu).

Mais...
* Titre principal (h1, ainsi que <title>dans la partie "head"</title>)
* Pourquoi un .global ? Tu peux t'en passer je suis certain
* Ton menu pourrait être fait de la forme suivante, beaucoup plus structurée :

<dl id="menu_g">
<dt>Temps</dt>
<dd>Il est <?php print date("H:i");?></dd>
<dt class="titre_menu_g">Le Site</dt>
<dd>
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="blog/index.php">Blog</a></li>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="blank.php?page=liens">Liens</a></li>
<li><a href="blank.php?page=team">Equipe</a></li>
<li><a href="blank.php?page=contact">Contact</a></li>
</ul>
</dd>
<dt class="titre_menu_g">Japon</dt>
<dd>
<ul>
<li><a href="japon/histoire.php">Histoire</a></li>
<li><a href="japon/culture.php">Culture</a></li>
<li><a href="japon/actualite.php">Actualités</a></li>
</ul>
</dd>
</dl>
<dl id="menu_d">
<dt class="titre_menu_d">Diablo</dt>
<dd>
<ul>
<li><a href="diablo/histoire.php">Histoire</a></li>
<li><a href="diablo/personnages.php">Personnages</a></li>
<li><a href="diablo/creatures.php">Créatures</a></li>
<li><a href="diablo/lieux.php">Lieux</a></li>
<li><a href="diablo/liens.php">Liens</a></li>
<li><a href="diablo/downloads.php">Downloads</a></li>
</ul>
</dd>
<dt class="titre_menu_d">Diablo II</dt>
<dd>
<ul>
<li><a href="diablo2/histoire.php">Histoire</a></li>
<li><a href="diablo2/personnages.php">Personnages</a></li>
<li><a href="diablo2/creatures.php">Créatures</a></li>
<li><a href="diablo2/lieux.php">Lieux</a></li>
<li><a href="diablo2/liens.php">Liens</a></li>
<li><a href="diablo2/downloads.php">Downloads</a></li>
</ul>
</dd>
<dt class="titre_menu_d">Dungeon Keeper</dt>
<dd>
<ul>
<li><a href="dk/histoire.php">Histoire</a></li>
<li><a href="dk/creatures.php">Créatures</a></li>
<li><a href="dk/salles.php">Salles</a></li>
<li><a href="dk/astuces.php">Astuces</a></li>
<li><a href="dk/liens.php">Liens</a></li>
<li><a href="dk/downloads.php">Downloads</a></li>
</ul>
</dd>
</dl>

Candygirl

13 août 2006 à 11:01:32

Citation : horny13

A ce que tu dis Candygirl, je dois refaire une TRES grosse partie de mon CSS
Encore du boulot en vue

Non,non, c'est juste une questions de détails.

Déplacer 1-2 truc virer/modifier les marges ou padding au bon endroit et c'est règlé

J'ai fait un petit test vite fait et j'ai obtenu un résultat qui me smeble un compromis satisfesant (bon à retoucher, j'ai fait vite) ou IE reste correcte jusqu'en 800x600. Ce n'est certainement pas optimum (je ne maîtrise pas à fond les détails de la diff IE/FF) mais si ça peut t'inspirer...:

EDIT: il me semblait bien que ce design me disait qqch, c'est pas un peu (beaucoup)inspiré de judgehype ?

* {margin:0;padding:0;}
body
{
width: 100%;
background: black;
font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
}

#global
{
margin: 2%;
margin-top:0;
background: url("images/fond-global.gif");
padding-bottom:2%;
}

/*_______________________________________ HEADER ________________________________________________________________*/

#header
{
height: 250px;
background: url("images/ban1-part2.jpg") repeat;
}

#header03
{
float: right;
height:250px;
width: 50px;
background: url("images/ban1-part3.jpg") no-repeat 21px 0;
}

#header01
{
float: left;
width: 400px;
height:250px;
background: url("images/ban1-part1.jpg") no-repeat -21px 0;
}

/*_________________________________________ MENU GAUCHE _________________________________________________________*/

#menu_g
{
clear: both;
float: left; /* Le menu flottera à gauche */
width: 8% ;
padding:10px;
padding-right:0;
font-size: 80%;
background: url("images/fond-menu.gif") repeat-y;
font-family: Arial, "Times New Roman", Times, serif;
}

#menu_g ul /* Ma liste aura des puces en forme de dossiers */
{
list-style-type: none;
text-align: left;
margin-left:10%;
}

.titre_menu_g
{
color: white;
text-align: center;
background: url("images/fond-corps.gif") repeat-x;
font-variant: small-caps;
color: #e15429;
font-weight: bold;
font-size: 110%;
}

#menu_g p
{
font-size: 75%;
text-align: center;
color: white;
}

#menu_g a
{
text-decoration: none;
color: white;
font-size: 100%;
text-align: left;
}

#menu_g a:hover
{
text-decoration: none;
color: red;
text-align: left;
}

/*_________________________________________ MENU DROIT _________________________________________________________*/

#menu_d
{
float: right; /* Le menu flottera à droite */
width: 8% ;
padding-right: 10px;
padding-bottom: 10px;
font-size: 80%;
background: url("images/fond-menu.gif") repeat-y top right;
font-family: Arial, "Times New Roman", Times, serif;

}

#menu_d ul
{
list-style-type: none;
text-align: left;
margin-left:10%;
}

.titre_menu_d
{
color: white;
text-align: center;
background: url("images/fond-corps.gif") repeat-x;
font-variant: small-caps;
color: #e15429;
font-weight: bold;
font-size: 120%;
}

#menu_d a
{
text-decoration: none;
color: white;
font-size: 100%;
text-align: left;
}

#menu_d a:hover
{
text-decoration: none;
color: red;
text-align: left;
}

/*_________________________________________ RADIO _________________________________________________________*/

#radio /*Player Flash */
{
display: block;
width: 17%;
margin: auto;
}

.radio /* Texte */
{
margin: auto;
color: black;
font-variant: small-caps;
font-weight: bold;
text-align: center;
}

/*_____________________________________________ CORPS _______ ______________________________________________________________*/
/*________________________________________________________________________________________________________________________*/

.titre_corps /* Titres dans le corps */
{
background: url("images/fond-global.gif") repeat-x;
border: black solid 1px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

#corps
{
margin: 0 auto;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
width: 76%;
font-family: Arial, sans-serif;
font-size: small;
background: url("images/fond-corps.gif");
color: #C56721;
padding-right: 1%;
padding-left: 1%;
}

et pour le html modifié:

fmatsos

13 août 2006 à 14:35:03

Citation : Candygirl

EDIT: il me semblait bien que ce design me disait qqch, c'est pas un peu (beaucoup)inspiré de judgehype ?

Comment que tu le sais

C'est vrai, je me suis inspiré de leur design que je trouves simple et beau, donc efficace

Mais rien ne dit que le mien restera tel qu'il est, je comptes y ajouter ma touche perso par la suite

Mais t'as un sacré esprit de déduction :lol:

> Philias : Je n'ai pas très bien compris l'emploi des <dl>, <dt> et <dd>. Ca sert à quoi au juste ?

EDIT : Si ça vous branche, jetez un coup d'oeil ICI

Philias

13 août 2006 à 19:44:46

Définition list, definition term et definition permette de faire une structure très approprié pour les menus.

Candygirl

15 août 2006 à 12:20:34

en fait ça serait bien plus efficace de faire ainsi (modif de mon css ci-dessus) pour éviter pe pb IE:

#corps
{
margin: 0 10%;
padding: 5px;
font-family: Arial, sans-serif;
font-size: small;
background: url("images/fond-corps.gif");
color: #C56721;
padding-right: 1%;
padding-left: 1%;
}