18100 sujets

Questions générales et questions de débutants

Problème d'affichage du site avec IE8

Bonjour

Depuis quelques jours je suis en panne d'idée pour resoudre un problème. J'ai codé mon site en HTML 5 et CSS3 pour le style. Il y a un problème pour afficher ma page avec IE 8. Au lieu du texte, c'est page blanche qui apparait.

Voici le code 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" type="text/css" />
		<!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script>
        <![endif] -->
		 <title>monsite</title>
    <style type="text/css" rel="stylesheet">
    
	header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { 	
    display: block;
}
     </style>
 </head>


Pouvez-vous me dire les erreurs de mon codage, s'il vous plait. Et si c'est possible de m'indiquer le bon code à mettre.

Merci d'avance
Bonjour,

Je ne sais pas si ça va t'aider à résoudre ton problème, mais :

Tu as un espace dans ta balise </script> :

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script>


Tu as un espace dans la balise de fermeture de ton commentaire conditionnel :

<![endif] -->


Le rel="stylesheet" est superflu dans ta balise <style>

<style type="text/css" rel="stylesheet">


Les balises header, footer, section, hgroup, aside, nav, article, figure sont toutes, je pense de type block, il ne me semble pas nécessaire de leur appliquer un display: block, à moins qu'elles n'aient pas de propriétés de type block dans d'anciennes versions de navigateurs, ce qui est possible.

Désolé, rien vu de plus.
Merci pour indication, maintenant le texte s'affiche avec IE 8.

Mon deuxième soucis, j'ai fait un script pour HTML et un autre pour le CSS. Seulement ils se lient pas à l'affichage.

Comment faire pour ma feuille de style soit prise en compte ?
thierry a écrit :
Les balises header, footer, section, hgroup, aside, nav, article, figure sont toutes, je pense de type block, il ne me semble pas nécessaire de leur appliquer un display: block, à moins qu'elles n'aient pas de propriétés de type block dans d'anciennes versions de navigateurs, ce qui est possible.
Il est nécessaires de préciser en CSS que tous ces éléments (la balise c'est une partie de l'élément) sont de type block pour IE8 et inférieurs. Ce code CSS devrait également se trouver dans le commentaire conditionnel.
Laurie-Anne

a écrit :
Il est nécessaires de préciser en CSS que tous ces éléments (la balise c'est une partie de l'élément) sont de type block pour IE8 et inférieurs. Ce code CSS devrait également se trouver dans le commentaire conditionnel.


Merci de la précision Smiley smile
J'ai fait les corrections proposée par Laurie-Anne. Voici ce que ça donne : 


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <style type="text/css">
    
	header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { 	
    display: block;
}
     </style>
		<![endif]-->
		 <title>monsite</title>
    
 </head>


Avec ce problème d'affichage, je me suis poser la question si mon script CSS avait pas lui aussi des erreurs.

Voici le script CSS actuel : 



/*police de fond*/
body
{
    background: url('image/fond.png');
	font-family: 'Trebuchet MS', Arial, sans serif;
	color: #181818;
}
#bloc_page
{
    width: 900px;
    margin: auto;
}
section , footer, nav a
{
    font-family: Arial; 
    font-weight: normal; 
}

/*haut de page image à déterminer*/

header
{
    background: url('image/separer.png')repart-x bottom;
}

/*bannière*/
#banniere_image
{
    margin-top: 15px; 
	height: 200px; 
	border: 5px; 
	background: url('image'.jpg) no-repeat; 
    position: relativ; 
	margin-bottom: 25px; 
}
#banniere

{
    position: absolute; 
	bottom: 0; 
	border-radius: 0px 0px 5px 5 px; 
	width: 99,5 %; 
	height: 33px; 
	padding-top: 15px; 
	padding-left: 4px; 
	background-color: rgb(24,24,24); 
	background-color: rgda(24,24,24, 0.8);
	color: white; 
	font-size: 0.8em; 
	

#titre_principal
{
    display: inline block; 
}

header h1
{
    font-family: Trebuchet MS, Arial; 
    font-size: 2.5em;
    font-weight: normal; 
}
 
header h2
{
    font-family: Trebuchet MS, Arial; 
    font-size: 1.1em; 
    margin-top: 0px; 	
    font-weight: normal: 
}

/*navigation*/

nav
{
    display: inline-block; 
	width: 740px; 
	text-align: right; 
}

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

nav li
 {
    display: inline-blcok; 
    margin-right: 15px; 
}

nav a
{
    font-size: 1.3em; 
    color: #181818; 
    padding-bottom: 3px; 
    text-decoration: none; 
}

nav a: hover
{
    color: #76001; 
    border-bottom: 3px; 
}	

/*article*/

article, aside
{
    display: inline-block; 
    text-align: justify; 
}

article
{
    width: 625px; 
	margin-right: 15px; 
}

article p
{
    font-size: 0.8em; 
}

aside
{
    position: relative; 
    width: 235px; 
    background-color: #181818; 
	border-radius: 5px; 
	padding: 10px; 
	color: white; 
	font-size: 0.9em; 
}

/*bas de page*/
footer
{	
    background: url ('image de fond.jgp') no-repeat top center; 
	padding-top: 25px; 
}

footer p 
{
    font-size: 0.8em; 
}


Dès que j'aurais pu voir le résutlat de ce script, il me sera plus facile pour modifier le choix de style.

J'aimerais avoir l'avis des spécialistes présents sur ce forum, en vous remerçiant d'avance.
J'ai profité du weekend pour faire des recherche sur mon problème de liaison entre ma page HTML et CSS. Malheureusement sans succès le résultat est toujours le même le CSS ne s'applique pas sur ma page HTML.
Sujet clos
Aller à