help with min-width not working in IE

netooio25 · Feb 20, 2006

Hi,

I'm fairly new to html/css but have a basic understanding of it and how it works...
I have a html select with a list of options, and I was using the CSS property min-width to give the select a minimum width of 250 pixels... I want the select box to grow if I add options to it that are > 250px, but never shrink below 250 px.
This works perfect in Firefox, but I need it to work for Internet Explorer as well. I have done some searching on the web, and found that IE doesnt support the min-width option in CSS. When the page loads, the select box is empty and in IE, it shows up with a width much closer to 0 pixels than the min-width of 250 px.

I need a workaround for this to make it work in IE. I found this site on the web that claims to have a workaround but I cant get it to work...

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

It talks about using IE's expression property to do something like this in the CSS file and this is quoted from the website...
width:expression(document.body.clientWidth > 800? "800px": "auto" );

I tried to modify it to work with minimum-width but it doesnt seem to be working. Here is what I tried...

width:expression(document.forms["orderForm"].orderItems.clientWidth < 250 ? "250px" : "auto" );
This should check if the width is < than 250, then set the clientWidth to 250 pixels, otherwise use the auto setting...
I checked outputting the document.forms["orderForm"].orderItems.clientWidth when I click on the select box to make sure that I was getting the right syntax and it was outputting the correct width. Maybe my javascript is wrong or something...

Any help or suggestions or other ways of doing this would be greatly appreciated...
Thanks much.

BillyRayPreachersSon · Feb 20, 2006

If you want to avoid Javascript altogether (which is effectively what you're using with expressions), try the solution by Stu Nicholls here:

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

Hope this helps,
Dan

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

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

[/tt]

netooio25 · Feb 21, 2006

Cool solution, but i'm not sure if i'm going to be able to get it to work for what I need or not...

I need my selectBox to behave the same as the min-width works for Firefox and other browsers that it works for...

If I set the min-width to 250px, in Firefox, the select box loads empty, but is still 250px wide... If I add an item that is wider than the select box, the select box resizes wider to show the entire item, then if I remove that item, it resizes back down to the 250 px min-width...

I tried playing around with that solution by Stu Nicholls, but it affects the div. The select box inside the div still works like it did before in IE, it's initial size is the width of the biggest item in it, (so if there are no items initially, it is a very small select box). If I add an item, it resizes to the width of the largest item, but if I remove that item, it doesnt resize back down. It stays as a really wide select box. I'll paste in the code of the example I was trying to play with based off the webpage..

<html>
<head>
<link rel="stylesheet" type="text/css" href="minwidth.css" title="Default">

<script>
function addNewOption() {
var opt = document.getElementById('testid');
var myoptions = opt.options;
myoptions[myoptions.length] = new Option("This is a much much asdfdsafdsaf asdfdsaf much longer option text", "4554" );
}

function removeOption() {
var opt = document.getElementById('testid');
var myoptions = opt.options;
myoptions[myoptions.length-1] = null;
}

</script>
</head>

<body>
<div class="width">
<div class="minwidth">
<div class="container">
<div class="content">
<select id="testid" multiple="true" size="10" style="overflow: scroll;" tabindex="18" onClick="addNewOption();">
<OPTION id="option1" VALUE="7382">steam turbine</OPTION>
<OPTION id="2" VALUE="2928">resistor array</OPTION>
<OPTION id="3" VALUE="3993">widget analyzer</OPTION>
<OPTION id="4" VALUE="9398">fiber identifier</OPTION>
</select>
</div>
</div>
</div>
</div>

<div class="rule">this is 300px wide</div>

<input type=submit value="Add" onClick="addNewOption();">
<input type=submit value="Delete" onClick="removeOption();">
</body>
</html>

And here is the css based off of that webpage

body {
background:#fff url(rule.gif) 20px 0;
color:#000;
font-family:"trebuchet ms", "times new roman", times, serif;
margin:20px;
padding:0;
}

* html .minwidth {
border-left:300px solid #fff;
height: 1px;
}

.width {
width:50%;
min-width:300px;
background:#fff;
}

.content {
border:1px solid #c00;
padding:5px;
}

.rule {
width:300px;
background:#c00;
color:#fff;
margin:1em 0;
}

* html .container {
margin-left:-300px;
height: 1px;
position: relative;
}

#testid {
min-width: 300px;
}

If you try this in Firefox, you'll see the way I would like it to behave if possible. Maybe there's some way to get this technique to work for the select box??
Thanks for any help
Netooi (from SoT

)

ChrisHunt · Feb 22, 2006

In many cases, IE (wrongly) treats the [tt]width[/tt] value as if it was [tt]min-width[/tt], so you could try

Code:

* html #testid { width: 300px; }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with min-width not working in IE

netooio25

Programmer

BillyRayPreachersSon

Programmer

netooio25

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor