Sujet Précédent Sujet Suivant

Affichage site Internet depuis Outlook

Fermé
Nicolas - 22 juil. 2009 à 18:53
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 - 23 juil. 2009 à 11:58
Bonjour,

J'ai développé récemment un site Internet. Après avoir communiqué l'adresse de ce site par e-mail, mon correspondant m'a indiqué que le site ne s'affichait pas correctement sous IE7 lorsqu'il ouvrait l'url depuis Outlook 2007 (décallage du texte sur la droite). L'affichage reprend son apparence normale dès qu'il clique sur un lien. Je ne comprends pas pourquoi et je n'arrive pas à solutionner ce problème.
Pour info : le site est en php, html et css (les css ont été testées sous IE 7 et fonctionnent bien). Il n'y a pas de javascript ou de flash.

Merci d'avance pour votre aide.

Nicolas
A voir également:

7 réponses

Réponse 1 / 7
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 723
22 juil. 2009 à 18:54
Salut,
As tu l'adresse du site ?
0
Réponse 2 / 7
Nicolas
23 juil. 2009 à 09:34
Je ne peux pas donner l'adresse (site pro). Par contre je peux donner la structure de la page et le contenu de la feuille css correspondant :

Le problème exacte est le suivant : lors de l'ouverture de la page depuis Outlook 2007, la <div> "middle_column" vient se superposer en partie sur la <div> "left_column" alors que normalement ces 2 <div> utilisent la porpriété float:left.

Merci d'avance pour votre aide.

Nicolas

Page :

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

<html>

<head>


<title></title>

<link rel="stylesheet" type="text/css" media="screen" href="style/style.css"/> <!-- GESTION DE LA FEUILLE DE STYLE GLOBALE -->
<!--[if IE 6]-->
<link rel="stylesheet" type="text/css" href="style/style_ie.css" />
<![endif]-->
</head>

<body>
<div id="contener">
<div id="header">
<!-- affichage d'une image -->
</div>

<div id="left_column_contener">
<div id="left_column_top"></div>
<div id="left_column">
<div id="login">
<?php //AFFICHAGE DU MODULE DE LOGIN
include 'scripts/login.php';
?>
</div>
<div id="menu">
<?php //AFFICHAGE DU MENU
include 'scripts/menu.php';
?>
</div>
</div>
<div id="left_column_bottom"></div>
</div>



<div id="middle_column">
<?php //AFFICHAGE DU CORPS DE TEXTE
include 'scripts/switch.php';
?>
</div>

<div id="right_column_contener">
<div id="right_column_top"></div>
<div id="right_column">
<!-- affichage d'une image -->
</div>
<div id="right_column_bottom"></div>
</div>
</div>
<div id="footer">
<!-- affichage d'un tableau contenant une image et du texte -->
</div>
<div id="footer_bottom">
</div>
</body>

feuille de style :

body, th {
color: #0D81BE;
font-family: Arial, Helvetica, sans-serif;
font-size:0.9em;
line-height:1em;
text-align:justify;
}

body {
margin:auto;
width:1000px;
background-color: #FFFFFF;
}

img {
border:0px;
}

a, a:visited {
color: #0D81BE;
text-decoration:none;
}

a:hover{
color: #0D81BE;
text-decoration:underline;
}

/* CHOIX DE LA POLICE DES FORMULAIRES */
.input {
font-family:"Courier New", Courier, monospace;
color:#666666;
}


#contener {
width:1000px;
float:left;
background-image:url(../pictures/contener.gif);
padding:0px;
}
#header {
width:950px;
height:150px;
float:left;
margin-bottom:20px;
margin-left:25px;
}

/* CADRE CONTENANT LE MODULE DE LOGIN ET LE MENU */
#left_column_contener{
width:200px;
min-height:300px;
float:left;
margin-left:25px;
}
#left_column_top{
width:200px;
height:36px;
float:left;
background-image:url(../pictures/column_top.gif);
}
#left_column {
width:200px;
float:left;
background-image:url(../pictures/column.gif);
background-position:bottom;
background-repeat:repeat-y;

}

#login {
width:160px;
float:left;
margin-left:20px;
font-size:small;
margin-bottom:20px;
}

#login a, a:visited {
color:#666666;
text-decoration:none;
}

#login a:hover {
color:#666666;
text-decoration:underline;
}

#menu{
float:left;
width:200px;
}

#menu a, a:visited {
color:#0D81BE;
text-decoration:none;
}

#menu a:hover {
color:#0D81BE;
text-decoration:underline;
}

#left_column_bottom{
width:200px;
height:7px;
float:left;
background-image:url(../pictures/column_bottom.gif);
}



/* CADRE CONTENANT LE CORPS DU TEXTE (LISTES DES ARTICLES ET MODULES DE RECHERHCE)*/
#middle_column {
padding-left: 15px;
padding-right:15px;
position:relative;
float:left;
width:510px;
min-height:300px;
margin-right:7px;
line-height:1.2em;
}
#middle_column a, a:visited {
color:#0D81BE;
text-decoration:none;
}

#middle_column a:hover {
color:#0D81BE;
text-decoration:underline;
}

/* CADRE CONTENANT DE LA PUBLICITÉ */
#right_column_contener{
width:200px;
min-height:300px;
float:left;
}
#right_column_top{
width:200px;
height:36px;
float:left;
background-image:url(../pictures/column_top.gif);
}

#right_column {
width:200px;
float:left;
background-image:url(../pictures/column.gif);
background-position:bottom;
background-repeat:repeat-y;
}

#right_column_bottom{
width:200px;
height:7px;
float:left;
background-image:url(../pictures/column_bottom.gif);
}

#footer {
width:1000px;
color:#666666;
height:137px;
padding-top:20px;
text-align: center;
float:left;
font-size:x-small;
line-height:1em;
background-image:url(../pictures/contener.gif);
}
#footer a, a:visited {
color:#666666;
text-decoration:none;
}

#footer a:hover {
color:#666666;
text-decoration:underline;
}

#footer_bottom {
background-image:url(../pictures/footer_bottom.gif);
float:left;
width:1000px;
height:42px;
}
0
Réponse 3 / 7
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 723
23 juil. 2009 à 11:07
Quelle feuille de style m'a tu donné ?
style.CSS ou style_IE.CSS ?
0
Réponse 4 / 7
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 723
23 juil. 2009 à 11:31
Si tu appliques la propriété CSS margin à un élément de type block ayant la propriété float, alors la marge du même coté que la valeur du float, se voit multipliée par 2.
Attention cela n'est valable que pour le premier élément block de la ligne.
C'est à dire que si tu alignes 3 Balises <DIV> de suite, avec les propriétés suivantes: 
float:left
margin-left:10px;

Alors la première balise <DIV> aura une marge à gauche de 20 pixels, mais les autre se comporterons normalement...

Je pense que le problème viens de là ^^

Il te suffi d'ajouter la propriété css: 
display:inline;

Une fois cette propriété ajouté, Internet Explorer 6 se comportera normalement.
De plus cette propriété ne gênera aucun autre navigateur, car dans la norme W3C, si un élément est flotant, alors il faut ignorer sa propriété display...

A lire...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Nicolas
23 juil. 2009 à 11:40
Je t'ai donné style.css. Le bug se produit sur IE7. Normalement la feuille style_ie.css n'est prise en compte que pour IE6 et les versions antérieures (Si je me suis pas planté). Je n'ai pas pu tester sur les autres IE mais par contre je sais qu'il n'y a pas de problème si j'ouvre la page depuis Outlook dans Google Chrome.
J'ai également fait des test sur Mac en utilisant "Mail" et je n'ai eu aucun problème d'ouverture dans Safari et Firefox.
0
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 723
23 juil. 2009 à 11:48
/* QUELLE MERDE CET IE _ON*/
Essayes de voir avec ma réponse #4
Je pense que le problème viens réellement de là.
/* QUELLE MERDE CET IE _OFF*/
0
Réponse 6 / 7
Nicolas
23 juil. 2009 à 11:51
Merci pour cette explication mais ça ne règle pas le problème avec IE 7. J'ai trouvé un moyen d'y pallier en faisant un rafraîchissement automatique de la page lors de la connexion au site avec une balise <META> que je mets une seule fois dans le code (elle n'apparaît plus après afin de ne pas avoir un rafraîchissement périodique). Cela fera l'affaire mais c'est un peu moche et j'aurais aimé trouvé d'où vient le problème.
0
Réponse 7 / 7
Nicolas
23 juil. 2009 à 11:56
PS: j'ai peut-être oublié de préciser que dès que je clique sur un lien du menu pour changer de page ou que je rafraîchit tout simplement la page avec F5, le problème d'affichage disparaît et ne réapparaît plus pendant la navigation. Bref c'est encore une belle blague de Micro$oft tout ça :(
0
weetabix40 Messages postés 9583 Date d'inscription samedi 12 janvier 2008 Statut Contributeur Dernière intervention 28 novembre 2015 1 723
23 juil. 2009 à 11:58
A ouais carrément ^^
Microsoft ferais mieux de se contenter a bien faire ses OS et rien de plus.
0

Discussions similaires

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.
Utilisateur anonyme -
Panth33ra -

20 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
35 GO à l'étranger
Laurence -
Laurence -

2 réponses