Simulating Firefox Drop down list behaviour in IE

Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 16:13:33 von 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:



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
--
Brian Cryer.
www.cryer.co.uk/brian

Re: Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 17:13:45 von Adrienne Boswell

Gazing into my crystal ball I observed "Brian Cryer"
writing in
news:xPednYtDjYaZ94ranZ2dnUVZ8qminZ2d@pipex.net:

> 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:
>
>
>
> 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.


--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Re: Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 17:34:23 von lws4art

Brian Cryer wrote:
> 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:
>
>
>
> 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.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 18:02:51 von Brian Cryer

"Adrienne Boswell" wrote in message
news:Xns99CD53B57129Darbpenyahoocom@69.28.186.121...
> Gazing into my crystal ball I observed "Brian Cryer"
> writing in
> news:xPednYtDjYaZ94ranZ2dnUVZ8qminZ2d@pipex.net:
>

> 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:







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
www.cryer.co.uk/brian

Re: Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 18:05:32 von Brian Cryer

"Jonathan N. Little" wrote in message
news:64962$47177cfe$40cba7aa$31853@NAXS.COM...
> Brian Cryer wrote:
>> 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:
>>
>>
>>
>> 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.

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.
--
Brian Cryer
www.cryer.co.uk/brian

Re: Simulating Firefox Drop down list behaviour in IE

am 18.10.2007 18:50:01 von lws4art

Brian Cryer wrote:
> 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.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com