100% Probleem in browsers
Ik heb een klein probleempje in verband met de css van één van mijn projecten.
Aangezien ik altijd werk met google chrome werkt het wel in google chrome maar in de andere browsers zijn er enkele problemen vast te stellen.
dit is de code van mijn css die betrekking heeft op het probleem :
.box{
margin-top:75px;
height:100%;
width:100%;
position:relative;
background:#fff no-repeat 380px 180px;
-moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
}
.box h2{
color:#B3B3B3;
padding:20px 10px;
text-shadow:1px 1px 1px #ccc;
}
iframe {
margin-top: 10px;
margin-bottom: 5px;
margin-left: 30px;
border:hidden;
display:inline-block;
overflow:hidden;
height:72%;
width:100%;
overflow: -moz-scrollbars-vertical;
}
Wanneer ik dit doe in google chrome krijgt de box zoals het hoort 100% grote over het resterende geheel.
En in die box staat het iframe dat 72% van die box in beslag neemt de overige 28 gaat naar de marge en naar mijn navigatie menu.
Wanneer ik datzelfde document open in IE is er toch wat verschil. Die 100% en 72% waarover ik sprak blijken precies pixels te worden.
Hetzelfde gebeurt in firefox en Safari toont het normaal.
Kan iemand mij helpen?
Alvast bedankt!
*Op de foto's zijn gegevens weg gehaald om privacy redenen*
Gewijzigd op 07/04/2013 19:42:26 door Jos Verstraeten
Gewijzigd op 07/04/2013 19:46:44 door Joey Drieling
bedankt voor je reactie door je reactie ben ik op andere zoektermen gaan zoeken en vond ik dat je dit moet toevoegen aan je css code :
html, head, body, form {
height: 100%;
}
en nu werkt het wel helemaal goed :)