Min-height laten werken voor IE6
Als het soms niet anders kan.
Soms moet je een minimum hoogte hebben voor een (block)element, daarvoor dient min-height, en werkt in alle browsers. Ahja, behalve in Internet Explorer 6, daarom ook deze tutorial. Internet Explorer 6 leest de bepaling min-height wel, maar verandert het naar height.
Er bestaat echter een valide CSS manier (voor w3c) om Internet Explorer 6 toch de eigenschap min-height te laten toepassen. Dus geen onvalide toestanden die je zouden dwingen om conditional comments te gebruiken.
HTML
<div class="test">...</div>
CSS
.test {
min-height:300px;
height:auto !important; /* voor moderne Browser */
height:300px; /*voor IE6 */
}
Dus vanaf nu kan je zorgeloos min-height gebruiken voor je toekomstige projecten.
Update:In de comments schijnt er nog enige ongeloof te zijn, daarom heb ik deze pagina ge-upload welke bewijst dat het perfect gaat met Internet Explorer 6
Gelezen: 4924 | W3C, Microsoft, CSS, Tips, Tutorials
Op Saturday 22 November 2008
Een oude truc die inderdaad goed werkt. Desondanks ben ik toch wel een voorstander van conditional statements, omdat je op die manier wel netjes al je css voor IE6 in een apart bestand hebt.
Op Sunday 23 November 2008
Zou kunnen, maar hiermee heb je wel een probleem als de inhoud groter is dan je min-height. Daarom vind ik het fijner om het zo te doen:
xHTML:
[div class="test"][div class="minheight"][/div]
[p]Content[/p]
[/div]
CSS:
.test {
min-height: 300px;
}
.minheight {width: 1px;
height: 300px; // je min-height
float: right;
}
Dit is natuurlijk wel slordig in andere browsers, maarja…
Op Sunday 23 November 2008
Zou kunnen, maar hiermee heb je wel een probleem als de inhoud groter is dan je min-height.
Dat is toch juist de bedoeling van min-height, dit is de minimum hoogte, vanaf dan moet het mee gaan als er meer inhoud is als de min-height die bepaald is. vergis u hierin niet met max-height, daar zou je troubles kunnen verwachten.
Op Sunday 23 November 2008
@Mark: Krijg je dan niet dat het gedeelte inhoud onder de 300px wegvalt in IE6?
Op Monday 24 November 2008
@Jonathan: check bovenaan de update op dit artikel!
Op Tuesday 25 November 2008
@Mark: Oops, je hebt helemaal gelijk, het werkt wel
Op Friday 05 December 2008
“Dus geen onvalide toestanden die je zouden dwingen om conditional comments te gebruiken.”
Conditional comments hebben niets te maken met “onvalide toestanden”. Het is een manier die mijns inziens absoluut aan te raden is, omdat je op die manier je CSS schoon houdt en slechts 1 specifieke browser extra belast en niet alle andere browsers.
Het wordt zelfs door Microsoft zelf geadviseerd:
Zie: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
“Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.”