100% Probleem in browsers
Jos Verstraeten
07/04/2013 17:17:27Beste leden,
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*
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
PHP hulp
30/01/2025 22:15:13Joey Drieling
07/04/2013 19:45:13Dit komt omdat bij IE de iframe dan 72% hoogte neemt van zijn parent .box die een hoogte heeft van 75px.
Gewijzigd op 07/04/2013 19:46:44 door Joey Drieling
Jos Verstraeten
07/04/2013 21:41:27hey Joey,
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 :)
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 :)