probleme de css entre ie et firefox

snooper

WRInaute passionné
Salut

Je ne comprends pas pourquoi quand je met le code

BODY {
background-attachment: fixed; background-repeat: no-repeat; background-position: top center;


width: 770px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
background-image: url("/images/blue_background.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */

text-align: center;

}




#page
{
background-color: rgb(255,255,255);/*couleur de fond*/
width: 764px;
margin-left: auto;
margin-right: auto;
text-align: left;
}


#menu-gauche
{
background-color: rgb(192,224,255);/*couleur de fond*/
border: 0px solid rgb(254, 140, 16); /*la bordure*/
border-top: none;/*pas de bordure en haut pour l'image*/
float: left;
width: 180px; /*on fixe une largeur, pareil que la largeur de l'image ^^*/
margin-left: 2px;/*marge de gauche*/
height: auto;/*hauteur automatique*/
}



#corps-de-page
{
height: auto;/*hauteur automatique*/
float: left;
width: 570px; /*largeur*/
text-align: justify;
text-indent: 25px;
margin-left: 10px; /*marge a gauche*/
margin-right: 2px; /*marge a gauche*/


background-color: rgb(255,255,255);/*couleur de fond*/
border: 0px solid rgb(254, 140, 16);/*la bordure*/
}

dans une page, le menu est repoussé en bas sous iexplore mais pas sous firefox, alors que le calcul est juste

2 pixel de marge gauche + 180 pixel pour le menu gauche + 10 pixel de marge gauche de l'article + 570 pixels pour l'article + 2 pixels pour la marge droite = 764 pixels de large comme il l'est dit dans le body ou le div page

cf:

http://www.legypteantique.com/Test/index-marge8.php
et
http://www.legypteantique.com/Test/index-marge10.php

Pour que l'article soit correctement lu sous iexplore, il faut que je mettre 8 px max de marge au lieu des 10. Pourquoi au dessus de 762 pixels dans un tableau de 764 de large, iexplore déconne???

QUand aux colonnes factices, quand je mets dans mon body background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0; cela ne marche pas, et quand je mets ce meme code sur le menu gauche

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0; ou mon code couleur

background: #ccc rgb(192,224,255) repeat-y 50% 0;

cela ne fonctionne pas plus

cf http://www.legypteantique.com/Test/index-marge8.php


Bien Cordialement
 

e-kiwi

WRInaute accro
parceque sous firefox un width de 500 avec 10px de padding fera 520px là ou il ne fera que 500 aevc ie
 

Marie-Aude

WRInaute accro
En passant la page au validateur j'ai pas mal d'erreurs...
http://validator.w3.org/check?verbose=1 ... arge10.php

Tu doubles ta balise html, ce qui n'est pas nécessaire.

Par ailleurs, c'est une bonne idée de faire un reset au début de ton CSS, ce qui évite les différences de comportement des feuilles par défaut.

Pour les colonnes factices, c'est le div de la colonne la plus courte qui doit engliber celui de la colonne la plus longue
 

Scots

Nouveau WRInaute
Tu peux différencier IE et Firefox dans ton code

Place ce code et fais deux fichiers CSS.

<link href="proditech.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="proditech_ie.css" />
<![endif]-->

Le CSS appelé par défaut est complet, celui de IE ne contient QUE les parties qui changent pour IE.

J'espère avoir aidé.

@+
 

snooper

WRInaute passionné
Koxin-L et webmasterdemonsite: Lol


bproductiv: tu veux le lien de mes feuilles css?

Les voila:

http://www.legypteantique.com/test/feui ... test-8.css et

http://www.legypteantique.com/test/feui ... est-10.css

e-kiwi

parceque sous firefox un width de 500 avec 10px de padding fera 520px là ou il ne fera que 500 aevc ie

Pourquoi alors quand je mets 10 px de large si ff considere ca comme 20 px, l'affichage se fait correctement et pas sous iexplorer?

Marie-aude: par reset tu veux dire faire comme http://www.wikistuce.info/doku.php/css/reset???

Pour les colonnes factices, c'est le div de la colonne la plus courte qui doit engliber celui de la colonne la plus longue

Donc il ne faut pas faire
<div menu="menu-gauche>Menu gauche</div>
<div menu="menu-central>Menu central</div>

mais quoi a la place??? J'ai tout fait comme Alsa ou Siteduzero je bloque.


scots: merci pour lt truc. Etant newbie, peut tu me dire vraiment ce qui differe entre ie et ff pour le css?

Merci a toutes et a tous pour l'attention que vous m'avez consacré.

Cordialement
 

Scots

Nouveau WRInaute
Regarde mes deux fichiers css, tu verras tout de suite ce que j'ai eu besoin POUR MON SITE de préciser à IE.

CSS Global :
http://www.proditech.fr/proditech.css

CSS IE :
http://www.proditech.fr/proditech_ie.css

A noter que dans la ligne [IE6], c'est à toi de choisir la version avec laquelle tu veux être compatible.

C'est assez simple mais il faut piger le truc c'est vrai. :) En fait, tout doit être dans le global et compatible W3C (FF). Ensuite, dans le CSS IE, tu mets ce qui cloche avec IE. La ligne appelant le deuxième CSS fera que le navigateur (IE) remplacera par ce qu'il trouve dans ce deuxième fichier.

Autre détail (apparement c'est ton problème) il faut bien faire la différence entre "margin" (marge externe) et "padding" (marge interne).

Par exemple, si tu veux un div de 100 px de largeur, et que tu mets un margin de 10 px à gauche, le div sera décalé de 10 px vers la droite. Mais si tu mets un padding de 10 px à gauche, il sera positionné à 0 à gauche mais fera 110 px de largeur avec un espace de 10 px entre le bord gauche et le début du contenu.

Pigé ? :)

Bonne chance.
 

Marie-Aude

WRInaute accro
Reset oui c'est un exemple, il y en a des plus simples aussi :)

tu peux déjà commencer par * {margin:0; padding:0;}

Pour la structure de tes divs

1 Tu as un div dont l'image de fonds représente la fausse colonne, et qui englobe et le menu et la zone de texte
2 Tu as le div du menu, avec un fonds transparent
3 Tu as le div de la zone de texte, avec un fonds différent, sinon il n'y a pas de colonne.
4 Tu as le div footer (et tu peux au dessus avoir le div du header)
Il te manque donc le div "contenant"
 

snooper

WRInaute passionné
Scots

OK donc le body: ne rien mettre sous ie. Sinon merci a toi et a marie aude pour la difference entre padding et margin.

marie-aude, mon div id="page" n'est-il pas le contenant???

Ou tu veux me dire que je mets un div global qui englobe l'ensemble de la page, et dedans deux div, un pour le menu gauche et un pour le menu droit?

Faire, au lieu de

div page
div menu haut /div
div menu gauche /div
div corps de page /div
div menu bas /div
/div

Faire:

div menu haut /div
div contenant
div menu gauche /div
div article /div
/div
div menu-bas

???

Sinon en gros si quelqu'un peut me faire, moyennant rémunération, lien retour, ... une structure css compatible css et iexplore du type

http://www.legypteantique.com/structure_souhaitee.gif

Si ce schéma n'est pas explicite en gros avoir le rendu de http://www.legypteantique.com/xhtml/.

PS: Quand je dis structure, je veux dire uniquement la feuille css qui correspond a ce type de colonnes. Apres, pour les h1 les p ou encore les images de titres, je m'en occuperai.

Cordialement

n'hésitez pas à me contacter. Et excusez moi si je ne vous réponds pas d'ici demain mais je n'aurai peut etre pas acces a Internet

Bonne journée à toutes et à tous
 

e-kiwi

WRInaute accro
que c est compliqué ces réponses :)

tu fais un :
width:500px
-width:460px

ou l inverse et cela sera réglé, fini ce probleme de padding qui pousse le calque
 

Discussions similaires

Haut