28172 sujets

CSS et mise en forme, CSS3

Problème de fusion des marges ?

Bonjour à tous,

Je viens vous demander de l'aide car j'ai un problème, je pense, de fusion des marges que je n'arrive pas à résoudre.


L'url : http://www.wptux.com sur le grand bloc "Advertise Here" (610x100 px) sous la galerie javascript.

L'affichage est ok pour ie6, ie8, FF, Opera et Safari

L'affichage est ko pour ie7. (la margin bottom de 5 px n'est pas pris en compte)

J'ai essayer de résoudre ça par un overflow:hidden; mais ça ne marche pas

voici le code


<div class="section rond">
	<div class="kd_ads">
		<div class="kd_ads_block" style="width: 620px;">
                        <a href="http://www.wptux.com/advertise" title="Advertise Here" class="kdads-empty" style="margin: 5px ! important; width: 608px; height: 98px; line-height: 800%;">
			       Advertise Here
			</a>	
					
		</div>
	</div>	
</div>


Il y a des "style" présent car je génére le code automatiquement



.section{clear:both;width:620px;margin-bottom:10px;}
.rond {-webkit-border-radius:5px;-moz-border-radius:5px;}


div.kd_ads{width:100%;}

div.kd_ads_block{
           display:block;
           overflow:hidden;
           margin:0 auto 0 auto;
}

div.kd_ads_block a.kdads-empty{
           background:#000;
           display:block;
           float:left;
           border:#111 1px solid;
           color:#333;
           font-weight:bold;
           font-size:12px;
           text-align:center;
}

div.kd_ads_block a.kdads-empty:hover{
           background:#050505;
           border:#111 1px solid;
           color:#555;
           text-decoration:none;
}



Voilà, je suis complètement perdu, donc si vous avez une idée...

Merci


edit : j'avais oublié le css de la balise "section rond"
Modifié par beal2912 (21 Jul 2009 - 14:37)
Merci, je l'ai déjà lu, et justement je ne suis pas sur que ce soit mon problème (en tout cas les corrections proposées n'ont pas l'air de fonctionner sur mon exemple)
Modifié par beal2912 (21 Jul 2009 - 14:26)
Re-bonjour,

J'ai un peu avancé et c'est vraiment bizarre :

l'affichage devient correcte lorsque j'ajoute un padding-right: 1px dans la classe .kd_ads_block et que la margin de a.kdads-empty est supérieur à (la différence de width en .kd_ads_block et a.kdads-empty / 2) + 1



J'ai vérifier la formule sur ma page de test si je passe la width à 630px dans div.kd_ads_block il faut que ma margin soit au moins égal à 11px dans a.kdads-empty pour que l'affichage soit correcte.


Voici un exemple qui marche : si vous pouvez m'aider à comprendre pourquoi ?
(j'ai ajouter dans la CSS les styles incorporés pour que ce soit plus lisible.

.section{clear:both;width:620px;margin-bottom:10px;} 
.rond {-webkit-border-radius:5px;-moz-border-radius:5px;} 
 
 
div.kd_ads{width:100%;} 
 
div.kd_ads_block{ 
           display:block; 
           overflow:hidden; 
           margin:0 auto 0 auto;

           padding-right: 1 px; // ajout

           width: 620px;
} 
 
div.kd_ads_block a.kdads-empty{ 
           background:#000; 
           display:block; 
           float:left; 
           border:#111 1px solid; 
           color:#333; 
           font-weight:bold; 
           font-size:12px; 
           text-align:center; 

           margin: 6px; // au lieu de 5px (soit (( 620 - 610 )/2) + 1 = 6)

           width: 608px; 
           height: 98px; 
           line-height: 800%;
} 
 
div.kd_ads_block a.kdads-empty:hover{ 
           background:#050505; 
           border:#111 1px solid; 
           color:#555; 
           text-decoration:none; 
} 




<div class="section rond"> 
    <div class="kd_ads"> 
        <div class="kd_ads_block"> 
                        <a href="http://www.wptux.com/advertise" title="Advertise Here" class="kdads-empty"> 
                   Advertise Here 
            </a>     
                     
        </div> 
    </div>     
</div>

Modifié par beal2912 (22 Jul 2009 - 11:36)
beal2912 a écrit :
Re-bonjour,

J'ai un peu avancé et c'est vraiment bizarre :

l'affichage devient correcte lorsque j'ajoute un padding-right: 1px dans la classe .kd_ads_block et que la margin de a.kdads-empty est supérieur à (la différence de width en .kd_ads_block et a.kdads-empty / 2) + 1



J'ai vérifier la formule sur ma page de test si je passe la width à 630px dans div.kd_ads_block il faut que ma margin soit au moins égal à 11px dans a.kdads-empty pour que l'affichage soit correcte.


Voici un exemple qui marche : si vous pouvez m'aider à comprendre pourquoi ?
(j'ai ajouter dans la CSS les styles incorporés pour que ce soit plus lisible.

.section{clear:both;width:620px;margin-bottom:10px;} 
.rond {-webkit-border-radius:5px;-moz-border-radius:5px;} 
 
 
div.kd_ads{width:100%;} 
 
div.kd_ads_block{ 
           display:block; 
           overflow:hidden; 
           margin:0 auto 0 auto;

           padding-right: 1 px; // ajout

           width: 620px;
} 
 
div.kd_ads_block a.kdads-empty{ 
           background:#000; 
           display:block; 
           float:left; 
           border:#111 1px solid; 
           color:#333; 
           font-weight:bold; 
           font-size:12px; 
           text-align:center; 

           margin: 6px; // au lieu de 5px (soit (( 620 - 610 )/2) + 1 = 6)

           width: 608px; 
           height: 98px; 
           line-height: 800%;
} 
 
div.kd_ads_block a.kdads-empty:hover{ 
           background:#050505; 
           border:#111 1px solid; 
           color:#555; 
           text-decoration:none; 
} 




<div class="section rond"> 
    <div class="kd_ads"> 
        <div class="kd_ads_block"> 
                        <a href="http://www.wptux.com/advertise" title="Advertise Here" class="kdads-empty"> 
                   Advertise Here 
            </a>     
                     
        </div> 
    </div>     
</div>

Modifié par beal2912 (22 Jul 2009 - 11:36)
Sujet clos
Aller à