CSS problems.

**aog** · 06-20-2004, 07:40 AM

Hello all.
I am new here, and this is my first post

My problem is, that IE don't understand min-height:200px;
..but IE do understand height:200px; witch all the others don't understand.

As a webdesigner I realy do want my pages to work in every browser.

What should I do?

**praveen** · 06-20-2004, 08:31 AM

Welcome to WT

as a suggestion, dont mention any height, let ur content setup the content..

if u need to mention height, create a div and specify height for it and put the content inside that..
or create a table and give it the height

**aog** · 06-20-2004, 08:37 AM

Quote:

Originally Posted by praveen

if u need to mention height, create a div and specify height for it and put the content inside that..

Yes... Thats what I do. (using css style.)
Problem is:

This will work in Opera ect, but not in IE.

Code:

#Layer2 {
min-height: 408px;
background-image:  url(mid.jpg);
background-repeat: repeat-y;
z-index: 2;
}

This will work in IE, but not in Opera ect.

Code:

#Layer2 {
height: 408px;
background-image:  url(mid.jpg);
background-repeat: repeat-y;
z-index: 2;
}

What should I do so it will work in IE and Opera?

**praveen** · 06-20-2004, 08:53 AM

here it is..

this is not my own solution..

i found this for you :

Quote:

If any one has had problems using CSS min-height with IE, Netscape, Mozilla and Opera then I have just come across this 'workaround'.

In IE 'min-height' is not recognised (except in <td> ) but 'height' does the same thing (this is an IE 'bug')
In Netscape/Mozilla and Opera 'min-height' works correctly and 'height' fixes the height so that text will flow outside the boundary.

To overcome this IE has another 'bug' that can be used to specify any css that you don't want other browsers to see.
It goes something like this:

code:

<html>
<head>
<title> Min Height </title>
<style type="text/css">
#box {
text-align:center;
font-size:2em;
color:white;
background-color:black;
padding:5px;
min-height:100px;
}
* html body #box {height:100px;}
</style>
</head>
<body>
<div id="box">
This box has a minimum height of 100px
</div>
</body>
</html>

Using * html body before your css will allow IE to see it but not other browsers. So Netscape, Mozilla and Opera will just see 'min-height:100px;'
and IE will only see 'height:100px;' (ignoring the min-height value).

**aog** · 06-20-2004, 09:06 AM

Wow!

Ty.. That works perfect!