Toujours des problèmes avec IE

Ron56 · 24 Mars 2006

Je n'arrive pas a rendre mon site compatible , c'est fastidieux !

Sous FF (nikel):

Sous IE ( pas correct ) :

PS : j'ai déja une feuille de style spécial IE ^^ :

Voila les sources :

Feuille de style principale :

Code:

body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     background-image: url(../images/bg.gif);
     }

#global {
     margin-left: auto;
     margin-right: auto;
     width: 779px;
     text-align: left; /* on rétablit l'alignement normal du texte */
     }

#header {
     background-image: url(../images/banniere.jpg);
     background-repeat: no-repeat;
     height: 123px;
     }

#menu_h_g {
     background-image: url(../images/menu_h_g.jpg);
     background-repeat: no-repeat;
     width: 154px;
     height: 35px;
     float:left;
     }

#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: auto;
      } 

#contenu {
     background-image: url(../images/contenu_bg.jpg);
     background-repeat: repeat-y;
     width: 779px;
     }

#menu_v_g {
     width: 151px;
     float: left;
     }

#texte {
     width: 628px;
     margin-left: 151px;
     }

#footer {
     background-image: url(../images/footer_bg.jpg);
     width: 779px;
     height: 19px;
     clear:both; 
     }

La feuille de style "IE" se rajoutant a la principale :

Code:

#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: auto;
	position: relative;
	left: -3px;
	margin-right: -3px;
      }

Et le code de la page :

Code:

<body>
<div id="global">
<div id="header">
</div>
<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>
<div id="contenu">
<div id="menu_v_g">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
</div>
<div id="texte">
contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>contenu<br/>
</div>
</div>
<div id="footer">
</div>
</div>
</body>

Que rajouté dans la feuille de style "IE" pour avoir le meme reultat que IE ? :roll:

Ca commence a me soulé :/

phpmikedu83 · 24 Mars 2006

rajoute un float:left;

sur:

#texte {
width: 628px;
margin-left: 151px;
}

ça devrait le faire ;-)

Ron56 · 24 Mars 2006

Non justement ca foire encore plus je comprend pas pq :?

pene-r · 24 Mars 2006

et le float-(?) sur menu_v_g ??

Ron56 · 24 Mars 2006

pene-r a dit:
et le float-(?) sur menu_v_g ??

Je n'est pas compris ?
:?

phpmikedu83 · 24 Mars 2006

et ta div contenu, elle est pas dimensionnée...

Ron56 · 24 Mars 2006

phpmikedu83 a dit:
et ta div contenu, elle est pas dimensionnée...

Je l'est dimensionée bien que cela ne serve a rien !

Personne ne sait ce qu'il faut que j'ajoute dans la feuille de style "IE" ? :?

phpmikedu83 · 24 Mars 2006

Ron56 a dit:
Je l'est dimensionée bien que cela ne serve a rien !

Si, parce que si ton bloc se trouve là, c'est qu'il n'a pas la place de le mettre à côté de ton autre bloc...

Et avec un margin-left:150px; au lieu de 151, ça donne quoi???

Ron56 · 24 Mars 2006

Avec le 150 cela ne change rien c'est logique :

Code:

#menu_v_g {
     width: 151px;
     float: left;
     }

#texte {
     width: 628px;
     margin-left: 151px;
     }

628+151=779

Et le contenu a bien la bonne taille :

Code:

#contenu {
     background-image: url(../images/contenu_bg.jpg);
     background-repeat: repeat-y;
     width: 779px;
     }

dd32 · 24 Mars 2006

J'ai eu le même problème un jour... Comme quoi faut aussi être bon en maths pour pondre des styles corrects !!

et si tu ne mets plus "width: auto;" ?

HawkEye · 24 Mars 2006

oui mais ie ne consière pas les margin et les padding de la même manière que FoFox.

Essaye ça:

met ton margin à 160 (ça devrait marcher), puis réduis de 1px en 1px jusqu'à ce que ça foire.

dd32 · 24 Mars 2006

Pardon HawkEye_TpfH j'ai posté en même temps mais oui, à taton c'est pas mal non plus...

Sinon les exemples d'Alsacreations fonctionnent sous IE et Firefox... peut-être cela te donnera une piste :
http://css.alsacreations.com/Modeles-de ... age-en-CSS

Ron56 · 24 Mars 2006

J'en ai vraiment marre de pas pouvoir continuer a cause de ca :

Si je met le margin-left a 190 ca fait ca sous IE :

:x

phpmikedu83 · 24 Mars 2006

Ron56 a dit:
Avec le 150 cela ne change rien c'est logique :

628+151=779

Oui, mais si ce con de IE te compte des marges de 1px par défaut, ben ça va pas, la preuve!!!!

Et comme HawkEye_TpfH te donnes la piste, quand ça marche pas on essaie d'isoler le problème en y allant à taton, en faisant apparaitre les bordures des div, etc...

Mais bon, si après t'es hermétique aux conseils qu'on peut te donner, ben ne poste pas sur le forum... Car comme au contraire de ce que tu as laissé entendre sur ton post, je sais encore compter, mais faut-il mesurer la portée des conseils que l'on peut te donner...

HawkEye · 24 Mars 2006

dd32 a dit:
et si tu ne mets plus "width: auto;" ?

probablement bien vu !

et: n'y a-t-il pas un élément qui a un clear: both; ou un clear: left; ?

Ron56 · 24 Mars 2006

HawkEye_TpfH a dit:
dd32 a dit:

et si tu ne mets plus "width: auto;" ?

Cliquez pour agrandir...

probablement bien vu !

et: n'y a-t-il pas un élément qui a un clear: both; ou un clear: left; ?

Si le footer , tout en bas !?

HawkEye · 24 Mars 2006

ok mais rien plus haut ?

et as-tu essayé de virer le width: auto ?

Ron56 · 24 Mars 2006

HawkEye_TpfH a dit:
ok mais rien plus haut ?

et as-tu essayé de virer le width: auto ?

Style IE :

Code:

#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: 625px;
	position: relative;
	left: -3px;
	margin-right: -3px;

Logiquement ca devrait etre 628, mais la 625 c'est bien , si je met plus c'est tro long et ca fait un "retour a la ligne" comme ca :

-http://img364.imageshack.us/my.php?image=temp9vt.jpg

Ron56 · 24 Mars 2006

Et pas de clear XXX; plus haut :wink:

dd32 · 24 Mars 2006

ah ? le footer contient clear:both;

à ce propos, au cas où (désolé c'est un autre forum) :
-http://linuxfr.org/forums/32/2685.html

et ça aussi (l'exemple 13 ressemble un peu à ce que tu veux faire) : http://www.aidenet.com/css/css38m.htm

edit : zut, trop lente, z'aviez déjà postés !!

Ron56 · 24 Mars 2006

Moi c'est fait comme ca :

___________________________________________

HEADER

___________________________________________
___________|
___________|
___________|
Float1 | Float 2
___________|
___________|
___________|
___________|
___________________________________________

Footer en clear both qui se place sous les 2 floats

C'est logique non ?

HawkEye · 24 Mars 2006

Comme ça plutôt:

<global>
-<header></header>
-<div>
--<menuLeft></menuLeft>
--<content></content>
-</div>
-<footer></footer>
</global>

avec:

menuLeft: {float: left; width: 150;}

et

content: {margin-left: 155;}

Ron56 · 24 Mars 2006

HawkEye_TpfH a dit:
Comme ça plutôt:

<global>
-<header></header>
-<div>
--<menuLeft></menuLeft>
--<content></content>
-</div>
-<footer></footer>
</global>

avec:

menuLeft: {float: left; width: 150;}

et

content: {margin-left: 155;}

C'est comme ca :?

Code:

<body>
<div id="global">

<!-- Contient tout les div et creer la largeur fixe de 779px -->


<div id="header">   
<!-- Affiche la banniere -->
</div>




<div id="menu_h_g">
<!-- Menu horizontal  , partie gauche  [ attribut float:left; ] -->
</div>



<div id="menu_h_d">
<!-- Menu horizontal  , partie droite -->
</div>



<div id="contenu">

<!-- Contient tout en dessous du menu vertical  [ attribut clear:both; ] pour placer ce bloc sous les 2 blocs flotants du menu horizontal -->

<div id="menu_v_g">
<!-- Menu vertical [ attribut float: left; ] pour situer le texte de la page et le menu cotes a cotes-->
</div>




<div id="texte">
<!-- Texte de la page -->
</div>




</div>

<div id="footer">
<!-- Footer [ attribut clear:both; ] pour placer ce bloc sous les 2 blocs flotants du menu vertical + texte-->
</div>



</div>
</body>

Mon code est peut etre plus clair