problem with height in FireFox

[mrpc]

i designed look to my site with css ....
but i get problem with height...
after i defined percentage height value to box...
when i write text higher then box value, the box look like...
http://members.lycos.co.uk/abjdiat4/up/u/sample.gif
can somebody tell me the best way to fix this mistake? :h:

[paddy.]

Is the box the graphic the text is over or an actual text box?

[mrpc]

actual text box......

<style>
#main{width:80%;height:100%}
</style>

[paddy.]

I was hoping it'd be a graphic. I don't know much about CSS.

[mrpc]

no problem,,any help, i appreciate

[eilsoe]

try excluding the height value, it may default to fit :)

[mrpc]

yes that is right,,,
but i want give the look essential values and it auto increases,,,
can i do that? ^_^

[Kristopher]

Ok this is pretty easy. First of all, if you have your graphic for the box and your text in two seperate divs there is no way it will work. The text div will keep expanding, and you'll be out of luck for the box expanding. Instead, have your text and box in the same div because it will auto expand if you declare that the div's hieght is auto.

Code for the div:


div#container {
width: /*whatever you put*/;
height: auto;
font-family: /*whatever you choose*/;
font-size: /*whatever you choose*/;
color: /*whatever you choose*/;
}

[mrpc]

thnx i'll try it.......:)

[senocular]

oh, I just thought it was an overflow issue.

[eilsoe]

lol me 2

[Tesseract]

alternately, firefox supports the "min-height:;" CSS rule. So what you gotta do is something like this:


myElement {
min-height:400px;
}

* html myElement {
height:400px;
}


That second rule is one that only IE will understand, which is okay because IE treats "height:;" the same way firefox treats "min-height:;" .

Good luck to you

[Kristopher]

But I advise not to use min-height whenever possible. Try to create a footer with absolute positioning on the bottom because you'll have less headaches in the long run.