5568 sujets

Sémantique web et HTML

[Résolu] HTML5 -> IE9,WEBKIT,MOZ : ok / IE7-IE8 : bug

Bonjour,

Je suis en présence d'un bug vraiment embêtant, sur ie7 et 8, le positionnement de mes blocs se fait très mal !

j'ai par ailleurs bien pensé à mettre le code js : html5 pour la création des balises sous ie.

http://adrien.louf.free.fr/experimental/bgshadow/

Voici les codes !

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>This is the Powerfull CSS Skeleton Title</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta name="viewport" content="width=device-width, maximum-scale=1" />
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body id="body" name="body">
	<div id="go-top"><a href="#body">Top</a></div>
	<div id="top-logo">
	<h1>This is a Powerfull CSS Skeleton</h1>
	</div>
	<header>
		<nav class="left">
			<a href="#1">Accueil</a>
			<a href="#2">Portfolio</a>
			<a href="#3">Contact</a>
		</nav>
		<nav class="right">
			<a class="facebookbt" href="#3">Facebook</a>
			<a class="twitterbt" href="#3">Twitter</a>
			<a class="rssbt lastnavtopbt" href="#3">RSS</a>
		</nav>
		<div class="clear"></div>
	</header>
	<section id="content">
		<section class="article-container right">
			<article>
			<div class="article-toolbar">Hello</div>
			<h2>Precious Love</h2>
			<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>
			</article>
			<article>
			<div class="article-toolbar">Hello</div>
			<h2>Another Solution</h2>
			<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>
			</article>
			<article>
			<div class="article-toolbar">Hello</div>
			<h2>One More Time</h2>
			<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>
<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>

<p>.lorem ipsum.</p>
			</article>
		</section>
		<section class="column left">
			<section class="widget">
				<h3>Le mieux est l'ennemie du bien</h3>
				.lorem ipsum.
			</section>
			<section class="widget">
				<h3>Rien ne sert de courir, il faut partir à point.</h3>
				.lorem ipsum.
			</section>
		</section>
	</section>
	<div class="clear"></div>
	<footer>
		<div class="copyright">Adrien Louf - JunkStyle 2011</div>
	</footer>
	</body>
</html>



@-webkit-keyframes whiteShadowBounce {
	from{
		text-shadow:0 0 5px #000;
		color:#333;
	}
	to{
		text-shadow:0 0 5px #fff;
		color:#fff;
	}
}
@-moz-keyframes whiteShadowBounce {
	from{
		text-shadow:0 0 5px #000;
		color:#333;
	}
	to{
		text-shadow:0 0 5px #fff;
		color:#fff;
	}
}
html{
width:100%;
}
body,h1,h2,h3,h4,h5,h6,div,tr,td,th,section{
margin:0;
padding:0;
}
.clear{clear:both;}

*::-moz-selection{
background:#FFF;
color:#000;
}
*::selection{
background:#FFF;
color:#000;
}

body{
font:12px/16px "Trebuchet MS",Verdana,Arial,sans-serif;
background:#222;
padding:10px;
width:900px;
margin:0 auto;
}
#top-logo{
height:70px;
}
#top-logo h1{
text-shadow:0 0 5px #fff;
color:#fff;
-webkit-animation-name: whiteShadowBounce;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: all;
-moz-animation-name: whiteShadowBounce;
-moz-animation-duration:5s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: all;
font-size:3em;
line-height:60px;
}
header{
margin:0 0 10px 0;
filter:progig:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
background:rgba(0,0,0,0.2);
padding:3px 10px;
border-radius:4px;
box-shadow:inset 0 0 7px #000;
}
#go-top{
position:fixed;
bottom:10px;
right:10px;
}
#go-top:active{
position:fixed;
bottom:10px;
right:8px;
}
#go-top a{
display:block;
background:#444;
color:#fff;
padding:5px;
font-weight:bold;
font-size:1.4em;
border-radius:40px;
box-shadow: 3px -1px 0px #333;
text-decoration:none;
}
#go-top a:active{
box-shadow: 1px -1px 0px #333;
}
header nav a{
letter-spacing:1px;
font-size:1.2em;
display:block;
text-decoration:none;
padding:10px 7px;
color:#eee;
border:1px solid #22429A;
background:#2B64E6;
border-radius:5px;
box-shadow: 3px -1px 0px #22429A;
float:left;
margin:4px 8px 4px 0;
font-family:Impact;
}
header nav a:active{
color:#fff;
text-shadow:0 0 5px #fff;
background:#3367F7;
margin:3px 8px 4px 3px;
box-shadow:0 0 5px #3367F7;
}
header nav a:active + a{
margin:4px 8px 4px -3px;
}
.lastnavtopbt:active{
margin:3px 5px 4px 3px;
}
.rssbt{
background:#FF8C00;
border-color:#9E4F00;
box-shadow: 3px -1px 0px #9E4F00;
}
.rssbt:active{
background:#ECA428;
box-shadow:0 0 5px #ECA428;
}
.twitterbt{
background:#58C5F5;
border-color:#51B6E5;
box-shadow: 3px -1px 0px #51B6E5;
}
.twitterbt:active{
background:#58C5F5;
box-shadow:0 0 5px #58C5F5;
}
.facebookbt{
background:#546DA4;
border-color:#385190;
box-shadow: 3px -1px 0px #385190;
}
.facebookbt:active{
background:#546DA4;
box-shadow:0 0 5px #546DA4;
}
.article-container article{
filter:progig:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
background:rgba(0,0,0,0.2);
padding:10px;
border-radius:4px;
color:#eee;
box-shadow:inset 0 0 7px #000;
width:600px;
text-align:justify;
margin:0 0 10px 0;
text-shadow:0 0 4px #000;
position:relative;
overflow:hidden;
}
.left{float:left;}
.right{float:right;}
.article-container h1{
font-size:1.5em;
}
.column{
width:270px;
}
.widget{
filter:progig:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
background:rgba(0,0,0,0.2);
margin:0 0 10px 0;
padding:10px;
border-radius:4px;
color:#eee;
box-shadow:inset 0 0 7px #000;
text-shadow:0 0 4px #000;
font-size:0.9em;}
.widget h3{
font-size:1.2em;
margin:3px 0 6px 0;
}
.article-container article h2{
font-size:2em;
margin:3px 0 6px 0;
}
.article-toolbar{
background:#222;
padding:3px;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
transition:0.5s all;
color:#fff;
position:absolute;
right:10px;
top:-20px;
}
.article-container article:hover .article-toolbar{
margin:6px 0 0 0;
top:0;
}
.widget h3:first-letter,.article-container article h2:first-letter{
font-style:italic;
font-size:1.4em;
letter-spacing:1px;
}
footer{
filter:progig:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
background:rgba(0,0,0,0.2);
padding:10px;
border-radius:4px;
color:#eee;
box-shadow:inset 0 0 7px #000;
height:100px;
position:relative;
}
.copyright{
font-family:Zapfino;
position:absolute;
bottom:10px;
right:15px;
}


En vous remerciant !

Adrien.
Modifié par adrienl (21 Aug 2011 - 18:16)
C'est normal, en plus du script qui active les éléments html5 dans IE8 et prédécesseurs, il faut indiquer dans la css comment ils doivent s'afficher par défaut, par exemple avec ceci dans les premières lignes de ton fichier css :

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
time, mark {display:inline;}

Modifié par Patidou (21 Aug 2011 - 16:11)
Sujet clos
Aller à