min-height van div in IE
Hoe krijg ik een minimale hoogte van een div(in dit geval de tekstboxen) in IE? Ik heb al van alles geprobeerd met zowel de content-box als de tekst-boxen zoals height: 100% en height: auto; en een vaste hoogte wil ik eigenlijk niet vanwege de variabele inhoud.
Als ik de body een hoogte van 100% geef werkt dit wel, echter dan vult IE de ruimte tussen de tekstboxen en de footer op met de bodykleur en dat is niet mooi tov de footerkleur.....
#content{
background-color: transparent;
z-index: 1;
width: 1024px;
}
#tekst_links{
margin-top: 0px;
padding: 30px 15px 30px 20px;
float:left;
text-align:left;
background-color: transparent;
width: 475px;
min-height: 360px;
z-index: 2;
}
#tekst_rechts{
margin-top: 0px;
padding: 30px 15px 30px 20px;
float:right;
text-align:left;
background-color: transparent;
width: 475px;
min-height: 360px;
z-index: 2;
}
HTML:
<div id="content">
<div id="tekst_links">
<span class="style1">Welkom. Blablabla</span>
</div>
<div id="tekst_rechts">
<span class="style1>Nog meer blabla</span>
</div>
</div>
Edit:
Nu ik erover nadenk; waarom wil je eigenlijk min-height? Een box zal nooit korter dan zijn content worden, als je tenminste netjes met je floats omgaat.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Nou, dat zal ik uitleggen;
Je hebt mijn site ge-revieuwd, om het zo maar even te zeggen. (ehbo-stabiel.nl) en daar bleek dat ik een beetje ouderwets bezig ben met de opmaak. Dus proberen we css. Ik had iets gelezen over het zelf slicen ipv het photoshop te laten doen. Zo kwam ik op het idee om bij de content niet met een achtergrond-afbeelding te werken, maar een vlak te maken en definieren in css.
Nu past die achtergrond zich aan aan de hoogte van de tekstboxen, maar als er weinig tekst in staat, blijft er maar heel weinig van de layout over, snap je?
Vandaar de min hoogte; om bij weinig tekst toch de bedoelde layout te behouden.
Een vaste hoogte wil ik eigenlijk ook niet, omdat ik dan het voordeel van een css-opmaak kwijt ben als er eens iets meer tekst in moet.
Ik hoop dat ik het een beetje duidelijk uit heb gelegd..........
Ik ga het vanavond op mijn werk proberen. Ik ben er nl achter gekomen dat het probleem zich niet voordoet bij IE7 (deze accepteert schijnbaar wel de min-height). Op mijn werk hebben ze IE6 (of 5.5?).
Zodra ik je oplossing heb geprobeerd, laat ik hier even iets weten, oke?
Arno schreef op 04.08.2007 15:06:
@ Jan:
Nou, dat zal ik uitleggen;
Je hebt mijn site ge-revieuwd, om het zo maar even te zeggen. (ehbo-stabiel.nl) en daar bleek dat ik een beetje ouderwets bezig ben met de opmaak. Dus proberen we css. Ik had iets gelezen over het zelf slicen ipv het photoshop te laten doen. Zo kwam ik op het idee om bij de content niet met een achtergrond-afbeelding te werken, maar een vlak te maken en definieren in css.
Nu past die achtergrond zich aan aan de hoogte van de tekstboxen, maar als er weinig tekst in staat, blijft er maar heel weinig van de layout over, snap je?
Vandaar de min hoogte; om bij weinig tekst toch de bedoelde layout te behouden.
Een vaste hoogte wil ik eigenlijk ook niet, omdat ik dan het voordeel van een css-opmaak kwijt ben als er eens iets meer tekst in moet.
Ik hoop dat ik het een beetje duidelijk uit heb gelegd..........
Nou, dat zal ik uitleggen;
Je hebt mijn site ge-revieuwd, om het zo maar even te zeggen. (ehbo-stabiel.nl) en daar bleek dat ik een beetje ouderwets bezig ben met de opmaak. Dus proberen we css. Ik had iets gelezen over het zelf slicen ipv het photoshop te laten doen. Zo kwam ik op het idee om bij de content niet met een achtergrond-afbeelding te werken, maar een vlak te maken en definieren in css.
Nu past die achtergrond zich aan aan de hoogte van de tekstboxen, maar als er weinig tekst in staat, blijft er maar heel weinig van de layout over, snap je?
Vandaar de min hoogte; om bij weinig tekst toch de bedoelde layout te behouden.
Een vaste hoogte wil ik eigenlijk ook niet, omdat ik dan het voordeel van een css-opmaak kwijt ben als er eens iets meer tekst in moet.
Ik hoop dat ik het een beetje duidelijk uit heb gelegd..........
Ik snap wat je bedoelt. Hoogte in CSS is altijd lastig, maar kijk even naar de CSS van mijn eigen website: www.jankoehoorn.nl
Die doet namelijk precies wat jij beschrijft ;-)
Edit:
De magic zit hem in dit stukje:
html, body {
height:100%;
}
#container {
height:auto;
min-height:100%;
position:relative;
voice-family:inherit;
}
html > body #container {
height:auto;
}
html, body {
height:100%;
}
#container {
height:auto;
min-height:100%;
position:relative;
voice-family:inherit;
}
html > body #container {
height:auto;
}
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Ik heb geprobeert om een kleine afbeelding te posten, maar dat gaat helaas niet.
Ik heb ook geprobeert om ipv
html > body #tekst_links #tekst_rechts { height: auto;} te schrijven:
body > content #tekst_links #tekst_rechts { height: auto;}
maar niets hielp. Maak ik een foute definitie??
body {
background-color: #FF3300;
height: 100%;
width: 1024px;
margin-top: 0px;
margin: 0 auto;
}
#tekst_links{
margin-top: 0px;
padding: 30px 15px 30px 20px;
float:left;
text-align:left;
background-color: transparent;
height: auto;
min-height: 100%;
width: 475px;
z-index: 2;
}
#tekst_rechts{
margin-top: 0px;
padding: 30px 15px 30px 20px;
float:right;
text-align:left;
background-color: transparent;
height: auto;
min-height: 100%;
width: 475px;
z-index: 2;
}
misschien kun je de footer-definitie even posten?
Edit: Ik neem aan dat je de instructie in de html bedoeld? If IE.....
Gewijzigd op 01/01/1970 01:00:00 door Arno
Ik heb BTW het probleem anders opgelost;
<!--[if lt IE 7.0]>
<style>
#tekst_links {height: 300px;}
</style>
<![endif]-->
Aangezien alles onder IE7 de Height toch als min-height ziet.....
Maar in elk geval bedankt voor de moeite!
Gewijzigd op 01/01/1970 01:00:00 door Arno
Hartelijk dank.