Problème d'affichage sous Firefox

**boreux** · 31/03/2009, 12h03

Bonjour, je suis pas expert en CSS. J'ai installé le module Joomla (Opensource) qui bosse avec du CSS, et j'ai installé un template graphique que j'ai mis à jour comme je le pouvais. Je me retrouve avec 3 petits soucis d'affichage sous Firefox, alors que çà marche sous IE.

J'ai donc besoin de votre aide

Mon site est visible à l'adresse http://www.iame-belgium.com/
Les 3 soucis sont les suivants sous Firefox :
- les karts de la bannière du dessus sont décalés sous mon logo à gauche
- mon entête (où l'on voit les moteurs défiler) ne se dimensionne pas bien et tout est décalé
- le texte de la page d'accueil (3 colonnes) de la colonne du milieu débordent sur le colonne de droite

Merci pour votre aide

**Macmillenium** · 31/03/2009, 12h49

Bonjour et bienvenue

Après un rapide coup d'œil sur ton site :

Envoyé par boreux

- les karts de la bannière du dessus sont décalés sous mon logo à gauche

quel est le comportement attendu ?

Envoyé par boreux

- mon entête (où l'on voit les moteurs défiler) ne se dimensionne pas bien et tout est décalé

Sa vient de ton resize forcé coté HTML height="278" width="100%", essaye d'adapter tes images à la taille voulu avec un logiciel retouche d'images.

Envoyé par boreux

- le texte de la page d'accueil (3 colonnes) de la colonne du milieu débordent sur le colonne de droite

Il te manque un margin-right = à la largeur de la div #right mais inutile dans le cas ou le conteneur parent/la div en question possède une largeur fixe.
Essaye ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#container2 { 
float:left;
/* margin:0 0 0 223px; */
padding:0 10px;
width:435px;
}

Attention à la déclaration XML au tout début de ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?xml version="1.0" encoding="utf-8"?>

Qui bascule IE6- en mode de rendu Quirks, mode non standard

A enlever

**boreux** · 31/03/2009, 13h17

Alors, le comportement attendu, est le même que sous IE, à savoir les karts doivent apparaitre à droite du logo IAME dans l'entête. Sous FF, c'est décalé à gauche, en arrière plane du logo.

J'ai resizé à la taille de l'image au lieux de 100%, c'est bcp mieux ! Merci, mais cette fois, çà ne marche que sous FF et plus IE lol...

En fait c'est cette partie qui me pose problème :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="header">
   <div class="left-bg">
      <div class="baniere_bord">
      </div>
      <div class="baniere_gauche">
          <jdoc:include type="modules" name="user5" style="userx" />
      </div>
      <div class="baniere_droite">
           <img src="images/headers/header1.jpg" height="278" width="100%" name="SlideShow" /><!--621-->
       </div>
    </div>
</div>

L'idée est dans une partie gauche (banniere_gauche) d'insérer une news, et dans cette de droite, des photos qui défilent

Pour le container2, c'est dejà mieux aussi ! Sauf que si je prends la page "contact" par exemple, mes logos de la bannière di fond remontent...

Pour le UTF8, c'est joomla qui générait çà, je l'ai mis en comment

Un grand merci déjà !

**boreux** · 31/03/2009, 13h37

J'ai été heureux trop vite... Si je modifie container2, comme demandé, çà ne mareche plus non plus sous IE

**Macmillenium** · 31/03/2009, 13h44

Envoyé par boreux

Pour le UTF8, c'est joomla qui générait çà, je l'ai mis en comment

Attention, j'ai dis enlever la déclaration et non pas commenter.
Ton commentaire bascule IE (toutes ces versions) en mode Quirks ! c'est peut-être l'origine de ce problème :

Envoyé par boreux

J'ai resizé à la taille de l'image au lieux de 100%, c'est bcp mieux ! Merci, mais cette fois, çà ne marche que sous FF et plus IE lol...

A voir.

Envoyé par boreux

Alors, le comportement attendu, est le même que sous IE, à savoir les karts doivent apparaitre à droite du logo IAME dans l'entête. Sous FF, c'est décalé à gauche, en arrière plane du logo.

Ok, ajoutes ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#header { 
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
overflow:hidden;
}

#header .baniere_droite {
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
float:left;
}

Envoyé par boreux

Pour le container2, c'est dejà mieux aussi ! Sauf que si je prends la page "contact" par exemple, mes logos de la bannière di fond remontent...

Encore un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.width { 
overflow:hidden;
width:100%;
}

**boreux** · 31/03/2009, 14h18

J'ai viré UTF8 :o)
J'ai fait les modifs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#header { 
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
overflow:hidden;
}
 
#header .baniere_droite {
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
float:left;
}

Ca n'a rien changé... Je suis revenu en arrière et... catastrophe, plus rien qui va, j'ai des décalages de textes, de bannière sous IE, et FF j'ai peur d'essayer

Après revalidation du tout, et retour en arrière : Si je remet width:100%, tout revient dans l'ordre...

**Macmillenium** · 31/03/2009, 14h28

Tu as enlevé la déclaration mais laissé le :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Là, tous les navigateurs sans exception qui sont basculé en mode Quirks

La première ligne de ton code doit être le doctype, rien d'autre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Envoyé par boreux

Ca n'a rien changé... Je suis revenu en arrière et... catastrophe, plus rien qui va, j'ai des décalages de textes, de bannière sous IE, et FF j'ai peur d'essayer

Peur d'essayer ?

C'est juste parce que tu as mal fermé un commentaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
   </div>
</div>
-->

Enlève donc le "-->"

**boreux** · 31/03/2009, 14h31

Bon, je me suis fait un espace de tests, sur http://www.iame-belgium.com/wks

Ainsi je ça pas toute la prod, car le site est ouvert depuis peu, et pas mal de visiteurs, j'ai peur de les perturber

Je propose, si çà convient, de travailler par étape !

1/ j'ai viré tout mon header...
2/ j'ai viré UTF8 brol machin
3/ on corrige mes problèmes de container2, qui sont visibles sous IE et FF

ensuite on avancera, puis je paye un godet

Pour le container2, j'ai mis le code que tu avais indiqué, et j'ai viré ce qu'il y avait endessous, sinon çà marchait pas :
* html #container2 {margin:0px 0px 0px 230px; width:100%}

Ca marche sous FF parfaitement, çà marche presque sous IE, a savoir, la rubrique "contact" et "liens interessants" posent problèmes (décalage vers le bas)

**desert** · 31/03/2009, 14h41

Bonjour,
tu peux essayer ceci :
- pour l'image du kart à côté du logo :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#mon_entete {
    background:transparent url(../images/entete.jpg) no-repeat scroll right 0;
    height:278px;
    width:495px;
    margin-left:249px;
}

- pour le container2 au centre :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#container2 {
    margin: 0 198px;
}

**boreux** · 31/03/2009, 14h46

on avance !

Desert, merci pour mon_entete, çà c'est corrigé, çà marche sous IE et FF

Pour le container2, sous FF : marges trop courtes, sinon fonctionnement correct, sous IE décalage de tout vers le bas

**Macmillenium** · 31/03/2009, 14h51

Envoyé par boreux

Pour le container2, j'ai mis le code que tu avais indiqué, et j'ai viré ce qu'il y avait endessous, sinon çà marchait pas :
* html #container2 {margin:0px 0px 0px 230px; width:100%}

Ca marche sous FF parfaitement, çà marche presque sous IE, a savoir, la rubrique "contact" et "liens interessants" posent problèmes (décalage vers le bas)

Enlève la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
* html #container2 {margin:0px 0px 0px 230px; width:100%}

C'est un hack qui cible IE6-, le problème vient du width:100%

Pour le container2, sous FF : marges trop courtes, sinon fonctionnement correct, sous IE décalage de tout vers le bas

As tu ajouté le padding:0 10px ?

**boreux** · 31/03/2009, 14h55

ok,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

*html #container2

est viré

actuellement, j'ai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#container2 { 
float:left;
/* margin:0 0 0 223px; */
padding:0 10px;
width:435px;
}

**boreux** · 31/03/2009, 14h56

ok,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

*html #container2

est viré

actuellement, j'ai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#container2 { 
float:left;
/* margin:0 0 0 223px; */
padding:0 10px;
width:435px;
}

Et là, j'aime FF et pas IE

**Macmillenium** · 31/03/2009, 15h06

C'est quoi le problème sous IE ?

Pour la scrollbar horizontale, tes javascript génèrent un tableau imbriqué dans une div (loading il me semble) et qui pousse la zone d'affichage.

**boreux** · 31/03/2009, 15h36

Si je clique sur "liens interessants" ou "contact", tout se positionne à hauteur du bas du menu de droite, comme si il y avait un decalage vers le bas

**Macmillenium** · 31/03/2009, 15h46

Tu fais la même chose pour #container :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#container { /* margin:0px 230px 0px 233px;*/ width:435px; float:left; padding:0 10px; }

Et tu ne garde finalement qu'un seul container.

**boreux** · 31/03/2009, 15h50

Négatif mon colonnel

C'est pas à cause du tableau imbriqué ? ARTICLE_IDENT ou COMPONENTHEADING ?

**Macmillenium** · 31/03/2009, 16h02

Enlève le hack !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
* html #container {margin:0px 227px 0px 230px; width:100%}

**boreux** · 31/03/2009, 16h15

On t'as déjà dit que t'étais un dieu ???? Bon alors je le dis

Bon 2 problèmes sur 3 corrigés !

Le dernier : mon entête, que j'ai viré pour l'instant...

L'idée est d'insérer entre ma bannière bleue et le reste du site l'équivalent d'un tableau d'une ligne (avec hauteur définie) et 2 colonnes

La première colonne prend plus ou moins le 1/3 de ma page, elle contiendra du texte qui devra pouvoir scroller si la hauteur de celui-ci est trop grande (> à la hauteur de l'image reprise dans la colonne 2, taille fixée d'avance), et le reste (seconde colonne) sera constitué d'une image

Cette entête est actuelle visible sur la prod là : http://www.iame-belgium.com

**Macmillenium** · 31/03/2009, 16h19

Envoyé par boreux

L'idée est d'insérer entre ma bannière bleue et le reste du site l'équivalent d'un tableau d'une ligne (avec hauteur définie) et 2 colonnes

La première colonne prend plus ou moins le 1/3 de ma page, elle contiendra du texte qui devra pouvoir scroller si la hauteur de celui-ci est trop grande (> à la hauteur de l'image reprise dans la colonne 2, taille fixée d'avance), et le reste (seconde colonne) sera constitué d'une image

Fais un essai et reviens vers nous si tu rencontres des problèmes

Problème d'affichage sous Firefox

CSS

Discussions similaires

Partager

Partager