Affichage site Internet depuis Outlook
Nicolas
-
weetabix40 Messages postés 9583 Date d'inscription Statut Contributeur Dernière intervention -
weetabix40 Messages postés 9583 Date d'inscription Statut Contributeur Dernière intervention -
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
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:
- Affichage site Internet depuis Outlook
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Url site internet - Guide
- Site pour vendre des objets d'occasion - Guide
7 réponses
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;
}
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;
}
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:
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:
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...
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...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
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.