Simulating Firefox Drop down list behaviour in IE

Discussion in 'HTML' started by Brian Cryer, Oct 18, 2007.

  1. Brian Cryer

    Brian Cryer Guest

    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
    Brian Cryer, Oct 18, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed "Brian Cryer"
    <brian.cryer@127.0.0.1.ntlworld.com> writing in
    news::

    > 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
    Adrienne Boswell, Oct 18, 2007
    #2
    1. Advertising

  3. 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
    Jonathan N. Little, Oct 18, 2007
    #3
  4. Brian Cryer

    Brian Cryer Guest

    "Adrienne Boswell" <> 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::
    >

    <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
    Brian Cryer, Oct 18, 2007
    #4
  5. Brian Cryer

    Brian Cryer Guest

    "Jonathan N. Little" <> wrote in message
    news:64962$47177cfe$40cba7aa$...
    > 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
    Brian Cryer, Oct 18, 2007
    #5
  6. 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
    Jonathan N. Little, Oct 18, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    745
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,002
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    461
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    255
  5. Replies:
    3
    Views:
    277
Loading...

Share This Page