URL de fond CSS ne fonctionne pas dans Firefox, mais fonctionne dans IE?

Question

J'ai un fond d'ombre pour ma mise en page de site montrant bien dans IE, mais Firefox affiche seulement l'ombre (une image) si j'utilise "height: 100px;", ou si je tape réellement du texte. m en utilisant l'ombre img avec un div pour la mise en page. Comment puis-je faire ce travail dans Firefox?

css:

.bg_shadow { 
    margin-left:auto; 
    margin-right:auto; 
    background:url("../images/bg_shadow.gif") repeat-y scroll left top transparent; 
    width:1024px; 
    height:100%; 
} 
body { 
    margin:0; 
    padding:0; 
    border:0;   /* This removes the border around the viewport in old versions of IE */ 
    width:100%; 
    background:#fff; 
    min-width:600px;  /* Minimum width of layout - remove line if not required */ 
        /* The min-width property does not work in old versions of Internet Explorer */ 
    font-size:90%; 
    text-align:center; /*used in centering the liquid layout in the browser window */ 
    /*background:#CCCCCC;*/ /*page background color */ 
} 
#wrapper { 
    margin:0 auto; 
    width:1000px; /* you can use px, em or % */ 
    text-align:left; 
} 
a { 
    color:#01128E; 
} 
a.link:hover { 
    color:#FFFFFF; 
    background-color:#01128E; 
    text-decoration:none; 
} 
h1, h2, h3 { 
    margin:.8em 0 .2em 0; 
    padding:0; 
} 
p { 
    margin:.4em 0 .8em 0; 
    padding:0; 
    line-height:1.35em; 
} 
img.padme { 
    margin:10px 25px; 
} 
#ads img { 
    display:block; 
    padding-top:10px; 
} 

/* Header styles */ 
#header { 
    clear:both; 
    float:left; 
    width:100%; 
    position:relative; 
} 
#header { 
    border-bottom:1px solid #000; 
} 
#header p, 
#header h1, 
#header h2 { 
    padding:.4em 15px 0 15px; 
    margin:0; 
} 
#header p.login{ 
    position:absolute; 
    top:0; 
    right:0; 
    text-align:right; 
    margin:0; 
    padding-top:10px; 
} 

/* 'widths' sub menu */ 
#horizontal_border { 
    clear:both; 
    background:#eee; 
    border-top:4px solid #01128E; 
    margin:0; 
    padding:0px 15px !important; 
    text-align:right; 
} 
/* column container */ 
.colmask { 
    position:relative; /* This fixes the IE7 overflow hidden bug */ 
    clear:both; 
    float:left; 
    width:100%;   /* width of whole page */ 
    overflow:hidden;  /* This chops off any overhanging divs */ 
} 
/* common column settings */ 
.colright, 
.colmid, 
.colleft { 
    float:left; 
    width:100%; 
    position:relative; 
} 

.col1, 
.col2, 
.col3 { 
    float:left; 
    position:relative; 
    padding:0 0 1em 0; 
    overflow:hidden; 
} 

/* 2 Column (right menu) settings */ 
.rightmenu .colleft { 
    right:25%;   /* right column width */ 
    background:#FAFAFA;  /* left column background colour */ 
} 
.rightmenu .col1 { 
    width:71%;   /* left column content width (left column width minus left and right padding) */ 
    left:27%;   /* (right column width) plus (left column left padding) */ 
} 
.rightmenu .col2 { 
    width:21%;   /* right column content width (right column width minus left and right padding) */ 
    left:31%;   /* (right column width) plus (left column left and right padding) plus (right column left padding) */ 
} 
/* Footer styles */ 
#footer { 
    clear:both; 
    float:left; 
    width:100%; 
    border-top:1px solid #000; 
} 
#footer p { 
    padding:10px; 
    margin:0; 
} 
.slogan{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:1em; 
    color:#999999; 
    position:relative; 
    top:-20px; 
    left:30px; 
} 

.header_gradient{ 
    background:url("../images/header_gradient.gif") repeat-x scroll left top transparent; 
} 

.background_color{ 
    background-color:#EEEEEE; 
} 
#nav_div{ 
    width:100%; 
    height:35px; 
    background:url("../images/spacer.gif") repeat left top; 
    } 

html:

<div class="bg_shadow"> 
    <div id="wrapper"> 
     <p>Main Content</p> 
    </div> 
</div> 

Answer 1

Essayez d'utiliser min-height: 100px; dans votre CSS ou l'ajout &nsbp; à votre élément vide dans votre code HTML.

Answer 2

bien, eu de la chance .... mettre en "débordement: caché" dans la classe bg_shadow et l'ombre a montré exactement comment je le voulais. Je ne sais pas pourquoi, mais cela a fonctionné.

merci pour vos réponses.

Answer 3

height:100%; 

100% de quoi? Si vous ne spécifiez pas de hauteur sur le parent <body>, le 100% n'a aucun sens.

Le navigateur ne peut pas connaître la hauteur du corps car elle dépend de la hauteur de l'élément enfant ... qui est une hauteur que vous essayez de spécifier en pourcentage par rapport à la hauteur du corps. CSS casse cette dépendance circulaire par saying que les hauteurs de pourcentage sont ignorées et auto est utilisé à la place si le bloc conteneur n'a pas une hauteur spécifiée. Si cela fonctionne pour vous dans IE, vous êtes probablement dans Quirks Mode. Cela fonctionne car en mode Quirks, l'élément <body> est (incorrectement) utilisé pour représenter la fenêtre, et a donc une hauteur spécifiée inhérente, quelle que soit la taille de la fenêtre. Mais vous ne voulez pas être en mode Quirks, c'est plein de bugs incroyablement sucky. Utilisez un mode standard DOCTYPE et IE se comporteront plus comme les autres navigateurs.

Ensuite, utilisez .bg_shadow { min-height: 100px; } ou quelle que soit la hauteur minimale est d'afficher l'ombre si vous n'avez vraiment aucun contenu statique à l'intérieur. Pour IE6, vous pouvez ajouter une règle comme * html .bg_shadow { height: 100px; } pour contourner le manque de support pour min-height sans casser les autres navigateurs qui prendraient littéralement height: 100px;.