[resolu]Mon site bug sous IE7

Emm' · le 2 novembre 2009

Bonjour à tous,

Ce doit-être un soucis de marge, ça me le fait sur toutes les pages, mais je ne le vois pas...

http://www.ebernard.org

Pour la page d'accueil :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<!-- change this to the title you want to appear in browser title bar -->

<title>Emmanuel Bernard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="dreamLogic" />
<meta name="description" content=" " />
<link rel="stylesheet" href="style.css" type="text/css" />
<style title="essai" media="screen" type="text/css">
.pull {padding-top: 50px; }
p {text-align: right; }
h3 {text-align: center;letter-spacing:-1px;}

</style>
</head>

<body>

<div id="wrap">


<!-- the title that appear in the page header -->

<div id="title">Emmanuel Bernard</div>



<div id="navcontainer">
<ul id="navlist">
<li><a href="index.html">Accueil</a></li>
<li><a href="yoga-fr.html">Yoga</a></li>
<li><a href="energetique-fr.html">Soins énergétiques</a></li>
<li><a href="biographie-fr.html">Biographie</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="mailto:emmanuelb@ebernard.org">Contact</a></li>
<br />
<li><a href="http://www.arjavan.fr">Site de l'association Arjavan</a></li>
<br />
<li><a href="index.html"><img src="img/fr.gif" height="13" /></a><a href="home.html">    <img src="img/gb.gif" height="13" /></a></li>
</ul>
</div>

<div id="container">
<div id="content">


<!-- here is your page content -->

<div class="pull"> 
<img src="img/00040.jpg"  width="160"  />
</div>
<h3>Un enseignement par le Yoga,</h3>
<h3>et par des soins énergétiques.</h3>
<p><br /><br /><br />Un chemin de rencontre avec soi-même, 
<br />
<br />Une approche personalisée,
<br />
<br />Evoluer, s'épanouir, guérir de nos entraves,
<br />
<br />Des outils comme des supports, bien plus que comme des techniques,
<br />
<br />Retrouver l'essence de qui nous sommes,
<br />
<br />Aimer notre vie.
<br /><br /></p>

<p><br /><br /><br /><br />
Les activités d'Emmanuel Bernard, professeur de Yoga &  énergéticien.</p>


<p>
<br />
<br />
</p>

<!-- end page content -->


<p class="footer">Emmanuel Bernard, 30 rue des Tournelles, 75004 Paris.
<br />Tel : 06 83 85 12 26 - <a href="mailto:emmanuelb@ebernard.org">emmanuelb@ebernard.org</a>
<br />Siren : 508 083 961 Ape : 8551Z</p>   
<p class="footer">  
<!-- it'd be super if you left this link intact -->    
Web design de <a href="http://www.dream-logic.com">dreamLogic</a>, transformé par nos soins.
</p>

</div>
</div>
</div>

</body>
</html>

et le css :

body{
background-image: url(img/00913.jpg); 
background-position: 250px 50px;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000000;
margin:
font: 10pt/14pt 'Arial, Lucida Grande', Verdana, Helvetica, sans-serif; 
}

A:link{ color:#b95707; text-decoration:none; }
A:hover{ color:#730d0d; text-decoration:underline; }
A:active{ color:#CCCCFF; text-decoration:none; }
A:active:hover{ color:#FFFFFF; text-decoration:underline; }
A:visited{ color:#CCCCFF; text-decoration:none; }
A:visited:hover{ color:#FFFFFF; text-decoration:underline; }

#wrap{
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background:transparent;
border:0;
}

#navcontainer{
background:transparent;
width:134px;
height:574px;
position:absolute;
margin-top:20px;
margin-left:800px;
}

#navlist li{
background:transparent;
list-style-type: none;
text-align:left;
font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:15px;
letter-spacing:-1px;
color:#666666;
width:180px;
}

#navlist li a:link { color: #d46f1c; text-decoration:none; }
#navlist li a:visited { color: #d46f1c; text-decoration:none; }
#navlist li a:hover {color: #730d0d; text-decoration:none; }

h3{
font-size:18px;
font-weight:bold;
color:#b95707;
letter-spacing:-2px;
font-style:normal;
}

h2{
text-align:left;
font-size: 15px;
color:#b95707;
}
h4{font-size:16px;
font-weight:bold;
color:#730d0d;

font-style:normal;

}
p { letter-spacing : +0,8px;}
table {width: 100%; font-size: 90%; padding-left: 10%; padding-right: 20%}
#container{
width: 600px;
margin :0px;
background:url(.png) transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='bg.png');
/*filter:alpha(opacity=25);
-moz-opacity: 0.25;
opacity: 0.25;*/
}

#content{
width:750px;
/*margin:0px;*/
padding:30px;
padding-bottom:300px;
text-align:justify;
font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#FFFFFF;
}

.footer{
padding:9px;
text-align:right;
font: 8pt/18pt 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#d46f1c;
letter-spacing : +0,2px;
}

#title{
background:#730d0d;
text-align:right;
padding:9px;
padding-right: 20%;
font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:18px;
color:#b95707;
}


.pullquote {
color:green;
width:200px;
float:right;
width:150px;
margin-top:8px;
margin-bottom:8px;
margin-left:10px;
padding-bottom:10px;
font-family:'Lucida Grande', Helvetica, sans-serif;
font-size: 24px;
line-height:26px;
letter-spacing:-3px;
text-align: right;
color:#999999;
}
.pull {
color:green;
width:200px;
float:left;
margin-top:10px;
margin-bottom:10px;
}

Merci,

Modifié le 4 novembre 2009 par Emm'

Dylav · le 2 novembre 2009

Salut Emm',

J'ignore si cette ligne est la fautive, mais elle est bizarre : si tu l'enlevais, pour voir ?

body{
background-image: url(img/00913.jpg);

background-position: 250px 50px;

background-attachment: fixed;

background-repeat: no-repeat;

background-color: #000000;

margin:

font: 10pt/14pt 'Arial, Lucida Grande', Verdana, Helvetica, sans-serif;

}

-édit- Pour la page d'accueil, on dirait que ça le fait…

Emm' · le 2 novembre 2009

Salut Dylav,

Ca fait plaisir, ! C'est vrai que je ne traine plus trop sur le zeb ces derniers temps

Ca y est, c'est modifié. Par contre comme je suis sous Linux, je ne peux pas vérifier... Tu as IE7 ?

Dylav · le 2 novembre 2009

Alors, je vois que tu es en train de refondre totalement ton site

En tout cas, quand je liste ta feuille de style sous FireFox (http://www.ebernard.org/style.css), la ligne parasite y est toujours ?

Et quand je regarde ton site sous IE8, le défaut de marge y est encore… bien sûr (je n'ai plus IE7, mais je pense que sa réaction est la même que celle d'IE8).

-édit- Autant pour moi, c'était une histoire de cache (pour FF). En revanche, l'ano persiste bien sous IE8 : il va falloir chercher plus loin…

Dylav · le 2 novembre 2009

Je te soumets une piste d'architecture plus souple que celle que tu emploies. Tout d'abord, tu fais flotter à droite ton bloc navcontainer (il ira se coller à droite de la fenêtre, pas besoin de marges). Ensuite, tu ne donnes pas de largeur (width) aux blocs container et content. De sorte que l'ensemble va s'adapter à la largeur de la fenêtre de ton visiteur.

Il reste quelques détails à régler, comme la hauteur du bloc navcontainer et, bizarrement, la largeur totale sous FF (le scrolling horizontal qui apparaissait sous IE disparaît, mais il en apparaît un sous FF : je n'ai pas vérifié si tu employais quelque part des marges négatives ?).

#navcontainer{
float:right;
width:134px;
height:574px;
margin-top:20px;
}

-édit- mon écran est défini en 1024x768, mais sous FF le scrolling reste similaire en 1280x1024.

Dylav · le 2 novembre 2009

Ça y est, j'ai trouvé la raison du scrolling horizontal sous FF. Tu définis une largeur de 134px pour le bloc navcontainer, dans lequel tu installes une navlist de largeur 180px.

Solution : donne au bloc navcontainer la largeur 180px, et supprime le width dans navlist.

Encore une curieuse différence de comportement entre FF et IE…

Emm' · le 2 novembre 2009

Merci beaucoup pour cet épluchage.

J'ai fait l'essai sur mon ordi de tes modifs'.

A mon goût esthétique personnel, je préfère que le menu ne flotte pas à droite : j'ai un écran très large (24", 16/9ème) & du coup, ça fait un vide au milieu du site.

Toutefois, les écrans de cette taille ne sont pas si courant que ça et si ça résoud mon problème, je suis preneur de ta solution.

Penses-tu que de simplement modifier ce scrolling horizontal peut résoudre le problème ? (je l'ai fait... mais ne peux toujours pas regarder ).

Oui, je refonds mon site. Les projets qui évoluent et grandissent !!

Emm' · le 2 novembre 2009

L'autre possibilité ?? , pour en revenir à ta proposition plus souple, c'est en même temps que de faire flotter le menu à droite, de faire venir le contenu au centre (faut faire un essai par raport aux tailles d'écran).

J'arrive à recentrer mon image de fond :

body

background-position: center;

Mais ne trouve plus comment centrer mon bloc #container

Je continue d'y réfléchir et y reviens, il y a mieux, c'est de mettre une nouvelle balise de façon a "encapsuler", excuse mon vocabulaire pas trop informatique !) tout ce qui est sous le titre (barre rouge avec mon nom)

rajouter <div id="tube"> en dessous du <div id=title...>

et dans le css : #tube {width:940px}

Je ne l'ai toujour pas centré sur l'image de fond, mais garde ainsi les proportions graphiquies qui me plaisent !

Modifié le 2 novembre 2009 par Emm'

Dylav · le 2 novembre 2009

Le scrolling horizontal sous FF découle de l'incohérence des width de navcontainer et de navlist. C'est pourquoi je te conseillais de ne pas définir de width dans le navlist, et d'augmenter le width du navcontainer.

L'idéal, lorsque tu construis une page, c'est de tout mettre en proportionnel, depuis les dimensions des blocs jusqu'aux tailles de polices. Ainsi, tous tes visiteurs auront à peu près le même aperçu de ta page quelle que soit leur résolution d'écran (de 800x600 jusqu'à 3200x1200 ou plus).

Dans cet esprit, je te suggère de définir navcontainer avec un width:20%;

Pour les polices, l'unité proportionnelle est “em”. La taille standard* au niveau du bloc principal (le body) est font-size:1em;. Si par exemple tu veux imposer un effet “loupe” à ta page, tu peux décider body{font-size:1.2em;}. Attention, la taille de police d'un bloc est proportionnelle à celle de la police du bloc qui le contient : par exemple, les définitions explicites de 0.8em dans le body puis 0.8em dans navcontainer donnent 80% de la taille standard dans le body, mais 64% dans navcontainer (0,8x0,8). C'est sensible, et délicat à régler finement !

En tout cas, évite autant que faire se peut un #tube{width:940px;}, qui donnera un effet radicalement différent sur des écrans 800x600 et 1280x1024 (par exemple). Donne plutôt cette largeur en pourcentage, par exemple #tube{width:50%;}. Pense toujours à ton visiteur, dont l'écran est forcément différent du tien

__________

* Cette taille “standard” change en fonction de la résolution de l'écran. Ainsi, si tu conçois une page HTML tout en proportionnel, tu devrais la voir [presque] exactement pareille quelle que soit la résolution que tu choisiras pour ton écran… et il deviendra probable que tous tes visiteurs aient de ta page la même vision que toi !

Mickey-3d · le 2 novembre 2009

Slt, petit truc tout simple et trop pratique. Je te conseille un petit soft qui te permet de visualiser tes page web sous les differentes versions de IE, c'est IETester : http://my-debugbar.com/wiki/IETester/HomePage .

Connexion

Pas encore inscrit ?

[resolu]Mon site bug sous IE7

Messages recommandés

Emm'

Dylav

Emm'

Dylav

Dylav

Dylav

Emm'

Emm'

Dylav

Mickey-3d

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer