Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Simulating Firefox Drop down list behaviour in IE

Reply
Thread Tools

Simulating Firefox Drop down list behaviour in IE

 
 
Brian Cryer
Guest
Posts: n/a
 
      10-18-2007
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
--
Brian Cryer.
www.cryer.co.uk/brian


 
Reply With Quote
 
 
 
 
Adrienne Boswell
Guest
Posts: n/a
 
      10-18-2007
Gazing into my crystal ball I observed "Brian Cryer"
<brian.cryer@127.0.0.1.ntlworld.com> writing in
news(E-Mail Removed):

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


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

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-18-2007
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:
>
> <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.


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Brian Cryer
Guest
Posts: n/a
 
      10-18-2007
"Adrienne Boswell" <(E-Mail Removed)> wrote in message
news:Xns99CD53B57129Darbpenyahoocom@69.28.186.121. ..
> Gazing into my crystal ball I observed "Brian Cryer"
> <brian.cryer@127.0.0.1.ntlworld.com> writing in
> news(E-Mail Removed):
>

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



 
Reply With Quote
 
Brian Cryer
Guest
Posts: n/a
 
      10-18-2007
"Jonathan N. Little" <(E-Mail Removed)> wrote in message
news:64962$47177cfe$40cba7aa$(E-Mail Removed)...
> 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:
>>
>> <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.


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


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-18-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
retrive preselected value in second drop down list from the first drop down list weiwei ASP .Net 0 01-05-2007 07:29 PM
Multiple select drop down poplulating sub drop down scott@dettcom.com Javascript 3 11-09-2006 07:50 PM
Auto Drop down a Drop Down List xxbmichae1@supergambler.com Javascript 5 11-23-2005 01:35 AM
New to .NET, can I have one drop down box control the data of another drop down box using a database? SirPoonga ASP .Net 2 01-07-2005 10:44 PM



Advertisments