min-height with display: table Grrr - HTML Forums

karlos · 11-06-2009, 01:36 PM

Took me ages to discover why min-height wasn't working. It was when I had set the display: attribute to one of the following

table - table-row or table-cell

Grrr... I thought it would be a good idea to leave behind the old table layouts and move to the new css-table layouts. Last time I tried I ended-up doing floats and fixed width layouts to accommodate IE but this time I thought I'll simply do the 'new n easy' css table layout then do a seperate css sheet to cope with IE.

But this new way just doesn't seem to work... I have images effecting text in other 'cells' and now I realize the min-height doesn't work when using the above display attributes. What am I missing, why so hard? Bound to be something simply.

----------------

html doc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
<div class="height">
<div class="liner">
If the 'height' class has a display of - display: block; all is fine but id - display: table, display: table row, display: table-cell it all collapses eventhough I have set a minimum height ie... min0height: 600px;
</div>
</div>
</body>
</html>

----------------

css doc

.height {
display: table-cell;
border: 1px solid black;
}

.liner {
display: block;
min-width:400px
min-height: 400px;
}

-------------

Any advice would be appreciated.

In Christ, Karl.

Pegasus · 11-06-2009, 01:45 PM

I don't think you can use height as an id. It's also an element.

karlos · 11-06-2009, 02:06 PM

Quote:

Originally Posted by Pegasus

I don't think you can use height as an id. It's also an element.

Hi, thanks for the response.

I'm using class not id
I'm using min-height not height

There's no problem with height at all, just this min-height when using css table layouts, if I just knew what and why, what therules where then just maybe I could start using CSS layouts but as it stands I just don't know what works, why things work and others don't.

In Christ, Karl.

Pegasus · 11-06-2009, 02:10 PM

Class or id, it doesn't make any difference. You can't use it as a name. It's an element. You're confusing the browser.

karlos · 11-08-2009, 01:00 PM

Quote:

Originally Posted by Pegasus

Class or id, it doesn't make any difference. You can't use it as a name. It's an element. You're confusing the browser.

I'm missing something here, how come I can put 'height' in the css for one of the table-cells (that's fine) but not min-height or max-height?

I have no issue with height: 300px; but max/min-height: 300px; in the CSS external style sheet is a big no no.

So regardless if Height: 300px; is an element (can't understand how it is) height: works.

Please go easy when you explain this and assume I know nothing, that's for your help, I do appreciate it.

In Christ, Karl.

Excavator · 11-08-2009, 01:56 PM

Quote:

Originally Posted by Pegasus

Class or id, it doesn't make any difference. You can't use it as a name. It's an element. You're confusing the browser.

That's not true, .height is a class - height is a property.
Even if you wanted to use an element as a class name it would not confuse the browser because the . -or the # if you wanted to do the same thing with as an id- in front of it designates it a class.

Excavator · 11-08-2009, 01:59 PM

Quote:

Originally Posted by karlos

I'm missing something here, how come I can put 'height' in the css for one of the table-cells (that's fine) but not min-height or max-height?

I have no issue with height: 300px; but max/min-height: 300px; in the CSS external style sheet is a big no no.

So regardless if Height: 300px; is an element (can't understand how it is) height: works.

Please go easy when you explain this and assume I know nothing, that's for your help, I do appreciate it.

In Christ, Karl.

Have a look at what w3schools has to say about the display property -

Quote:

Note: No versions of Internet Explorer (including IE8) support the property values "inherit", "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

Excavator · 11-08-2009, 02:10 PM

Quote:

Originally Posted by karlos

I'm missing something here

Yes, a missing ; after the min-width line.

Try it like this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.height {
display: table-cell;
border: 1px solid black;
}

.liner {
display: block;
min-width:400px;
min-height: 400px;
}

</style>
</head>

<body>
<div class="height">
<div class="liner">
If the 'height' class has a display of - display: block; all is fine but id - display: table, display: table row, display: table-cell it all collapses eventhough I have set a minimum height ie... min0height: 600px;
</div>
</div>
</body>
</html>

Check out the links about validation in my sig below. The validators come in very handy for finding things just like this.