5568 sujets

Sémantique web et HTML

[RESOLU] Marge sous le footer avec ie8

Bon voila je suis en train de réaliser un site qui fonctionne pour le moment très bien sous firefox & cie. Néanmoins sous internet explorer 8 et non sous internet 7 il y a une marge sous le footer et je ne vois pas du tout d'où ça vient.

Je vous met mon code source, le css et un screen du problème.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>Liotard.fr</title>
	<link rel="stylesheet" href="css/styles-ie8.css" type="text/css" media="screen"/>
	<!--[if lt IE 7]>
		<link rel="stylesheet" href="css/styles-ie.css" type="text/css" media="screen"/>
	<![endif]-->
	<!--[if IE 8]>
		<link rel="stylesheet" href="css/styles-ie8.css" type="text/css" media="screen"/>
	<![endif]-->
	
</head>

<body>
	<div id="container">
<!--HEADER-->
		<div id="header">
			<ul id="quickLink">
				<div class="clear"></div>
				<li><a href="#" title"lala" class="contact"><span>contact</span></a></li>
				<li><a href="#" title"lala" class="admin"><span>admin</span></a></li>
				<li><a href="#" title"lala" class="home"><span>home</span></a></li>
				<div class="clear"></div>
			</ul>
			<div id="logo">
				<h1><a href=""><span>Liotard.fr</span></a>
			</div>
			<div class="clear"></div>
		</div>
<!--FIN HEADER-->
<!--MENU-->
		<div id="menu">
			
			<div id="mainMenu">
				<div class="cadre_arrondi">
					<div class="hg"></div>
					<div class="haut"></div>
					<div class="hd"></div>
					
					<div class="gauche"></div>
					<div id="menuContent">
						<ul>
							<li class="homeMenu"><a href="#"><span>contact</span></a></li>
							<li class="aboutusMenu"><a href="#"><span>contact</span></a></li>
							<li class="productMenu"><a href="#"><span>contact</span></a></li>
							<li class="pressMenu"><a href="#"><span>contact</span></a></li>
							<li class="contactMenu"><a href="#"><span>contact</span></a></li>
						</ul>
					</div>
					<div class="droite"></div>
					
					<div class="bg"></div>
					<div class="bas"></div>
					<div class="bd"></div>
				</div>
			</div>
			
		</div>
		<div class="clear"></div>
<!--FIN MENU-->
<!--JQERY CONTENT-->
		<div id="jquery">
			
			<div id="jqueryContent">
				
				<div id="jquerySlide">
					<ul id="sliderNav">
						<li class="next"><a href="lala"><span>Previous</span></a></li>
						<li class="prev"><a href="lala"><span>Next</span></a></li>
					</ul>

					<div id="slider">
						<ul>
							<li><img src="images/slider/img_images1.png" alt=""/></li>
						</ul>
					</div>
					
				</div>
				
				<div id="jqueryPara">
					<h2>Welcome to Liotard</h2>
					<p>Lorem ipsum dolor sit amet, consecteur adipiscing elit, sed do eiusmod tempar incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aluquip ex ea commodo consequat.</p>
				</div>
			
			
			</div>
		
		</div>
<!--FIN JQUERY CONTENT-->
<!--CONTENT-->
		<div id="content">
		<div class="clear"></div>
			<div id="contenuAll">
				
				<div id="menuRight">
					<div id="contentMenuRight">
						<h2>TITRE MENU<h2>
						<p>description</p>
						
						<ul>
							<li><a href="">lorem ipsum</a></li>
							<li><a href="">lorem ipsum</a></li>
							<li><a href="">lorem ipsum</a></li>
							<li><a href="">lorem ipsum</a></li>
							<li  class="menuDer"><a href="">lorem ipsum</a></li>
						</ul>
					</div>
				</div>
				
				<div id="contenu">
					<div id="contenuTop"></div>
					<div id="article">
						<h2>150 years' worth of innovation</h2>
						
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui non pro ident, sunt in culpa qui officia deserunt mollit ani m id est laborum."officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, cons ectetur adipisicing elit, sed do eiusmod tempor ic ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla co laboris nisi ut aliquip ex ea commodo consequ at. Duis aute irure dolor in reprehenderit in volup tate velit esse cillum dolore eu fugiat nulla pariai tur. Excepteur sint occaecat cupidatat non proide nt, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipisicing e lit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
						
						<img src="images/" alt=""/>
					</div>
				</div>
			</div>
		</div>
		
<!--FIN CONTENT-->		
<!--FOOTER-->
		<div class="clear"></div>
		<div id="footer">
		
			<p class="goTop">GO TO <span>TOP</span></p>
			<p class="copyright">COPYRIGHT 2009 - LIOTARD - ALL RIGHT RESERVED</p>
			
		</div>
<!--FIN FOOTER-->
	</div>

	
	



</body>
</html>


body{
	background-color:#fff;
	padding: 0;
	margin: 0;
}

p{
	margin: : 0;
	padding: 0;
}

a{
	text-decoration:none;
	color:#ed831a;
}

a:hover{
	color:#000000;
}
	
.clear{
	clear:both;
}

/*Bloc Principaux
------------------- */

#container {
	width: 1010px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	background-image: url(../images/bg.jpg);
	background-position: top center;
	background-repeat: repeat-y;

}

#header {
	width: 1000px;
	height: 168px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/bg_header.jpg);
	background-position: left;
	background-repeat: repeat-x;
	
}

#menu {
	width: 1000px;
	height: 61px;
	margin: 0 auto;
	background-image: url(../images/bg_menu.jpg);
	background-position: left;
	background-repeat: repeat-x;
}

#jquery {
	width: 1000px;
	height: 166px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/bg_jquery.jpg);
	background-position: left;
	background-repeat: repeat-x;
}

#content {
	width: 1000px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color : #f2f2f0;
}

#footer {
	width: 940px;
	height: 27px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/bg_footer.jpg);
	background-position: left;
	background-repeat: repeat-x;
	padding-top: 15px;
	padding-left: 30px;
	padding-right: 30px;
}

/* QuickLinks(bouton haut)
-------------------------- */

#quickLink {
	width: 900px;
	margin: auto;
}

#quickLink li{
	float: right;
	display: block;
}

#quickLink li span {
	display : none;
}

#quickLink li a.home {
	width: 13px;
	height: 27px;
	background: url(../images/img_home.png) no-repeat 0 0;
	display: block;
	margin-right: 17px;
}

#quickLink li a.admin {
	width: 13px;
	height: 27px;
	background: url(../images/img_admin.png) no-repeat 0 0;
	display: block;
	margin-right: 17px;
}

#quickLink li a.contact {
	width: 13px;
	height: 27px;
	background: url(../images/img_contact.png) no-repeat 0 0;
	display: block;
}

/* Logo Liotard
--------------- */

#logo {
	float: left;
	margin: 10px 0 0 0;
	padding-left:0;
}

#logo h1 {
	padding: 0;
}

#logo h1 a {
	display: block;
	padding: 0;
	width: 1000px;
	height: 90px;
	background: url(../images/img_logo.gif) no-repeat 0 0;
}

#logo h1 a span {
	display: none;
}

/* Menu Haut
------------ */

#mainMenu {
	width: 1000px;
	height: 45px;
	margin-left: 133px !important; 
	margin-left: 15px;
	
}

#menuContent {
	margin: 0 auto;
	width: 734px;
	background: url(../images/menu/bg_menu.png) repeat-x;
}

#menuContent ul{
	margin: 0px auto;
	display: block;
	width: 644px;
	list-style-type: none;
	padding: 0 0 0 90px;
}

#menuContent ul li {
	float: left;
	margin-right: 60px;
}

#menuContent ul li a {
	display: block;
	height:35px;
	width: 10px;
}

#menuContent ul li a:hover {
	/*
	background-position:0 -45px !important;
	pour realiser le marquage
	-------------------------
	*/
}

#menuContent ul li a.isPage {
	/*
	background-position:0 -45px !important;
	pour realiser le marquage
	-------------------------
	*/
}

#menuContent ul li a span {
	display: none;
}

#menuContent ul li.homeMenu a{
	background: url(../images/menu/img_homeMenu.jpg) no-repeat;
	width: 51px;
	height: 35px;
}

#menuContent ul li.aboutusMenu a{
	background: url(../images/menu/img_aboutusMenu.jpg) no-repeat;
	width: 76px;
	height: 35px;
}

#menuContent ul li.productMenu a{
	background: url(../images/menu/img_productMenu.jpg) no-repeat;
	width: 65px;
	height: 35px;
}

#menuContent ul li.pressMenu a{
	background: url(../images/menu/img_pressMenu.jpg) no-repeat;
	width: 47px;
	height: 35px;
}

#menuContent ul li.contactMenu a{
	background: url(../images/menu/img_contactMenu.jpg) no-repeat;
	width: 65px;
	height: 35px;
}
/*Propriété coin du menu
------------------------ */
                               
.hg, .hd, .bg, .bd {
        width: 5px;
        height: 5px;
}
                
.haut, .bas {
        width: 734px;
        height: 5px;
}
                        
.gauche, .droite {
        width: 5px;
        height: 35px;
}
                        

.cadre_arrondi div { 
	float: left; 	
}

.hg, .gauche, .bg { 
	clear: left; 
} 

.hg { 
	background-image: url('../images/menu/haut_gauche.png');
}
.hd { 
	background-image: url('../images/menu/haut_droite.png'); 
}
.bg { 
	background-image: url('../images/menu/bas_gauche.png'); 
}
.bd {
 	background-image: url('../images/menu/bas_droite.png'); 
}
                        
.haut{
	background: url(../images/menu/haut.png) repeat-x 0 0;
}

 .bas{
 	background: url(../images/menu/bas.png) repeat-x 0 0;
 }

.droite{
	background: url(../images/menu/droite.png);
}

.gauche { 
	background: url(../images/menu/gauche.png); 
}

/*Jquery (Photos + Paragraphe)
----------------------------- */

#jqueryContent {
	margin: 0 auto;
	padding: 0 0 0 170px;
	height: 166px;
	width: 830px;
}

#jqueryPara {
	float: left;
	height: 130px;
	width: 262px;
}

#jqueryPara p {
	font-size: 13px;
	text-align: justify;
}

#jqueryPara h2 {
	font-size: 20px;
	color: #254180;
}

#jquerySlide{
	float: right;
	margin-right: 220px;
	width: 295px;
	height: 175px;
	clear: both;
}

#slider {
	margin-top: -14px;
}

#slider ul {

	list-style-type: none;
}

#sliderNav {
	position: absolute;
	margin: 39px 0 0 -7px;
	width: 56px;
	list-style-type: none;
	padding: 0;
	display: block;
}

#sliderNav li a {
	display: block;
	height: 45px;
	width: 56px;
}
	
#sliderNav li a span {
	display: none;
}

#sliderNav li.prev a {
	background: url(../images/slider/img_prev.png) no-repeat;
}

#sliderNav li.next a {
	background: url(../images/slider/img_next.png) no-repeat;
}

/*Content partie Article
------------------------ */

#contenuAll {
	width: 1000px;
	display: block;
	padding:0;
}

#contenu {
	float: left;
	margin-top: 30px;
	margin-left: 80px; 
	width: 530px;
	padding: 1px;
	border: 1px solid #d8d9d5;
}

#article{
	width: 498px; 
	height: 100%; 
	margin-left: auto;
	margin-right: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	padding : 15px;
}

#article h2 {
	width: 70%;
	margin: 0;
	padding: 0;
	padding-bottom: 6px;
	font-size: 20px;
	border-bottom: 1px solid #9A9B8E;
	color: #254180;
}

#article p {
	margin: 0;
	margin-top: 26px;
	padding: 0; 
	font-size: 13px;
	text-align: justify;
}

#menuRight{
	float: right;
	margin-top: 30px;
	margin-right: 80px; 
	width: 224px;
	height: 500px;
	padding: 1px;
	background-color: white;
	border: 1px solid #d8d9d5;
}

#contentMenuRight {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1px;
	margin-bottom: 1px;
	width: 192px; 
	height: 468px; 
	padding : 15px;
	background-color : #f2f2f0;
}

#contentMenuRight h2{
	margin: 0;
	padding: 0;
	font-size: 20px;
	color: #254180;
}

#contentMenuRight p{
	margin: 0;
	padding: 0;
	font-size: 10px;
	border-bottom: 1px solid #9A9B8E;
	padding-bottom: 3px;
	color: Gray;
}

#contentMenuRight ul{
	
	display: block;
	margin: 0;
	padding: 0;
	margin-top: 15px;
	margin-left: 10px;
	list-style-type: circle;
	border-top: 1px dashed #DFDFDF;
}

#contentMenuRight li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 14px;
	padding-top: 7px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #DFDFDF;
}

#contentMenuRight ul li a{

	color: Gray;
}

#contentMenuRight ul li a:hover {
	background-color: Gray;
	color: #FFF;
}

/*FOOTER (copyright + go to top)
------------------------------- */

.copyright{
	float: left;
	margin: 0;
	padding: 0;
	display: block;
	font-size: 10px;
	color: #FFF;
}

.goTop{
	float: right;
	margin: 0;
	padding: 0;
	display: block;
	font-size: 10px;
	color: #FFF;
}


et l'image : upload/21163-ie8pb.JPG
Modifié par ob1tux (30 Jul 2009 - 09:51)
Salut,
a écrit :
sous internet explorer 8 et non sous internet 7 il y a une marge sous le footer et je ne vois pas du tout d'où ça vient.
Si tu ne spécifies pas de marges pour un élément, cet élement n'a pas zéro marges, il a les marges que donnent par défaut les navigateurs à cette balise. L'espace que tu as autour de ton footer (et ailleurs) est donc dû à des marges par défaut que donnerait visiblement ie8 à certains éléments de ton code, marges qu'il te faudrait donc forcer à zéro en les spécifiant explicitement.

Des explications plus détaillées ici : http://www.css4design.com/blog/5-reset-css-a-la-loupe-pour-une-remise-a-zero-des-valeurs-par-defaut-des-navigateurs
merci, de ta réponse mais j'ai lu que ce n'était pas vraiment conseillé comme technique.. le soucis c'est que j'ai vraiment ce soucis que sur ie8 même sous ie6/7 tout passe très bien.
J'abordais la solution du reset CSS pour de futurs usages (perso, je la conseille les yeux fermés, mais bon...). Pour ce qui est de ton problème d'aujourd'hui, je t'indiquais simplement que les marges par défaut en étaient la cause. Ça devrait te permettre de trouver facilement le ou les éléments sur lesquels il te manque un margin:0
Modifié par marcv (29 Jul 2009 - 16:54)
Bon, c'est bon le soucis est résolu c'etait bien du au marge par default cela concernait mon bloc header et mon menu droit. J'ai tout repris pas à pas et c'est réglé.

merci
Sujet clos
Aller à