Problème d'affichage sous IE

Résolu/Fermé
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012 - 14 juin 2012 à 10:09
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012 - 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 ;)



A voir également:

12 réponses

chris05 Messages postés 338 Date d'inscription jeudi 13 mars 2008 Statut Membre Dernière intervention 17 janvier 2024 28
14 juin 2012 à 10:35
Peux-tu nous montrer le code source de la partie concernée ? merci ;)
0
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012
14 juin 2012 à 10:50
<!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" 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><!-- #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>
0
chris05 Messages postés 338 Date d'inscription jeudi 13 mars 2008 Statut Membre Dernière intervention 17 janvier 2024 28
14 juin 2012 à 11:02
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...
0
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012
14 juin 2012 à 11:17
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;}
0

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

Posez votre question
chris05 Messages postés 338 Date d'inscription jeudi 13 mars 2008 Statut Membre Dernière intervention 17 janvier 2024 28
14 juin 2012 à 11:21
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....
0
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012
14 juin 2012 à 11:29
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 ;)
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 14/06/2012 à 11:58
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. ♣
0
holow1 Messages postés 680 Date d'inscription lundi 21 décembre 2009 Statut Membre Dernière intervention 7 décembre 2012 71
14 juin 2012 à 12:02
pour les pop il y a un plun in tres puissant fancybox e jquery personnelemnt je l'utilise dans mes site http://tzoukamine.com/
0
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012
14 juin 2012 à 13:26
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.
0
chris05 Messages postés 338 Date d'inscription jeudi 13 mars 2008 Statut Membre Dernière intervention 17 janvier 2024 28
14 juin 2012 à 14:06
Et si tu rajoutes un width, comme ça :

<img src="tn_coupure1.jpg" alt="" class="Coupure de presse" width="150px" />
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
14 juin 2012 à 14:16
???
moi pourtant j ai tout !!??

voila les fichier http://www.datafilehost.com/download-1702c79d.html
regarde
0
agathe1508 Messages postés 15 Date d'inscription vendredi 25 novembre 2011 Statut Membre Dernière intervention 15 juin 2012
15 juin 2012 à 09:11
Merci à tous de m'avoir aidée!
Rad Zone, c'est bon, tout est nikel, merci! :)
0