5568 sujets

Sémantique web et HTML

Probleme d'affichage du texte sous IE

Salut à tous,

J'ai un problème de compatibilité avec IE. J'ai du texte contenu dans certaines balises qui ne s'affiche pas. Paradoxalement, une affiche contenue dans une même balise s'affiche correctement.

J'ai utilisé les nouvelles balises HTML5 (aside, section...) avec le script suivant pour qu'elles soient reconnues sous IE :

(
 function()
{
    if(!/*@cc_on!@*/0)return;   // compilation conditionnelle 

    var str = "abbr,article',aside,audio,bb,canvas,datagrid,datalist,details,dialog,
    eventsource,figure, footer,header,mark,menu,meter,nav,
    output,progress,section,time,video";

    var list = str.split(",");

    for(i = 0; i < list.length; i++)
    {
      document.createElement(list[i])
    }
 }


Comme le texte ne s'affichait pas, j'ai remplacé les balises HTML5 par <div id="....">.
Sans résultat...

En résumé :
Sous IE9 :

+ Les balises header & nav sont reconnues. Tout s'affiche.
+ Les autres balises ne sont pas vraiment reconnues. Le texte ne s'affiche pas.

Sous IE8, 7, 6 :
+ Rien ne marche mais dans ce cas, ça ne m'étonne pas du tout.
+ si vous avez une astuce que ça marche "à peu près" sous IE6, 7,8 je suis preneur !

Sous Chrome, Firefox :
+ Aucun problème, tout s'affiche.


Ma question :
- Est ce que vous comprenez pourquoi mon texte ne s'affiche pas ?
- Est ce que cela peut venir de mon CSS ?

Merci beaucoup !

Voici mon code HTML et mon CSS :


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style2.css"/>
		<title> Licenses Service </title>
		<!--[if IE]>
		<link rel="stylesheet" href="./html5.js">
		<![endif]-->  
	</head>
<body>
	<div id="image_background">
		<div id="background_header">
			<div id="background_navigation">
				<div id="bloc_page">
					<nav>
						<ul>
							<li><a class="select" href="./index.php">Accueil</a></li>
							<li><a href="./service.php">Services</a></li>
							<li><a href="./contact.php">Contacts</a></li>
						</ul>
					</nav>
					<header>
						<img id="logo" src="./image/logo2.png" alt="Licences Service"/>
						<div id="principe">
							<h1>LICENCES SERVICE, c'est votre secrétaire !</h1>
							<h2>Nous saisissons vos licences pour vous !</h2>
							<ul>
								<li>SIMPLE</li>
								<li>RAPIDE</li>
								<li>ABORDABLE</li>
								<li>SECURISE</li>
							</ul>
							<p>
							<br />
							N'hésitez plus, choisissez LICENCES SERVICE ! 
							</p>
						</div>
					</header>
					<div id="section">
						<div id="article">
							<br />
							<br />
							<h1> Presentation </h1>
							<p>
							<div class="presentation">
								<p>
								Septembre, l'heure de la rentrée scolaire mais aussi <strong> SPORTIVE ! </strong> 
								<br />
								Pour les clubs de tennis, c'est l'heure des inscriptions, des forums d'associations, 
								des groupes de l'école de tennis, de la préparation des équipes, de l'Assemblée Générale...
								et <strong> de la longue et fastidieuse saisie de licences. </strong>
								Autant de tâches qui occupent l'essentiel du temps de vos bénévoles ou de vos employés.
								<br />
								<br />
								Désormais, <strong>libérez-vous d'un poids</strong>, optez pour <strong>LICENCES SERVICE !</strong>
								</p>
							</div>	
						</div>
						<div id="aside">
							<div class="encart">
								<h1>A PROPOS DE JOHAN MINODIER</h1>
								<img id="johan" src="./image/johan.jpg" alt="Licences Service"  />
								<h2>(créateur de "Licences Service")</h2>
							</div>
							<div class="encart">
								<h1> Mon cursus associatif </h1>
								<p>
								<br />
								Bénévole au sein du Tennis Club de Portes-lès-Valence <em>(code club : 10260111)</em>
								depuis l'âge de seize ans, j'ai successivement, durant ces dix dernières années,
								occupé les fonctions de responsable communication,
								vice-président et président.
								</p>
							</div>
							<div class="encart">
								<h1> Mon cursus professionnel </h1>
								<p>
								<br />
								Après un DEUG de Droit mixte et une licence Professionnelle Commercialisation de Produits et Services
								sportifs, j'ai occupé un poste de secrétaire administratif au sein du Valence Tennis Epervière <em> (code club : 10260015) </em>
								durant les saisons 2011 et 2012.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>




/**********************************/
/* Elements principaux de la page */
/**********************************/
p
{
	font-size: 0.9em;
	font-family: 'trebuchet MS', sans-serif;
}
h1
{
	margin: 0px;
	padding: 0px;
}
body
{
	font-family: 'Trebuchet MS', sans-serif;
	color: black;
	background: rgba(246, 246, 246, 1);
	margin :0px
}

#bloc_page
{
	width: 1000px;
	margin: auto;
}
/**********************************/
/* Background du site */
/**********************************/

#background_navigation
{
	height: 60px;
	background: rgba(27, 30, 45, 1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0px -1px 5px black;
}

#background_header
{
	height: 425px;
	background: #eac12c; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #eac12c 0%, #ed802d 21%, #f2bd2e 51%, #e8852e 77%, #ed9017 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eac12c), color-stop(21%,#ed802d), color-stop(51%,#f2bd2e), color-stop(77%,#e8852e), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* IE10+ */
	background: linear-gradient(135deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac12c', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

/********************************/
/* Navigation */
/********************************/

nav
{
	display: inline-block;
	text-align: right;
	height: 60px;
	width: 1000px;
}

nav ul
{
	list-style-type: none;
}

nav li
{
	display: inline-block;
}

nav a
{
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
	font-size: 0.7em;
	font-family: 'Trebuchet MS', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.05em;
	padding: 0px 20px 0px 20px;
	margin: 0px;
}

nav a:hover
{
	background: rgba(0, 0, 0, 0.4);
	color: white;
	height: 60px;
	border-top: 50px solid rgba(0, 0, 0, 0);
	padding-bottom: 23px;
	border-bottom: 4px solid rgba(0, 0, 0, 0.4);
}

/********************************/
/* Header */
/********************************/

header
{
	height: 300px;
	width: 940px;
	margin: 30px;
	

	
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);

}

#logo
{
	display: inline-block;
	height: 200px;
	vertical-align: top;
	position: relative;
		top: 50px;
}

#principe
{
	display: inline-block;
	width: 400px;
	vertical-align: top;
	margin-left: 50px;
	font-family: 'trebuchet MS', sans-serif;
	font-size: 0.9em;
	position: relative;
		top: 50px;
}

header h1
{
	font-size: 1.3em;
}

header h2
{
	font-size: 1em;
	font-style: italic;
}

header ul
{
	list-style-type: none;
	font-size: 1.2em;
}


/********************************/
/* Section */
/********************************/
#section
{
	
}

#article
{
	width: 925px;
	vertical-align: top;
	margin: auto;
	font-family: 'trebuchet MS', sans-serif;
	font-size: 0.9em;
}

#article h1
{
	font-size: 1.2em;
	text-transform: uppercase;
}

.presentation
{
	display: inline-block;
	width: 885px;
	vertical-align: top;
	text-align: justify;
	margin: 10px 0px 10px 0px;
	padding: 10px;
	border-top: 1px solid rgba(200, 200, 200, 0.4);
	border-bottom: 1px solid rgba(200, 200, 200, 0.4);
	
}
.etape
{
	display: inline-block;
	vertical-align: top;
}
.etape_texte
{
	display: inline-block;
	vertical-align: top;
	max-width: 750px;
}

mark
{
	padding: 5px 10px 5px 10px;
	margin: 20px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	background: #eac12c; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #eac12c 0%, #ed802d 21%, #f2bd2e 51%, #e8852e 77%, #ed9017 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eac12c), color-stop(21%,#ed802d), color-stop(51%,#f2bd2e), color-stop(77%,#e8852e), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* IE10+ */
	background: linear-gradient(135deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac12c', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

#aside
{
	text-align: center;
	margin-top: 20px;
	min-height: 200px;
}

#aside h1
{
	font-size: 1em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px inset rgba(200, 200, 200, 0.4);
}

#aside h2
{
	margin: 0px;
	padding-top: 0px;
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	position: relative;
		left: 48px;
}

.encart
{
	display: inline-block;
	vertical-align: top;
	text-align: justify;
	width: 270px;
	min-height: 180px;
	padding: 10px;
	margin: 10px;
	border-radius: 5px;
	border: 1px solid rgba(200, 200, 200, 0.4);
	font-size: 0.9em;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 13%, #ffffff 28%, #fafafa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(13%,#f7f7f7), color-stop(28%,#ffffff), color-stop(100%,#fafafa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f7f7f7 13%,#ffffff 28%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f7f7f7 13%,#ffffff 28%,#fafafa 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f7f7f7 13%,#ffffff 28%,#fafafa 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#f7f7f7 13%,#ffffff 28%,#fafafa 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
}
.encart em
{
	font-size: 0.9em;
	color: rgb(100, 100, 100);
}
#aside ul
{
    display: inline-block;
    vertical-align: top;
    margin: 20px 0px 0px 20px;
    list-style-image: url('/Licenses_Service/css/image/puce2.png');
    padding-left: 2px;
	font-size: 0.8em;
}

#aside li
{
margin: 10px 0px 10px 0px;
}

#telechargement
{
    display: inline-block;
    vertical-align: top;
    margin: 20px 0px 0px 40px;
    list-style-image: url('/Licenses_Service/css/image/puce_pdf.png');
    padding-left: 2px;
	font-size: 0.8em;
}
#telechargement a
{
	position: relative;
		bottom: 15px;
}

#johan
{
	height: 120px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	padding: 0px;
	position: relative;
		left: 85px;
}

/********************************/
/* Footer */
/********************************/

#footer
{
	height: 50px;
	margin-top: 50px;
	background:  rgba(27, 30, 45, 1);
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0px 1px 5px black;
	text-align: center;
	color: white;
	font-size : 0.7em;
}

#footer p
{
	color: white;
	font-size : 1em;
	position: relative;
		top: 7px;
}
[/i]
Modifié par AdrienV74 (14 Jul 2013 - 12:18)
Hello,

Pas d'explication particulière, mais à tester déjà:
- Qu'est-ce que ça donne sans utiliser ton script html5.js?
- Et en le remplaçant par une version à jour du script html5shiv?

En l'occurrence, le script que tu utilises comporte des erreurs de syntaxe (single quote qui traine, retours à la ligne littéraux au milieu d'une chaine de caractères).
Alors,

+ sans le script, rien ne change
+ avec le script que tu m'as donné, le texte n'apparaît toujours pas.

Par contre quand j’enlève les 2 balises suivantes <br /> :

</header>
<div id="section">
	<div id="article">
		<br />
		<br />
		<h1> Presentation </h1>
		<p>


Le titre présentation apparaît... J'ai alors essayé d'enlever tous les sauts de ligne, mais ça n'a pas changé plus de choses. Peut-il y avoir un problème avec le CSS ?

Merci !
PROBLÈME RESOLU

Il vient effectivement de cette partie du code CSS suivant :


#background_header
{
	height: 425px;
	background: #eac12c; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #eac12c 0%, #ed802d 21%, #f2bd2e 51%, #e8852e 77%, #ed9017 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eac12c), color-stop(21%,#ed802d), color-stop(51%,#f2bd2e), color-stop(77%,#e8852e), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* IE10+ */
	background: linear-gradient(135deg, #eac12c 0%,#ed802d 21%,#f2bd2e 51%,#e8852e 77%,#ed9017 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac12c', endColorstr='#ed9017',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


D'après ce que j'ai pu interpréter, le texte devait être caché par la couleur d'un "background".

Merci !
Sujet clos
Aller à