Re: Min-height

"Colin Walls" <colin (AT) murorum (DOT) demon.co.uk> wrote

I am trying to create a page with a background image at the top left, and
another on the bottom right. In my ignorance (should have looked at the
compatibility matrix before I did it) I set a min-height on the container
I use for my left hand column so that if the content is short it will be
padded out, i.e.

body {
font-family: arial, helvetica, sans-serif;
font-size: x-small;
color: #000;
background: #fff url(images/bottomRight.jpg) no-repeat bottom right;
margin: 0px;
}

/*
* The main containter for the content
*/

#container {
background: url(images/topLeft.jpg) no-repeat top left;
padding: 0px 16em 0px 110px;
margin: 0px;
min-height: 700px;
}

Of course Internet Explorer (blessed be its name) ignores the min-height
and truncates the image. Has anyone got a clue how I can get round this,
preferably without using tables.

I have looked at Andrew Clover's minmax.js, but this seems to rely on the
attribute actually being in the HTML file, and not the CSS.

set up a class which sets the HEIGHT property.

then use ASP/PHP whatever to detect the browser and if IE, create a
div with that class, else create a div without the class.

this way IE will get the height property which it will respect but it
will be hidden from mozilla which will just see your existing style
using min-height. this method doesnt use JS so will work in any
browser.

ive done this and it works.

Matt

On Wed, Aug 6, Matt Rushton inscribed on the eternal scroll:

set up a class which sets the HEIGHT property.

OK

then use ASP/PHP whatever to detect the browser

Don't do it that way - it doesn't work reliably, and it has negative
impact on cacheability and so on.

and if IE, create a
div with that class, else create a div without the class.

IE can respond to its own pseudo-comment syntax, which any
WWW-conforming browser will ignore. They can be included in a static
file: they need no kind of flakey server-side detection etc.

Disclaimer: I don;t actually do this myself (I try to produce
pages for the WWW, not pander to one specific browser, no matter
how popular it might be), so I don't have a working recipe, but if I
had to do it, that's where I'd be looking first. I gather that the
syntax goes something like this

<!--[if IE]>
...
<![endif]-->

this way IE will get the height property which it will respect but it
will be hidden from mozilla which will just see your existing style
using min-height. this method doesnt use JS so will work in any
browser.

But your method only works if the server can work-out what the browser
really is. There's no guarantee you can do that reliably.

I'd much rather tackle the Empire using the tools which the Empire
provides for the purpose ;-)

Disclaimer: I don;t actually do this myself (I try to produce
pages for the WWW, not pander to one specific browser, no matter
how popular it might be), so I don't have a working recipe, but if I
had to do it, that's where I'd be looking first. I gather that the
syntax goes something like this

!--[if IE]
..
![endif]--

you are quite right, the IE conditional formatting does work and was my
first method.

However, it is not valid XHTML which was what my site was being written in
so i had to resort to the ASP method. the only instance of this workaround
on my site occurs on a page which would be ASP anyway so it just not require
any extra trips to the server and would not be cashed anyway.

i have tested my site in IE6, mozilla 1,4, Opera 7.1, and firebird, and the
server just picks IE when it needs to.

im not saying this method is perfect. perfection is just using min-height,
anything else is a hack or workaround. its just the method i used which IMO
works.

Matt