Floating over text

[ihateasp]

I have a main container that is set as 600px in height in IE if the page content is over the 600 it resizes the container for me., However IE 7 and FF floats the text over the top.

tried using percentages with no joy.

I have tried using the overflow settings but the best I can get is it to use scroll bars, which i'm trying to avoid.

any advice would be appreciated...ta

[Aso]

So I'm guessing you want it to resize?

IE6 incorrectly interprets height as min-height. However, IE6 does not understand min-height, but you can use a known CSS parsing error in IE6 in order to 'hack' your way around.

Code: Select all

#container {
min-height: 600px;  /*Set minimum height for FF, IE7 and newer browsers*/
}
* html #container {
height: 600px; /*The * html hack in front of your selector is read by IE6 but not other browsers*/
}

*Replace #container with your selector

HTH

[karinne]

If the above solution doesn't work, please provide a link so we can see the code you have so far.

[ihateasp]

thanks for that but this is not an IE issue ... this is only happening in FF and Safari. i need the container to automatically expand larger than 600 pixels automatically. if i change the container to auto it resizes to about 50 pixels in height

[welshstew]

can you post a link please. (sorry being lazy)

thanks,

[Aso]

@ihateasp - min-height does exactly that; sets a minimum height for an element but allows for expansion when necessary (which will work in FF, IE7, Opera etc)

IE6 does not understand min-height, so we specifically tell IE6 a height (using the * html hack) which IE6 then incorrectly understands as min-height.


EDIT: On a side note, do you have floated elements within this container? This will affect the expansion of the container in FF (and possibly Opera and Safari) but not IE6 or IE7 (which incorrectly expand the container)

[ihateasp]

Here ya go ...

http://systemagic.org.uk/networkcommercial/services.asp

[Aso]

Ok, I know what everyone's going to scream, so I'll do it this time

Validate your markup! (25 Errors)

And why have you got table elements in there? I can't see any need for them.

Ok, for your container you've got

Code: Select all

.container {
width: 940px;
min-height:600px;
height:auto;
height:600px;
...}

Height: auto and min-height: 600px are doing nothing, because your final declaration height: 600px is overriding them.

Get rid of height: auto and min-height: 600px, then add this somewhere else

Code: Select all

* html .container {
height: 600px;
}

This is an IE6 specific declaration, as mentioned earlier

[ihateasp]

thanks for all the help guys.. it must have something to do with the fact that I'm pulling in dynamic data. I'm goiing to go back to the drawing board withthis one.


Thanks again for all the help and advice.