increasing height

[csckid]

<div id="container" style="background-color:#CCC; height:10px">
<div id="middle" >
              hello
		<div id="middleleft">
            
                               egg
                                <br><br><br><br><br>
		</div>
                       bye          
</div>

</div>

 

The above code works different in internet explorer and mozilla.

 

if I remove this "height:10px" both explorer outputs the same result.

What I wanted is, output should be similar to internet explorer; but I need to specify minimum height of the div "#container".

 

how do I achieve this?

 

Thanks

 

 

[webmaster1]

What version of IE are you referring to?

 

Use this for setting the minimum height: http://www.w3schools.com/CSS/pr_dim_min-height.asp

 

 

[csckid]

it doesn't work in IE. My IE version is 6

[webmaster1]

I see what you mean. I've tested this and it the CSS renders the same in Chrome, FF and IE6:

 

<div id="container" style="background-color:#CCC; min-height:10px;">
<div id="middle" >
              hello
		<div id="middleleft">
            
                               egg
                                <br><br><br><br><br>
		</div>

                       bye          
</div>

 

Notice that all I done was specified an minimum height. Once the content of your div goes beyond 10px the grey background will automatically 'stretch'. If anything IE6 was behaving problematically rather than any other browser type. Nine times out of ten it'll be IE6.

 

[webmaster1]

If you can't get min-height to work on an older IE version then hacks exists:

 

http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/

http://www.dustindiaz.com/min-height-fast-hack/

http://snipplr.com/view/62/minheight-for-ie-and-all-other-browsers/

[webmaster1]

This except should solve your issue:

 

* html

 

Internet Explorer 6 only will parse a CSS rule that starts with * html. This doesn’t really make any sense and so other browsers ignore the rule, so this can be used to serve specific CSS to Internet Explorer 6 only. Internet Explorer correctly interprets this and so also ignore the CSS. As a simple example, IE6 treats the property height as if it were min-height, so we might do:

 

.box { min-height: 50px; }
* html .box { height: 50px; }

 

All modern browsers will interpret the first rule, and give the box a minimum height of 50 pixels. IE6 will then also parse the second rule which will overwrite the first and so it will give the box a height (which it treats like min-height) of 50 pixels.

 

Hacks or filters do have a bit of a bad press these days, mainly because with modern browsers you really shouldn’t need to use them. However I think this is a legitimate way to target IE6 especially if you only have a few things to fix. I would suggest however that you put your fixes into a separate stylesheet rather than leaving them inline. Just make sure that stylesheet comes after the main stylesheet in the source so the rules overwrite the existing ones.

 

Source: http://www.edgeofmyseat.com/blog/developing-css-for-ie6-and-7

[haku]

Hacks are not very good, as they are hacks, and there is no knowing what will happen with other browsers in the future - maybe some browser will start spontaneously reading the supposed IE6 only code. On top of this, other browsers have to parse the code, even if they don't read it, which is inefficient.

 

For these reasons, using conditional comments to target IE6 is the preferred method of targeting that browser specifically.

[webmaster1]

Yep, go with Haku on this one. I never thought about the longevity of hacks which is fairly important.