min-width

[Erik Ginnerskov]

I have been struggling for some time, trying to make IE behave as if it
actually do understand the css attribute min-width.

In FireFox this code vill work perfectly:

<div style="width: 60%; min-width: 300px;">Some texst</div>

If the viewport is more than 500 px wide, the width of the box is 60 % of
the width of the vieport. If the viewport is less than 500 px wide, the
width of the box is 300 px.

IE doesn't understand that and the width of the box is always 60 % of the
width of the viewport.

Nothing I have tried works as wanted.

Anyone who knows how to make IE do as wanted?

 

[Dylan Parry]

Anyone who knows how to make IE do as wanted?

It's a total hack, but I would use something like:

<div style="width: 60%; min-width: 300px; border: 1px solid black;">
<div style="width: 300px; height: 0; line-height:0;></div>
</div>

Again, it's a total hack and kinda takes us back to the days of filler
images for positioning, but it's the only way I can really think of that
would work adequately.

 

[Dylan Parry]

<div style="width: 300px; height: 0; line-height:0;></div>

^^

Of course, there is a missing " there

 

[Travis Newbury]

I have been struggling for some time, trying to make IE behave as if it
actually do understand the css attribute min-width.

Lets think... hmmmm 90% of the visitors will probably use IE. So how
much time do you want to spend on something that will not work on the
browser of choice of almost all your visitors. Change your design.

IE doesn't understand that and the width of the box is always 60 % of the
width of the viewport.
Nothing I have tried works as wanted.

You supplied yourself with the answer. IE doesn't know how to do it.
it will not work for IE which means it will not work for most of your
visitors. So you have 2 options.. Don't do it. Or put up a stupid
message that the page is optimized for everything but IE.

Anyone who knows how to make IE do as wanted?

Yes, but it would require that get the source code to IE and make some
changes. Bill won't like that.

 

[Erik Ginnerskov]

It's a total hack, but I would use something like:

<div style="width: 60%; min-width: 300px; border: 1px solid black;">
<div style="width: 300px; height: 0; line-height:0;></div>
</div>

It's very much like a solution with a 1px high invible *.gif, I have used
previously. I don't like this way to do it.

 

[Dylan Parry]

It's very much like a solution with a 1px high invible *.gif, I have used
previously. I don't like this way to do it.

Well, you're pretty much stuck then. At least with using a division you
are not adding any fake content to the page as you would be using an
image. It's still not ideal mind

 

[Erik Ginnerskov]

Lets think... hmmmm 90% of the visitors will probably use IE. So how
much time do you want to spend on something that will not work on the
browser of choice of almost all your visitors. Change your design.

That's the easy answer. It would be jumping the fence at the lowest point.

But you see, I'm running a web-site where others seek the answer when having
trouble with their own homepage. I allready have made pages, where I show
how to make min-height and max-width. These pages work fine in IE and I
would like to fill in the blankes (max-height and min-width) too.

You supplied yourself with the answer. IE doesn't know how to do it.

I do not see it that simple. I know IE will not understand plain css for
these things, but somebody may know a hack that works.

You can se the how to solve the min-height problem at:

http://hjemmesideskolen.dk/html/testsider/minheight.asp

and how to solve the max-width problem at:

http://hjemmesideskolen.dk/html/testsider/maxwidth.asp

Notice: The explanation is written in danish, but the code used (and showed
on the pages) is naturally international.

 

[Leif K-Brooks]

I have been struggling for some time, trying to make IE behave as if it
actually do understand the css attribute min-width.

http://dean.edwards.name/IE7/

 

[Erik Ginnerskov]

Well, you're pretty much stuck then.

I hope, you are wrong. I've already found a way to make min-height and
max-width work in IE too. It just takes a little css hack - a few lines of
extra code.

 

[Dylan Parry]

http://dean.edwards.name/IE7/

I've heard of that before, but never actually tried it. How does it
perform in the real world? Have you used it on any sites that you've
made? I assume that as it is a Javascript fix (I think?) that it won't
work in some cases because folk have disabled scripting

 

[rf]

I have been struggling for some time, trying to make IE behave as if it
actually do understand the css attribute min-width.

In FireFox this code vill work perfectly:

<div style="width: 60%; min-width: 300px;">Some texst</div>

http://www.svendtofte.com/code/max_width_in_ie/

At the bottom of the page are links to pages that simulate min-width and
max-width for IE and implement the real thing for other browsers.

Seems to work fine although it does require javascript to be enabled.

 

[Dylan Parry]

A quick look tells me something is wrong with that... try:

Ignore me. I was typing rubbish

 

[Erik Ginnerskov]

http://www.svendtofte.com/code/max_width_in_ie/

That link gave me the answer to how I make IE understand max-height. It even
works in the fossil version 5.0. Thank you very much.

But it doesn' work as expected with min-width.

div {
min-width:300px;
width:expression(document.body.clientWidth < 300? "300px": "auto" );
}

The script sets the box to 100% of the viewport, if the viewport is more
than the desired 300px. ;(

 

[Dylan Parry]

div {
min-width:300px;
width:expression(document.body.clientWidth < 300? "300px": "auto" );
}

A quick look tells me something is wrong with that... try:

div {
min-width:300px;
width:expression(document.body.clientWidth < 300? "auto": "300px" );
}

I've not seen this solution before, but it seems like it will work for
most folk with IE as long as scripting is turned on... I suppose that
for the few that turn scripting off that it won't make too much
difference in terms of design anyway?

 

[Dylan Parry]

But it doesn' work as expected with min-width.

Now that I have screwed my brain back into my head, taking a look at the
sample page on that site,
http://www.svendtofte.com/code/max_width_in_ie/pixels_minwidth.html, the
code /seems/ to work in IE6. Do you have a sample uploaded where it
*isn't* working properly?

 

[Erik Ginnerskov]

the code /seems/ to work in IE6. Do you have a sample uploaded where
it *isn't* working properly?

I have just made a sample page in english, explaining what I want it to do
and showing the code used:

http://www.hjemmesideskolen.dk/html/testsider/min-width.asp

View the page in Mozilla or FireFox and try decreasing and increasing the
width of the browser window, before trying with Internet Explorer.

In Mozilla and FireFox the little boxes with light blue rim behaves exactly
as I want them to. In IE the upper box expands to the full width of the
viewport, no matter what width of viewport.

 

[Dylan Parry]

http://www.hjemmesideskolen.dk/html/testsider/min-width.asp

After stripping it down to minimum code, I found that the only way I
could get it to work was by removing the doctype so that IE reverted to
quirks mode. I'm not sure how to make it work in standards mode though,
as I don't have all that much experience with IE specific script/css.

 

[Erik Ginnerskov]

After stripping it down to minimum code, I found that the only way I
could get it to work was by removing the doctype so that IE reverted
to quirks mode.

The only effect I could see was that the lower box no longer was centered in
the viewport.