Simulating Firefox Drop down list behaviour in IE

[Brian Cryer]

One of the websites I'm responsible for has a toolbar down the left hand
side, which contains within it amongst other things a number of drop down
list boxes. Depending on what the user selects a map or chart is drawn using
the options the user has specified.

I've hit a problem with Internet Explorer. The left hand toolbar has a fixed
width, and I constrain my drop down list boxes to that width. In Firefox if
the content is longer than the list box then you still get to see all the
content when you click on the box - but in IE its truncated. For example:

<select name="Select1" style="width: 10em">
<option>men, women and children</option>
<option>boys toys</option>
</select>

The first option will be truncated in IE (the second option is short and
displays fine), but in Firefox is still fully visible when you click on the
list box and it opens (even though the width when collapsed is constrained
to 10em). I hope that's clear.

Its only recently that the content of these list boxes has grown. I don't
want to increase the available width because that impacts on other things
and I risk a complete page redesign (which I want to avoid). The client is
happy that when the list box is collapsed that the content is truncated but
wants to be able to see it in full when its expanded.

Any ideas? or am I stuffed?

TIA

 

[Adrienne Boswell]

One of the websites I'm responsible for has a toolbar down the left
hand side, which contains within it amongst other things a number of
drop down list boxes. Depending on what the user selects a map or
chart is drawn using the options the user has specified.

I've hit a problem with Internet Explorer. The left hand toolbar has a
fixed width, and I constrain my drop down list boxes to that width. In
Firefox if the content is longer than the list box then you still get
to see all the content when you click on the box - but in IE its
truncated. For example:

<select name="Select1" style="width: 10em">
<option>men, women and children</option>
<option>boys toys</option>
</select>

The first option will be truncated in IE (the second option is short
and displays fine), but in Firefox is still fully visible when you
click on the list box and it opens (even though the width when
collapsed is constrained to 10em). I hope that's clear.

Its only recently that the content of these list boxes has grown. I
don't want to increase the available width because that impacts on
other things and I risk a complete page redesign (which I want to
avoid). The client is happy that when the list box is collapsed that
the content is truncated but wants to be able to see it in full when
its expanded.

Any ideas? or am I stuffed?

TIA

Even with my crystal ball in the shop, I can see that this is a rigid
design that is obviously breaking, probably nested tables and other
nasty things. I predict you need to redesign using a fluid design,
semantic markup, external CSS, etc.

The little snippet is not nearly enough information. You really need to
provide a URL.

 

[Jonathan N. Little]

One of the websites I'm responsible for has a toolbar down the left hand
side, which contains within it amongst other things a number of drop down
list boxes. Depending on what the user selects a map or chart is drawn using
the options the user has specified.

That's fine and the mystery URL is....?

I've hit a problem with Internet Explorer. The left hand toolbar has a fixed
width, and I constrain my drop down list boxes to that width. In Firefox if
the content is longer than the list box then you still get to see all the
content when you click on the box - but in IE its truncated. For example:

<select name="Select1" style="width: 10em">
<option>men, women and children</option>
<option>boys toys</option>
</select>

The first option will be truncated in IE (the second option is short and
displays fine), but in Firefox is still fully visible when you click on the
list box and it opens (even though the width when collapsed is constrained
to 10em). I hope that's clear.

Yep. IE will if your constrain the width of the parent SELECT then IE
will also constrain the width of the child OPTIONs.

Its only recently that the content of these list boxes has grown. I don't
want to increase the available width because that impacts on other things
and I risk a complete page redesign (which I want to avoid). The client is
happy that when the list box is collapsed that the content is truncated but
wants to be able to see it in full when its expanded.

Any ideas? or am I stuffed?

Redesign. IE will not cooperate with what you are trying to do. In FF
your can even specify the width of the OPTIONs, but will not happen in
IE. For example I will also change the color of the text in the SELECT
in relation to the OPTIONs

select { color: blue; width: 10em; }
select option { color: red; width: 50em; }

In FF the droplist will be 10em wide and text blue when closed, the list
expands to 50ems and the text is red when expanded.


In IE the droplist will always be 10ems wide and the text red.

 

[Brian Cryer]

Gazing into my crystal ball I observed "Brian Cryer"
<[email protected]> writing in

Even with my crystal ball in the shop, I can see that this is a rigid
design that is obviously breaking, probably nested tables and other
nasty things. I predict you need to redesign using a fluid design,
semantic markup, external CSS, etc.

Other than the left hand menu (fixed at 10em), everything this fluid.
Reasonably sematic markup, external css etc.

The little snippet is not nearly enough information. You really need to
provide a URL.

I don't think anything other than the snippet is necessary given that this
is a browser issue. Copy the following and it will give you a page that
demonstrates the issue:

<html>
<body>
<select name="Select1" style="width: 10em">
<option>men, women and children</option>
<option>boys toys</option>
</select>
</body>
</html>

I suspect now that the original design decision for a fixed width left hand
menu was a mistake, or at least a mistake to include selection lists in it.

 

[Brian Cryer]

That's fine and the mystery URL is....?


Yep. IE will if your constrain the width of the parent SELECT then IE will
also constrain the width of the child OPTIONs.


Redesign. IE will not cooperate with what you are trying to do. In FF your
can even specify the width of the OPTIONs, but will not happen in IE. For
example I will also change the color of the text in the SELECT in relation
to the OPTIONs

select { color: blue; width: 10em; }
select option { color: red; width: 50em; }

In FF the droplist will be 10em wide and text blue when closed, the list
expands to 50ems and the text is red when expanded.

In IE the droplist will always be 10ems wide and the text red.

Thanks Jonathan. This makes sense. Lesson for my next project.

I'd rather avoid a redesign (not that it would take particularly long), but
it looks like I'll have to put that option to my customer.

 

[Jonathan N. Little]

I'd rather avoid a redesign (not that it would take particularly long), but
it looks like I'll have to put that option to my customer.

Give him 3 options

* Redesign and make it right
* Make all options really really short to fit within 10ems
* Leave it alone and let IE users lump it.