28173 sujets

CSS et mise en forme, CSS3

Problème sous Firefox et Safari (résolu)

Bonjour,
Je vient de codé le design de mon nouveau site et il s'avère que j'ai un léger problème de rendu avec Firefox et Safari (sur IE7 tout va bien). L'image de fond de menu qui est en repeat:y ne s'affiche pas au dela du menu de gauche alors qu'elle devrait comme sur Internet Explorer.
http://www.futurama-france.fr/saison1.php
Ainsi dès que la page va au dela en grandeur du menu, un trou gris s'affiche sur FF et Safari.
Que faire ?
Merci d'avance Smiley smile
Modifié par ColonelCool (21 Aug 2007 - 18:57)
mmm c'est déjà ce que je fais, sa m'aide pas Smiley decu

Voila mon CSS :


body {
background-image:url(design/bg.jpg);
background-repeat:repeat-x;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
/* margin:auto;*/
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#d2d0d0;
}

#header {
width:754px;
background-image:url(design/header.jpg);
height:115px;
}

#bloc {
width:754px;
margin: 0 auto 0 auto;
}

#nav {
width:754px;
height:30px;
}

#bottom {
background-image:url(design/head_bottom.jpg);
width:754px;
height:26px;
}

#corpus {
background-image:url(design/fond.jpg);
background-repeat:repeat-y;
width:754px;
}

#left
{
width: 240px;
margin-left:12px;
display:block;
}

#content {
display:block;
float:right;
padding-top:5px;
padding-right:24px;
padding-bottom:10px;
vertical-align:top;
width:454px;
}

#content a
{
text-decoration: none;
color: black;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: black;
}

#content a:hover
{
color: #0099FF;
}

#cleardiv
{
clear: both;
height: 0em;
} 

#footer {
width:754px;
height:129px;
background-image:url(design/footer.jpg);
clear: both;
}

#menu
{
width:236px;
background-image:url(design/menu.jpg);
background-repeat:repeat-y;
}

#menu_top
{
width:236px;
background-image:url(design/menu_top.jpg);
height:6px;
}

#menu ul
{
list-style-type: none;
padding: 0px;
padding-left: 5px;
margin: 0px;
line-height:9pt;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu a
{
text-decoration: none;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}

#menu a:hover
{
color: white;
}

/*NEWS*/


.news p
       {
		text-align:justify;
		margin:0;
		padding-top:3px;
		padding-bottom:0px;
	}
	   .news img
       {
		margin-right:10px;
	}
	   .news h2 /*Titre*/
        {
            color:#268bcf;
            font-family: "trebuchet MS" ,"Comic Sans MS";
            font-size: 12pt;
			padding:0;
			margin:0;
}

.news h3 /*date*/
        {
            color:Black;
            font-family: "trebuchet MS" ,"Comic Sans MS";
            font-size: 8pt;
            padding:0;
			margin:0;
}

#add
{
width:236px;
}

.minititre {
	color: black;
	font-weight: bold;
	font-size: 12px;
}

Modifié par ColonelCool (21 Aug 2007 - 13:33)
Salut,

à partir du moment où tu mets une de tes colonnes en float, elle est retirée du flux de la page, et elle n'intervient plus dans le calcul de la hauteur de son parent.

Pour forcer le parent (#corpus, je suppose) à s'allonger jusque sous les colonnes, tu peux :

1/ Ajouter un élément sous les deux colonnes qui possède la propriété clear: both;, par exemple 
<div id="corpus">
   <div id="content">...</div>
   <div id="news">...</div>
   <hr class="spacer" />
</div>

hr.spacer {
   clear: both;
}


2/ Créer un contexte de formatage en modifiant la propriété overflow de #corpus (mettre auto ou hidden)
Administrateur
ColonelCool a écrit :
Des idées ? Smiley confus

Non mais une proposition : éditer ton code précédent en le passant en minuscule. Il fonctionnera mieux Smiley smile
Salut,

Mwoui une idée, IE6 ne sais pas donner un height: de 0em (il colle au minimum 12 ou 15px je crois)
donc essaye simplement 
#cleardiv
{
clear: both;
}


Ca devrait le faire Smiley cligne
Re,

Peut être enlever ton dernier <li></li> vide de ta liste (pour les mêmes raisons que précédemment) Smiley lol
Sujet clos
Aller à