He estado construyendo un sitio web y principalmente probándolo en Chrome. Recientemente me di cuenta de que algunos de los CSS no se aplican en Firefox.CSS Trabajando en Chrome pero no en Firefox (altura del div)
supongo que es probable que: main {min-height}
Este jFiddle reproduce este error, en el que el div principal no tiene la altura que se supone que. http://jsfiddle.net/msW9m/
HTML:
<div id='main'></div>
<div id="container"></div>
<div id='footer'>
<div id='footerRelative'>Development by <a href='mailto:'>John Doe</a></div>
</div>
CSS:
#main {
min-height: 80%;
height: auto;
border: 1px solid #bbbbbb;
margin: 3% 5% 1%;
padding: 10px 10px;
}
#footer {
position: absolute;
left: 50%;
}
#footerRelative {
position: relative;
left: -50%;
font-size: 80%;
}
/*Probably Irrelevant*/
#container {
margin: 0 auto;
margin-top: -300px;
margin-left: -261px;
position: absolute;
top: 50%;
left: 50%;
width: 523px;
height: 600px;
background-image: url('../images/doctorSymbol.jpg');
background-repeat:no-repeat;
background-position:center;
opacity: 0.125;
overflow: hidden;
z-index: -1;
}
Sin embargo, en Chrome todo funciona perfectamente y el div principal tiene un min-altura de 80%. Me preguntaba si hay una solución a esto o si estoy haciendo algo mal.
Gracias.
tu violín se ve igual en FF y Chrome ... – Jason