Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialsantos mena
868 Pointsmin-height value for the parent element doesn't work locally - height does works perfect.
Hello, I tried the min-height value for the parent element (.main-nav) but it didn't worked locally, but if I change property to "height" it does works perfect. Is it because doc is not online?
6 Answers
Damien Watson
27,419 PointsAh, your using 'display:table'. In tables, 'height' is the same as 'min-height'. 'min-height' is not really supported in tables, 'height' will scale based on content so they're essentially the same.
Lidija Novakovic
6,634 PointsHad the same problems and wondered where I did go wrong - min-height is not supported for tables and FF will not display it. http://www.w3.org/TR/CSS21/visudet.html#min-max-heights
Thumbs up
santos mena
868 PointsHello Damien, I'm using FF v. 35.0.1 running on Yosemite v. 10.10.2. By the way after your reply I checked other browsers ans Safari/Chrome don't have this issue ... Got to be something with FF I guess.
Damien Watson
27,419 PointsHey Santos, That is weird, I just updated FF to v35 and rand the little script below, it works as expected. It must be a combination of factors in your existing code. I can help if you post what you have.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#leftColumn {
width:200px;
min-height:300px;
border:1px solid green;
};
</style>
</head>
<body>
<div id="leftColumn">Left column</div>
</body>
</html>
santos mena
868 PointsYeah It is weird ... Your code works perfectly fine and mine too but if I remove the display property (table).
.main-header {
padding: 20px;
min-height:300px;
display: table; /* removing this makes it work */
width: 100%;
}
santos mena
868 PointsGreat! That's the answer that explains everything. Now is clear - thanks!
Damien Watson
27,419 PointsDamien Watson
27,419 Points'min-height' will work the same locally and 'online'. What browser and version are you using? Some older browsers don't support it.