Bonjour,
Suite à mon problème décrit ici :
http://forum.alsacreations.com/topic-4-12157-1-Bug-marges-et-float-dans-IE-ET-Firefox-pas-doublement-des-marges.html[/url]
je m'aperçois que display:inline ne fonctionne plus contre le bug de doublement des marges (ça me fout la zone)
Le code html :
Le code css correspondant :
C'est pas le top. J'ai jamais vu ça...
Merci de votre aide.
Kephren
Suite à mon problème décrit ici :
http://forum.alsacreations.com/topic-4-12157-1-Bug-marges-et-float-dans-IE-ET-Firefox-pas-doublement-des-marges.html[/url]
je m'aperçois que display:inline ne fonctionne plus contre le bug de doublement des marges (ça me fout la zone)
Le code html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITRE</title>
<link href="/common/css/styles.css" rel="stylesheet" type="text/css" />
<link href="/common/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/common/css/texte.css" rel="stylesheet" type="text/css" />
<script src="/common/js/utile.js" language="javascript" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="conteneur">
<div id="header">
<p><a href="#">Accueil</a> | <a href="/plansite.asp">Plan du site</a> | <a href="/contact/default.asp">Contact</a></p>
</div>
<ul id="nav">
<li>Element de nav</li>
<li>Element de nav</li>
<li>Element de nav</li>
<li>Element de nav</li>
</ul>
<div id="content_home">
<div id="colleft"><a href="/documents/pdf/catalogue.pdf"><img src="/images/common/colleft/download_catalogue.jpg" alt="Téléchargez notre catalogue produits" /></a><div id="newsletter"><img src="/images/common/titres/newsletter.gif" alt="Newsletter" class="titre" /><form name="newsletter" class="alignvert"><input type="text" value="" size="20" name="newsletter" /><a href="#" onClick="document.forms.newsletter.submit()"><img src="/images/common/envoyer.gif" alt="Envoyer" style="margin:0 0 0 5px;" /></a><ul class="form">
<li><input name="accept" type="checkbox" value="ok" checked style="background:none; margin:0;" /></li>
<li class="texte">Je souhaite recevoir la lettre d’infos par mail</li>
</ul><div class="clear"></div>
</form></div><div id="adresse">
<h3>Titre</h3>
<p>Texte</p>
</div></div>
<div id="contenu_home">
<div id="actus">
<img src="/images/common/titres/actualites.gif" alt="Actualités" style="margin:20px 0 0 -15px;" />
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
<img src="/images/common/titres/exemples_appli.gif" alt="Actualités" style="margin:15px 0 0 -15px;" />
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus.</p>
</div>
</div>
<div id="colright">
<div id="zoom_produit">
<img src="/images/home/rideau.jpg" alt="Rideau" />
<img src="/images/common/titres/rideau3515.gif" alt="Rideau d'air 3515" style="margin:25px 0 0 23px;" />
<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus.</p>
</div>
<div id="nosproduits">
<img src="/images/common/colright/top_nosproduits.gif" alt="" />
<img src="/images/common/titres/nosproduits.gif" alt="Nos produits" class="titre" />
<p>Accédez rapidement à l’ensemble de notre gamme par le menu ci dessous</p>
<form>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Le code css correspondant :
/********************************/
/* HTML */
/********************************/
body { background:#fff; margin:0; padding:0; width:100%; height:100%; font:10px Verdana, Arial, Helvetica, sans-serif; color:#007bc9; }
html { width:100%; height:100%; }
a { text-decoration:underline; color:#007bc9; }
a:hover { text-decoration:none; }
img { border:none; }
h1 { /* titres 14px */ font-size:14px; font-weight:bold; }
h2 { /* titres 12px */ font-size:12px; font-weight:bold; }
h3 { /* titres 10px */ font-size:10px; font-weight:bold; }
h4 {}
h5 { font-size:9px; font-weight:normal; }
h6 {}
select, input, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#016093; background:#e0f4fc; }
/********************************/
/* STRUCTURE */
/********************************/
#conteneur { width:766px; margin-left:auto; margin-right:auto; }
#header { width:766px; height:131px; background:url(/images/common/top/header.jpg) 0 0 no-repeat; position:relative; }
#header p { position:absolute; right:20px; top:20px; margin:0; }
#header p a { color:#000; text-decoration:none; }
#header p a:hover { text-decoration:underline; }
#colleft {
float:left;
background:url(/images/common/bd_colleft.gif) 0 0 repeat-y;
margin:0;
padding:0 0 0 9px;
width:249px;
display:inline;
}
#newsletter { background:url(/images/common/colleft/fd_newsletter.gif) 0 0 repeat-y; }
#newsletter img.titre { padding:13px 0 0 8px; display:block; }
#newsletter form { margin:0; padding:7px 0 5px 8px; }
#newsletter input { margin:0; padding:0; }
#newsletter form p { margin:0; padding:0; }
#adresse { background:url(/images/common/colleft/fd_adresse.gif) 0 0 repeat-y; color:#fff; }
#adresse h3 { margin:0; margin:15px 5px 0 16px; }
#adresse p { margin:0; margin:0 5px 10px 16px; }
#contenu {}
#footer { clear:both; background:url(/images/common/footer/fd_footer.gif) 0 0 no-repeat; height:27px; }
/********************************/
/* HOME */
/********************************/
#content_home { background:url(/images/common/bordures.gif) 0 0 repeat-y; }
#contenu_home { float:left; width:252px; background:#ebeef0 url(/images/common/fd_contenu_home.gif) 0 0 repeat-x; }
#actus { padding:0 15px; }
#colright {
float:left;
background:url(/images/common/bd_colright.gif) right 0 repeat-y;
padding:0 4px 0 0;
width:255px;
voice-family: "\"}\""; /* Box model hack */
voice-family:inherit;
width:251px;
}
#zoom_produit { background:url(/images/common/colright/fd_zoom_produit.gif) 0 0 repeat-y; }
#zoom_produit p { margin:5px 5px 0 23px; padding:0 0 10px 0; }
#nosproduits { text-align:center; }
#nosproduits img.titre { margin:10px 0 0 0; display:inline; /* IE double margin bug */}
#nosproduits p { color:#fff; margin-left:20px; margin-right:20px; display:inline; /* IE double margin bug */ }
/********************************/
/* SPECIFIC */
/********************************/
div.separation { height:10px; width:100%; margin:0; padding:0; }
div.clear { clear:both; }
ul.form { /* pour le bloc newsletter */ list-style:none; margin:0; padding:5px 0; }
ul.form li { float:left; margin:0; padding:0; }
ul.form li.texte { margin:0 0 0 5px; line-height:14px; color:#fff; font-weight:bold; width:170px; }
form.alignvert input { vertical-align:middle; }
form.alignvert img { vertical-align:middle; }
C'est pas le top. J'ai jamais vu ça...
Merci de votre aide.
Kephren
