Problème d'affichage sous IE

Résolu

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention - 15 juin 2012 à 09:11

Bonjour tout le monde,
Voilà, j'ai un soucis avec IE. J'ai créé mon tout premier site web et je l'ai mis en ligne, et il fonctionne très bien avec Chrome et Firefox, le problème est avec IE.
Dans mon site j'ai un onglet "coupures de presse", lorsque je clique dessus elles doivent s'agrandir pour que k'on puisse les lire, mais il y a un bug avec IE.
Je ne vois pas d'où peut venir le problème.
Je vous envoi le lien vers mon site (qui est à ouvrir avec IE du coup!) :
https://www.associationnormhandi.fr/coupures_presse.html

Si quelqu'un pouvais m'aider, merci d'avance ;)

Afficher la suite

A voir également:

Problème d'affichage sous IE
Affichage double ecran - Guide
Problème affichage fenêtre windows 10 - Guide
Windows 11 affichage classique - Guide
Ie tab - Télécharger - Outils pour navigateurs
Bill ie cork ✓ - Forum Consommation & Internet

12 réponses

Réponse 1 / 12

chris05 Messages postés 349 Date d'inscription Statut Membre Dernière intervention 28

Peux-tu nous montrer le code source de la partie concernée ? merci ;)

Réponse 2 / 12

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Norm'Handi-Presse</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" href='essai.css' type="text/css"/>

</head>

<body>

<div id="wrapper">

<header>
<h1 id="sitename"><a href="index.html">Association Norm'Handi</a></h1>
<div id="description">Venez découvrir l'association norm'handi</div>
<div id="top">
<nav>
<ul>
<li><a href="de_quoi_on_parle.html">De quoi on parle</a></li>
<li><a href="phototheque.html">Photothèque des activites</a></li>
<li><a href="coupures_presse.html">Coupures de presse</a></li>
<li><a href="nous_contacter.html">Nous contacter</a></li>
</ul>
</nav>
</div>
</header>

<section>

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

<article>
<h2><a href="#" rel="bookmark">Coupures de presse</a></h2>
<div class="entry">
<p>
Vous souhaitez voir les coupures presse dans leur taille d'origine ? Cliquez dessus!<br />
<a href="coupure1.jpg"><img src="tn_coupure1.jpg" alt="" class="Coupure de presse" height=auto width=auto/>
<a href="coupure2.jpg"><img src="tn_coupure2.jpg" alt="" class="Coupure de presse" height=auto width=auto/>
<a href="coupure3.jpg"><img src="tn_coupure3.jpg" alt="" class="Coupure de presse" height=auto width=auto/>
<a href="coupure_accueil.jpg"><img src="tn_coupure_accueil.jpg" alt="" class="Coupure de presse" height=auto width=auto/>
</p>
</div>
</article>

</div>
</div>

<aside id="left">
<div class="box">
<h3>Menu</h3>
<div class="inner">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="actualites.html">Actualités</a></li>
<li><a href="devenir_membre.html">Devenir membre</a></li>
</ul>
</div>
</div>

<div class="box">
<h3>Nos amis</h3>
<div class="inner">
<br />
<a href="#"><img src="abc_ambulances.bmp" alt="ABC Ambulances" class="aligncenter" /></a>
<br />
<a href="#"><img src="afflelou.bmp" alt="Alain Afflelou" class="aligncenter" /></a>
<br />
<a href="#"><img src="logo_lisieux.bmp" alt="Logo Lisieux" class="aligncenter" /></a>
<br />
<p>Garage Lesieur</p>
<br />
<p>Cuisine Rustique</p>
<br />
<p>SA Fouquet</p>
<br />
<p>Sanofi</p>
<br />
<p>Vans Barbot</p>

</div>
</div>

</aside>

</section>

<footer>
<div id="copyright">
<span>© 2012 All rights reserved <a href="#">associationnormhandi.fr</a></span>
</div>
</footer>

</div>

</body>
</html>

Réponse 3 / 12

chris05 Messages postés 349 Date d'inscription Statut Membre Dernière intervention 28

Et dans le css tu as quoi dans "Coupure de presse" ?

Je remarque qu'il y a aussi un souci dans le menu sous IE, uniquement sur la page coupure de presse...

Réponse 4 / 12

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention

Je t'envoi le css, dans lequel, j'ai tout rassemblé.
Oui, je ne comprend pas pourquoi il y a un souci avec le menu seulement sur cette page, c'est bizarre.

* {margin: 0; padding: 0;}
header, nav, section, article, aside, footer {display: block;}
body {
font: 16px/18px Arial, Tahoma, sans-serif;
color: #555;
width: 960px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

a {
color: #333;
outline: none;
}

a:hover { color: #009296;}

p {margin: 0 0 18px;}

img {border: none;}

blockquote {
margin: 0 20px 18px 20px;
padding: 1px 12px;
background: #F2F2F2;
border-left: 3px solid #009296;
border-right: 3px solid #009296;
}

blockquote p {
padding: 8px 0;
margin: 0;
}

.clear {
clear: both;
height: 0;
overflow: hidden;
}

.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {float: left;}

img.alignleft {margin: 5px 5px 5px 0;}

.alignright {float: right;}

img.alignright {margin: 5px 0 5px 5px;}

#wrapper {
width: 960px;
text-align:left;
}

img.framed {
background:white;
padding:4px;
border:1px solid black;
}

/* Header
-----------------------------------------------------------------------------*/

header {
height: 200px;
position: relative;
background: url(header_anh.jpg);
margin-top: 10px;
}

#sitename a {
position: absolute;
top: 30px;
left: 10px;
font: 40px/1 "Arial Black", "Times New Roman", Times;
color: #99ff2f;
text-shadow: 2px 2px 2px #000;
text-decoration: none;
}

#description {
position: absolute;
top: 80px;
left: 15px;
width: 600px;
font-size: 16px;
font-weight: bold;
line-height: 16px;
color: #333;
}

header nav {
position: absolute;
top: 174px;
width: 915px;
left: 25px;
height: 26px;
font: 14px/1 Tahoma, Arial;
text-transform: uppercase;
overflow: hidden;
}

header nav li {
float: left;
list-style: none;
background: #FFF;
margin: 2px;
border: 2px solid #009296;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
}

header nav a {
float: left;
color: #333;
text-decoration: none;
padding: 7px 10px 6px;
border-bottom: 3px solid #F0EFEF;
}

/* Middle
-----------------------------------------------------------------------------*/

section {
width: 946px;
margin-top: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #AEB0AD;
padding: 5px;
background-color: #F2F2F2;
}

section:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

#container {
width: 100%;
float: left;
overflow: hidden;
}

#content { /*Qui sommes nous?*/
margin: 28px 199px;
padding: 15px 15px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #009296;
height: 1%;
background-color: #FFF;
text-align: justify;
}

#content h2 {
font: 24px/1 Arial, Tahoma;
margin: 0 0 18px;
color: #333;
}

#content h2 a {
color: #333;
text-decoration: none;
text-shadow: 2px 1px 2px #CCC;
}

#content h2 a:hover {
color: #009296;
text-decoration: underline;
text-shadow: none;
}

#content .entry h2,
#content .entry h3,
#content .entry h4,
#content .entry h5,
#content .entry h6 {
font: 24px/1 Arial, Tahoma;
margin: 25px 0 18px;
color: #333;
text-shadow: 2px 1px 2px #CCC;
}

#content .entry h3 {font-size: 22px;}

#content .entry h4 {font-size: 20px;}

#content .entry h5 {font-size: 18px;}

#content .entry h6 {font-size: 16px;}

#content h3 {
color: #333;
font-size: 22px;
font-weight: normal;
line-height: 1;
text-shadow: 2px 1px 2px #CCC;
margin: 0 0 28px;
}

/* Sidebars
-----------------------------------------------------------------------------*/

aside {
float: left;
width: 199px;
position: relative;
font-size: 14px;
}

#left {
margin-left: -100%;
}

#right {
margin-left: -200px;
}

aside h3 {
line-height: 35px;
color: #009296;
font-size: 14px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #DDD;
height: 35px;
padding-left: 10px;
}

aside#right h3 { /*Mets les puces devant les liens*/
color: #009296;
}

aside ul {list-style-position: inside;
list-style-image: url(images/redarrow.gif);}

aside li { /*Souligne les liens*/
color: #696969;
padding: 4px 6px 5px 5px;
}

aside a {
color: #000000;
text-decoration: none;
}

.box {
padding: 0 0 5px;
}

.inner {
margin-left: 10px;
margin-right: 10px;
overflow: hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #009296;
padding: 5px;
margin-top: -7px;
margin-bottom: 10px;
text-align:center;
font-family:"Comic Sans MS", "Arial Black", Arial, sans-sherif;
color:#000000;
}

/* Footer
-----------------------------------------------------------------------------*/

footer {
background: #F2F2F2;
font-size: 11px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #AEB0AD;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

#copyright {
font: 10px/16px Tahoma, Arial;
text-align: right;
color: #333;
padding: 22px 10px 0 0;
}

#copyright span {
display: block;
text-transform: uppercase;
}

#copyright a {
color: #6E7761;
text-decoration: none;
}

#copyright a:hover { color: #009296;}

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

Posez votre question

Réponse 5 / 12

chris05 Messages postés 349 Date d'inscription Statut Membre Dernière intervention 28

Tes balises liens ne sont pas refermées :

<a href="coupure1.jpg"><img src="tn_coupure1.jpg" alt="" class="Coupure de presse" height=auto width=auto/>

Il manque le </a> à la fin....

Réponse 6 / 12

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention

Je viens de fermer les balises, le menu s'affiche correctement, par contre les coupures de presse ne sont plus affichées.
Merci pour ton aide ;)

Réponse 7 / 12

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

Salut

tu as quelques erreur !

pour les images le probleme vient de la !
height=auto width=auto

manquait aussi un <li>....</li> dans un <ul> , tu ne peu pas mettre une image directement dans un ul !!

j ai aussi enleve des liens vers l image "coupure_accueil.jpg" qui ne servaient a rien !

ta page corrigee !

<!DOCTYPE html>
<html>
  <head>	
    <meta charset="utf-8">	
    <title>Norm'Handi-Presse
    </title>	
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />	
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />	
    <link rel="stylesheet" href='essai.css' type="text/css"/>	
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
    <div id="wrapper">	
      <header>		
        <h1 id="sitename">
          <a href="index.html">Association Norm'Handi</a></h1>		
        <div id="description">Venez découvrir l'association norm'handi
        </div>		
        <div id="top">			
          <nav>				
            <ul>					
              <li>
              <a href="de_quoi_on_parle.html">De quoi on parle</a>
              </li>					
              <li>
              <a href="phototheque.html">Photothèque des activites</a>
              </li>					
              <li>
              <a href="coupures_presse.html">Coupures de presse</a>
              </li>					
              <li>
              <a href="nous_contacter.html">Nous contacter</a>
              </li>				
            </ul>			
          </nav>		
        </div>	
      </header>	
      <section>		
        <div id="container">		  
          <div id="content">		
            <article>			<h2>
                <a href="#" rel="bookmark">Coupures de presse</a></h2>			
              <div class="entry">				
                <p>					Vous souhaitez voir les coupures presse dans leur taille d'origine ? Cliquez dessus!<br />					
                  <a href="coupure1.jpg">
                    <img src="tn_coupure1.jpg" alt="" class="Coupure de presse"/></a>					
                  <a href="coupure2.jpg">
                    <img src="tn_coupure2.jpg" alt="" class="Coupure de presse"/></a>					
                  <a href="coupure3.jpg">
                    <img src="tn_coupure3.jpg" alt="" class="Coupure de presse"/></a>					
                  <a href="coupure_accueil.jpg">
                    <img src="tn_coupure_accueil.jpg" alt="" class="Coupure de presse"/></a>				
                </p>			
              </div>		
            </article>			
          </div>
          <!-- #content-->        
        </div>
        <!-- #container-->        
        <aside id="left">
          <!-- start left sidebar -->			
          <div class="box">				<h3>Menu</h3>		  
            <div class="inner">
              <ul>
                <li>
                <a href="accueil.html">Accueil</a>
                </li>			  		
                <li>
                <a href="actualites.html">Actualités</a>
                </li>			  		
                <li>
                <a href="devenir_membre.html">Devenir membre</a>
                </li>					
              </ul>				
            </div>			
          </div>
          <!-- .box -->			
          <div class="box">
          <h3>Nos amis</h3>					
            <div class="inner">						
              <br>						
              <a href="#">
                <img src="abc_ambulances.bmp" alt="ABC Ambulances" class="aligncenter"></a>						
              <br>						
              <a href="#">
                <img src="afflelou.bmp" alt="Alain Afflelou" class="aligncenter"></a>						
              <br>						
              <a href="#">
                <img src="logo_lisieux.bmp" alt="Logo Lisieux" class="aligncenter"></a>						
              <br>						
              <p>Garage Lesieur
              </p>						
              <br>						
              <p>Cuisine Rustique
              </p>						
              <br>						
              <p>SA Fouquet
              </p>						
              <br>						
              <p>Sanofi
              </p>						
              <br>						
              <p>Vans Barbot
              </p>					
            </div>			
          </div>
          <!-- .box -->		
        </aside>
        <!-- end left sidebar -->	
      </section>	
      <footer>		
        <div id="copyright">			
          <span>© 2012 All rights reserved 
            <a href="#">associationnormhandi.fr</a>
          </span>		
        </div>	
      </footer>
    </div>
    <!-- #wrapper -->
    <!-- Free template created by http://freehtml5templates.com -->
  </body>
</html>

A+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Réponse 8 / 12

holow1 Messages postés 680 Date d'inscription Statut Membre Dernière intervention 71

pour les pop il y a un plun in tres puissant fancybox e jquery personnelemnt je l'utilise dans mes site http://tzoukamine.com/

Réponse 9 / 12

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention

Salut Rad Zone,
Merci pour ton aide, j'ai mis mon site en ligne avec ton code corrigé, mais sa ne change rien, je n'ai toujours pas les coupures de presse qui s'affiche.

Réponse 10 / 12

chris05 Messages postés 349 Date d'inscription Statut Membre Dernière intervention 28

Et si tu rajoutes un width, comme ça :

<img src="tn_coupure1.jpg" alt="" class="Coupure de presse" width="150px" />

Réponse 11 / 12

RAD ZONE Messages postés 5230 Date d'inscription Statut Contributeur Dernière intervention 1 360

???
moi pourtant j ai tout !!??

voila les fichier http://www.datafilehost.com/download-1702c79d.html
regarde

Réponse 12 / 12

agathe1508 Messages postés 15 Date d'inscription Statut Membre Dernière intervention

Merci à tous de m'avoir aidée!
Rad Zone, c'est bon, tout est nikel, merci! :)

Discussions similaires

Les images ne s'affichent plus

impossible de voir les photos et videos sur une conversation messenger

Probleme d'affichage google chrome

Problème d'affichage d'une page web.

Problème d'affichage/bugs graphiques sur Chrome sur Android

Votre réponse

Discussions similaires