min-wdth in IE 1

[secretsquirrel]

hi,

i'm looking for a fool-proof, catch-all solution to prevent my site from squashing below a minimum width in IE. the entire site is contained within a wrapper div which has a 100% width and a fixed min-width (which works in FF, opera, etc.)

in IE and when the browser window is resized below a certain width, the floated elements in the page start to stack, leave chunks of whitespace, etc. and look awful.

i know that IE doesn't support min-width and i've looked at all kinds of solutions on the web (including javascript expressions in my CSS, sneaky use of borders and margins, etc), but none of them seem to make any difference.

does anyone know of a catch-all solution that i can apply across every page on my site?

btw... i'm testing on IE6.

thanks,

ss...

 

[Vragabond]

What do you mean none of them makes a difference? The methods you describe usually work on the pages -- could you tell us what does not work on your pages when you load those solutions? And show us how you're doing it?

I've had some problems with using the expressions, but it wasn't that there was no effect...

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[secretsquirrel]

- i tried using javascript expressions like this...

width:expression(document.body.clientWidth < 500 ? "500px" : "100%" );

and, as soon as the browser window reaches the minimum width IE6 crashes.

- i tried using the technique here...

http://www.cssplay.co.uk/boxes/minwidth.html

and it really didn't seem to make any difference to the page whatsoever using the 'quirks mode' method and using the standards compliant method, i just get a great big border down the side of my page.

i'd love to show you, but the pages are on a development server and i've no way of getting them live at the moment.

could the contents of my page be having some effect? i'm using a liquid 3 column layout for some pages and a liquid 2 column layout for others.

sorry if this isn't enough info for you to be able to answer my question, but it's all the info i've got to go on.

thanks,

ss...

 

[kaht]

The secret here is that in IE6, the width attribute actually acts like the min-width attribute. Try for yourself - stick a bunch of stuff in a div tag and then set the width of that div tag to 1%. In IE6 the div will stretch to accommodate the width of the content - but will never go below 1% (which you won't even be able to tell because it's 1%. The problem here is that all other browsers are going to interpret the width property that we're using for IE6, and in turn will essentially set the static width to that value instead of the min-width. So, how to we make IE6 see the width property and other browsers won't? The tried and true star-html hack, of course:

div#someDiv {
   min-width:500px; /* IE browsers before 7 won't understand this so it is ignored */
}

[!]* html[/!] div#someDiv {
   width:500px; /* only IE browsers before 7 will see this */
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[BillyRayPreachersSon]

kaht's solution will work for most cases. I think the only case it won't work for is if you specify your width in EMs or % but still require a min-width (I had this case a while back).

I opted for a JS solution, which worked OK, but wasn't the best. Another option would be to put a 1px high transparent image of the min-width you require in your content - the container shouldn't be able to be sized below that.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

For the expressions solution, make sure that your two numbers do not match but are slightly different, else there's that split moment when browser gets confused. But sometimes when you have a form on your page, the expressions will simply crash the browser.

Stu Nicholls' method works in his example sites, so I would think you're doing something wrong. Make sure you know which one you need to use (quirks or standards) and work on that one. Is your page in quirks mode or standards anyway? Have you copied all the relevant code from Stu's examples? Have you tried making a framework based on his code and continue from there?

As for kaht's method... it will work, but not if the content is floated. If you have 500px wide container, you won't be able to fit 2 300px floated divs inside. You will be able to fit those in a container with min-width 500px.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[secretsquirrel]

aah!

i didn't realise the implications of using the same value in the javascript expressions technique. i've changed one of the values and all seems to be working fine!

and my content is all floated so kaht's method didn't do the trick - it just reduced the width of my content to the minimum width regardless of the size of the window.

many thanks for all the help.

ss...