Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Min-Height still not supported in IE7? 3

Status
Not open for further replies.
1DMF

1DMF

Programmer
Jan 18, 2005
8,795
GB
I've been reading this thread I can't beleive IE still doesn't support min-height.

anyway I was wondering, before I apply some code, would the following work.
Code: 
.myclass {

height:200px;
min-height:200px;

}

so IE sees the first declaration and so do all other browsers but then the min-height overides the height setting for all other browsers?

I really don't want to adopt a secondary external CSS file, i'd rather edit my current CSS in a couple of years when IE8 comes out and that's even if it will support min-height then!

thanks 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
That will fix the height in FF to 200px. It won't change (*I think*)

Try
Code: 
.myclass {
 min-height:200px;
 _height:200px;
}

Unfortunatlely this won't validate, and I don't know how IE7 will treat the underscore hack.
Basically, IE6 will read the value of the line with the underscore where as 'proper' browsers will skip it.

Why don't you test it?

<honk>*:[COLOR=red]O[/color])</honk>
[url=http://www.designease.co.uk]Designease Ltd. - polyprop folders, ring binders and creative presentation ideas[/url]
[url=http://www.earl-thompson.co.uk]Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire[/url]
 
Upvote 0 Downvote
i have been and wasn't sure of the results, i've opted for a fixed height with overflow-y:scroll; and x hidden.

thanks for the info though :)

don't supose you have any goood links to a nice table design, I want to list my top 40 charts (which is tabular data :p ) and need ideas on colours design, to make it pleasing to the eye

thanks, 1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
thanks

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
IE6 and below containers always stretch height to accomodate what's inside. IE7 stopped doing this and behaves correctly like firefox. You can do the following it to work in IE6, IE7, and FF:
Code: 
.myclass {
   min-height:200px;
}

* html .myclass {
   height:200px;
}

The 2nd style will apply to versions of IE6 and below, and the first style will apply to everything else (since IE6 and below don't understand min-height) Setting the height to 200px specifically for IE6 and below means that it will stay at least 200px and stretch if needs be.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
kaht, min-height doesnt work in IE7 , i had min-height 300px; the content was only 1 line so the box was only @ 15px in EI7 yet it was 300px; in FF.


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
kaht, min-height doesnt work in IE7
Click to expand...

It most certainly does.


This does not work in IE7:
Code: 
<style type="text/css">

div {
   min-height:200px;
   width:200px;
   border:1px solid black;
}

</style>

<div>
test test test test test test test test test test test test test test test test test test test test test test test test
</div>

But this does
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

div {
   min-height:200px;
   width:200px;
   border:1px solid black;
}

</style>
</head>
<body>
<div>
test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</body>
</html>

You are using a valid doctype, right? Copy and paste to see for yourself.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
yes I am, the cheek of it ;-)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Did you copy/paste my 2nd example into a new html file? You'll see that min-height works for IE7.

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
so why is it not working for my page, it 100% validates with w3c ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Give us the link, show us the whole code, put the doctype all in one line. Hard to say, IE is reluctant to stay in standards mode and quick to return to quirks.
 
Upvote 0 Downvote
don't think so , the page isn't finished it's a WIP....

as I said i've gone for the fixed height and overflow-y:scroll; , all I need to do now is make the table listing pretty!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I thought you were past that whole table-layout thing [smile]


I just copied and pasted your page to my desktop, made the following changes and it worked fine:
Code: 
.top40_table {
    padding-top:2px;
    padding-bottom:2px;
/*    overflow-y: scroll;
    overflow-x: auto;
    height:280px; */
    min-height:280px;
    word-wrap: break-word;
    background-color:#E9E9D1;
}

What are you expecting min-height to do? Min-height says that if there's not enough content to stretch the container, the container will stretch itself to the specified dimensions. The example you gave a link for had enough content in the table such that it went beyond the specified 280px - in that case the min-height was meaningless. In the copy I put on my desktop I took out enough rows of the table such that it did not expand down the full 280px. The line for the bottom of the container was still 280px down from the top - just like it should be.

Were you expecting different behavior?

Here's a screenshot from IE7, I circled the bottom of the container in red - it's right where it's supposed to be:
ie7screen.jpg


-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
yes, I'll amend and you will see.

As for the table thing, I know, but the missus bought me a nice new template to upgrade my website with and when we downloaded it, well it was the biggest piece of **** I've seen.

Not to mention it was a table layout, I've butchered it the best I can for the moment to enable me to get this re-design moving, I will re-visit and see if I can table-less the design later on.

well except for the tables of course ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
I already see, I posted a screenshot for proof right above, AND I posted a code example. I don't know what else to do to show you that IE7 supports min-height.....

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
i know , i know, I don't know what I was doing, but I wasn't getting the result i was expecting and min-height didn't work, well all I can do is apologise, the article I read didn't help, as it says min-height don't work in IE7 as well.

But look at the time I posted, I'd been working all day, then went home and started on my hobby site, it was approaching midnight, I was tired and the bottle of wine was empty.

Well that's my excuse and i'm sticking to it ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
well at least I ended up with a nice looking table at the end of all this, so thanks Vragabond , much appreciated.
[cheers]

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
781
spamjim
spamjim
usarmycwo
  • Locked
  • Question
Any FrontPage users still around? 1
Replies
4
Views
836
feherke
feherke
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
727
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top