probleme de css entre ie et firefox

WRInaute accro Inscrit le: 24 Aoû 2006 Messages: 1290

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

WRInaute accro Inscrit le: 29 Mar 2007 Messages: 1926

Y a d'autres méthodes pour tenter une approche avec une femme Mr. Green

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

WRInaute impliqué Inscrit le: 01 Sep 2007 Messages: 411

coller ton css entier ne sert pas a grand chose suffit d'avoir le lien vers la page et c'est bon...

En passant la page au validateur j'ai pas mal d'erreurs...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.legypteantique....

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

Place ce code et fais deux fichiers CSS.

<link href="proditech.css" rel="stylesheet" type="text/css" />


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é.

@+

WRInaute accro Inscrit le: 24 Aoû 2006 Messages: 1290

Koxin-L et webmasterdemonsite: Lol

bproductiv: tu veux le lien de mes feuilles css?

Les voila:

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

http://www.legypteantique.com/test/feuille-css-test-10.css

e-kiwi

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. Smile

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é ? Smile

Bonne chance.

Reset oui c'est un exemple, il y en a des plus simples aussi Smile

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"

WRInaute accro Inscrit le: 24 Aoû 2006 Messages: 1290

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

Moi je peux te faire ça sans problème si tu veux.

que c est compliqué ces réponses Smile

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

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

E-Kiwi, je ne comprend pas, si tu veux une marge intérieure, il te faut FORCEMENT un padding ...

WRInaute accro Inscrit le: 24 Aoû 2006 Messages: 1290

Scots tu pourrais me faire ça???

probleme de css entre ie et firefox

A lire dans l'actualité sur WRI :

Autres sujets de discussion :