Pb affichage balises sous IE

Fermé
Fabien T - 18 sept. 2014 à 10:30
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 18 sept. 2014 à 14:11
Bonjour,

Je me permets de demander de l'aide car j'ai créé un site (www.pacassistance.info) qui rencontre un souci uniquement avec Internet Explorer (j'ai la version 9 mais c'est pareil avec les autres).

En effet, mes balises pour les titres des menus et le logo du site ne s'affichent pas sous IE. J'ai parcouru plusieurs forums mais ne trouvant pas la réponse, je suis venu solliciter vos compétences.

Voici le code html pour la partie logo :

<div class="main">
<div class="header">
<div class="header_resize">
<div class="logo">
<h1 align="center"><span class="Style2"><span class="Style3">PAC</span><span class="Style5">ASSITANCE</span><span class="Style6">83</span></span><span class="Style7"><small><span class="Style3">chauffer</span> - économiser - <span class="Style6">climatiser</span></small></span></h1>
</div>

Et le code html qui pose aussi problème pour la partie titre des menus :

<div class="sidebar">
<div class="searchform">
</div>
<div class="clr"></div>
<div class="gadget">
<h2 class="star">BIENVENUE</h2>
<div class="clr"></div>
<ul class="sb_menu">
<li><a href="index.html">Accueil</a></li>
<li><a href="clim-chauffage.html">Climatisation et Chauffage</a></li>
<li><a href="pac.html">Pompe à chaleur air/eau</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="formail1.html">Devis en ligne</a></li>
<li><a href="formail2.html">Nous contacter</a></li>
</ul>
</div>

Ensuite, voici dans les grandes lignes le code css :

@charset "utf-8";
body {
margin:0;
padding:0;
width:100%;
color:#6d6d6d;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
background:#f5f5f5 url(../images/main_bg.gif) repeat-x left top;
}
html, .main {
padding:0;
margin:0;
}
.main {
}
.clr {
clear:both;
padding:0;
margin:0;
width:100%;
font-size:0;
line-height:0;
}
h2 {
margin:8px 0;
padding:8px 0;
font-size:24px;
font-weight:normal;
color:#6e6e6e;
}
p {
margin:8px 0;
padding:0 0 8px 0;
}
a {
color:#88a9c3;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}
.logo {
padding:0;
float:none;
float:left;
width:auto;
height:133px;
}
h1 {
margin:0;
padding:32px 0 0;
font-size:36px;
font-weight:bold;
line-height:1.2em;
text-transform:none;
}
h1 a, h1 a:hover {
color:#fff;
text-decoration:none;
}
h1 span {
}
h1 small {
display:block;
font-size:13px;
line-height:1.2em;
letter-spacing:normal;
text-transform:none;
color:#fff;
}
.rss {
padding:18px 20px 0 0;
float:right;
width:auto;
}
.rss p {
margin:0;
padding:0;
float:right;
width:auto;
color:#fff;
font-size:13px;
line-height:1.5em;
font-weight:bold;
}
.rss a {
color:#fff;
text-decoration:none;
}
.rss a:hover {
text-decoration:underline;
}
.rss img {
margin:-3px 0 -3px 6px;
border:none;
}
.menu_nav {
margin:0 auto;
padding:44px 0 0;
height:33px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0;
height:33px;
float:left;
}
.menu_nav ul li {
margin:0;
padding:0 8px;
float:left;
border-right:1px solid #88a9c3;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:8px 16px;
font-size:13px;
line-height:17px;
font-weight:normal;
color:#fff;
text-decoration:none;
text-transform:none;
text-align:center;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#fff;
background:#b53333;
}
.content {
padding:0;
}
.content_resize {
margin:0 auto;
padding:24px 0 40px;
width:960px;
}
.content .mainbar {
margin:0;
padding:0;
float:right;
width:684px;
}
.content .mainbar h2 {
margin-bottom:0;
padding-bottom:8px;
font-size:26px;
line-height:1.2em;
color:#14458e;
}
.content .mainbar div.img {
padding:12px 0 0;
float:left;
width:179px;
}
.content .mainbar img {
}
.content .mainbar img.fl {
margin:0;
border:0.5px none #6d6d6d;
}
.content .mainbar .article {
margin:0 0 8px;
padding:6px 20px;
}
.content .mainbar .post_content {
float:left;
width:440px;
}
.content .mainbar .post_content strong {
color:#6d6d6d;
}
.content .sidebar {
padding:0;
float:left;
width:260px;
}
.content .sidebar .gadget {
margin:0 0 16px;
padding:12px 20px 24px;
background-color: #5389c2;
}
.content .sidebar h2 {
margin:-12px -20px 12px;
padding:12px 20px 8px;
color:#fff;
background-color: #b53333;
}
ul.sb_menu, ul.ex_menu {
margin:0;
padding:0;
list-style:none;
color:#88a9c3;
}
ul.sb_menu li, ul.ex_menu li {
margin:0;
border-bottom:1px solid #88a9c3;
}
ul.sb_menu li, ul.ex_menu li {
padding:8px 0;
width:220px;
}
ul.sb_menu li a {
color:#fff;
text-decoration:none;
margin-left:-16px;
padding:4px 8px 4px 16px;
font-weight: bold;
}
ul.ex_menu li a {
font-weight:normal;
color:#fff;
text-decoration:none;
}
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
color:#b53333;
font-weight:bold;
text-decoration:none;
}
p.spec {
padding:0 0 16px;
}
p.infopost {
margin:0 0 8px;
padding:6px 12px;
color:#fff;
background:url(../images/infopost2.gif) no-repeat left top;
}
p.infopost a {
padding:0 2px;
text-decoration:none;
font-weight:bold;
color:#fff;
}
p.infopost a:hover {
text-decoration:underline;
}
p.infopost span.date {
color:#fff;
}
.content p.pages span, .content p.pages a {
display:block;
float:left;
margin:0 4px 0 0;
padding:7px 0;
width:32px;
text-decoration:none;
text-align:center;
background:url(../images/page_p.gif) no-repeat left top;
}
.content p.pages span, .content p.pages a:hover {
color:#fff;
background:url(../images/page_a.gif) no-repeat left top;
}
.content p.pages a {
color:#6d6d6d;
border:none;
}
.content p.pages small {
font-size:12px;
float:right;
}
.content .mainbar .comment {
margin:0;
padding:16px 0 0 0;
}
.content .mainbar .comment img.userpic {
border:1px solid #dedede;
margin:10px 16px 0 0;
padding:0;
float:left;
}
.subpage .mainbar .sb_menu li a:hover {
color:#88a9c3;
text-decoration:underline;
}
.fbg {
padding:0;
background:#b53333;
}
.fbg_resize {
margin:0 auto;
width:920px;
padding:16px 20px;
color:#fff;
}
.fbg h2 {
color:#fff;
padding-bottom:24px;
font-size:24px;
}
.fbg img.gal {
margin:0 8px 8px 0;
padding:0;
border:4px solid #ece7e7;
}
.fbg .col {
margin:0;
float:left;
}
.fbg .c1 {
padding:0 16px 0 0;
width:280px;
}
.fbg .c2 {
padding:0 36px 0 16px;
width:280px;
}
.fbg .c3 {
padding:0 0 0 16px;
width:274px;
}
.fbg .fbg_ul {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li {
margin:0;
padding:0;
list-style:none;
}
.fbg .fbg_ul li a {
display:block;
margin:0;
padding:2px 0 2px 12px;
color:#666464;
text-decoration:none;
background:url(../images/li.gif) no-repeat left center;
}
.fbg .fbg_ul li a:hover {
color:#88a9c3;
text-decoration:underline;
}
.fbg p.contact_info {
line-height:1.8em;
}
.fbg p.contact_info a {
color:#fff;
text-decoration:underline;
font-weight:normal;
}
.fbg p.contact_info span {
display:block;
float:left;
width:74px;
font-weight:bold;
}
ol {
list-style:none;
}
ol li {
display:block;
clear:both;
}
ol li label {
display:block;
margin:0;
padding:16px 0 0 0;
}
ol li input.text {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:5px 2px;
height:16px;
background-color:#fff;
}
ol li textarea {
width:480px;
border:1px solid #c0c0c0;
margin:0;
padding:2px;
background-color:#fff;
}
ol li .send {
margin:16px 0 0 0;
}
.searchform {
padding:0;
float:left;
}
#formsearch {
margin:0 0 16px;
padding:24px 20px;
width:auto;
height:30px;
background:#5389c2;
}
#formsearch span {
display:block;
margin:0;
padding:0;
float:left;
background:url(../images/search_bg.gif) no-repeat left top;
}
#formsearch input.editbox_search {
margin:0;
padding:7px 10px;
float:left;
width:171px;
font-size:12px;
line-height:16px;
color:#a8acb2;
background:none;
outline:none;
border:none;
}
#formsearch input.button_search {
margin:0;
padding:0;
border:none;
float:left;
}

PAR AVANCE MERCI BEAUCOUP POUR VOTRE AIDE !

3 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
18 sept. 2014 à 11:21
Salut,

Plusieurs de tes balises html ne sont pas fermés. Utilises l'indentation pour rendre cela plus lisible.

J'ai ajouté des commentaires html derrière les fermetures de div que tu avais oublié :
<div class="main">
	<div class="header">
		<div class="header_resize">
			<div class="logo">
				<h1 align="center">
					<span class="Style2">
						<span class="Style3">PAC</span>
						<span class="Style5">ASSITANCE</span>
						<span class="Style6">83</span>
					</span>
					<span class="Style7">
						<small>
							<span class="Style3">chauffer</span> - économiser - <span class="Style6">climatiser</span>
						</small>
					</span>
				</h1>
			</div>
		</div> <!-- header_resize -->
	</div> <!-- header -->
</div> <!-- main -->
			
			
			

			
<div class="sidebar">
	<div class="searchform"></div>
	<div class="clr"></div>
	<div class="gadget">
		<h2 class="star">BIENVENUE</h2>
		<div class="clr"></div>
		<ul class="sb_menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="clim-chauffage.html">Climatisation et Chauffage</a></li>
			<li><a href="pac.html">Pompe à chaleur air/eau</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="formail1.html">Devis en ligne</a></li>
			<li><a href="formail2.html">Nous contacter</a></li>
		</ul>
	</div> 
</div> <!-- sidebar -->


Bonne journée
0
Salut et merci en tout cas pour ta réponse c'est très sympa à toi.

Ta raison pour l'indentation c'est bien plus clair quand il y a les tabulations et les retraits c'est vrai !

En revanche tu c'est quoi, dès que je ferme les div comme tu m'as dit de faire avec une indentation claire (ou pas!), ça empire l'affichage figure toi et ça décale toute la mise en page du site ... Çà avait du m'emmerder déjà c'est pour ça que j'avais du laisser comme ça !

C'est pas gagné...

PS : DÉSOLÉ A TOUS J'AI COPIER L'INTÉGRALITÉ DU CSS PAR ERREUR AU LIEU D'UNE PARTIE SEULEMENT ! :-S
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
18 sept. 2014 à 14:11
Si tu avais construit tout le style de ta page sur une structure html incorrecte, il est normal que tu es des décalages en corrigeant ton code.

N'hésite pas à vérifier régulièrement tes erreurs html en utilisant le service de validation du w3c : http://validator.w3.org/

Bonne journée
0