Results 1 to 10 of 10

Thread: Help with dropdown menu code

  1. #1
    tmongy's Avatar
    tmongy is offline Net Builder
    Join Date
    Dec 2008
    Location
    Cairo, Egypt
    Posts
    299
    Thanks
    153
    Thanked 102 Times in 68 Posts

    Help with dropdown menu code

    I have a drop down menu on one of my sites and I want certain options to be larger and in bold to serve as headings within the drop down list.

    The code I have looks like this:

    Code:
    <select name="Hcity" id="Hcity">
    <option value="" selected>All Cities</option>
    <option value='Cairo'  style='font-weight: bold; font-size: 127%; font-style: italic;'>Cairo</option>
    <option value='6' >6th of October</option>
    <option value='7' >Agouza</option>
    <option value='8' >Al Rehab</option>
    <option value='85' >Beaulac</option>
    </select>
    This works perfectly fine in Firefox, but IE and Chrome seem to ignore the style of the Cairo option completely.

    Anyone know how I can have it working in all browsers?

    Thanks

  2. #2
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).

  3. #3
    tsdesigns's Avatar
    tsdesigns is offline Newbie Net Builder
    Join Date
    Apr 2010
    Location
    Scotland
    Posts
    25
    Thanks
    11
    Thanked 6 Times in 5 Posts
    Quote Originally Posted by Aziz View Post
    Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).

    ^^ I wouldn't recommend that (for text at least).

    Using a fixed size for text means that if someone uses their browser to enlarge/decrease the size of the text then they cannot. This is obviously a major accessibility issue if the user cannot change the text size in their browser.

    Even though some browsers now use a "zoom" feature instead of increasing the size of all the text, they still have the option to use text only zoom, and there are those browsers that only increase/decrease the size of text using their zoom feature.

    For text it's best to use a flexible size (% or em are what people tend to use)

  4. #4
    tmongy's Avatar
    tmongy is offline Net Builder
    Join Date
    Dec 2008
    Location
    Cairo, Egypt
    Posts
    299
    Thanks
    153
    Thanked 102 Times in 68 Posts
    Quote Originally Posted by Aziz View Post
    Use CSS and assign the class to desired option. by the way, try using pixels it's better than relative measures (which is rendered differently in each browsers).
    Thanks Aziz, but using CSS allows me to style how all the options in the <select> element will look like, not individual options.

    Can you please give me a quick example of how you would style the individual option using CSS?

  5. #5
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    CSS

    Code:
    .highlight {
      font-size:16px;
      font-weight:bold;
      font-style:italic;
    }

    HTML


    Code:
    <select name="Hcity" id="Hcity">
      <option value="" selected>All Cities</option>
      <option value='Cairo' class="highlight">Cairo</option>
      <option value='6' >6th of October</option>
      <option value='7' >Agouza</option>
      <option value='8' >Al Rehab</option>
      <option value='85' >Beaulac</option>
    </select>

  6. Thanked by:

    tmongy (13 May, 2010)

  7. #6
    tmongy's Avatar
    tmongy is offline Net Builder
    Join Date
    Dec 2008
    Location
    Cairo, Egypt
    Posts
    299
    Thanks
    153
    Thanked 102 Times in 68 Posts
    Thanks Aziz... I applied your example and now the styling is done with CSS.

    But again it looks great in FF, while IE and Chrome completely ignore the <option> styling

  8. #7
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    can you upload a preview please?

  9. #8
    tmongy's Avatar
    tmongy is offline Net Builder
    Join Date
    Dec 2008
    Location
    Cairo, Egypt
    Posts
    299
    Thanks
    153
    Thanked 102 Times in 68 Posts
    Quote Originally Posted by Aziz View Post
    can you upload a preview please?
    You can check it out here, it's the drop down at the top.

    http://www.totallyegypt.com

    The only styling that carries through in all browsers is the background colour. The size and weight are ignored by IE and Chrome.

  10. #9
    Aziz's Avatar
    Aziz is offline no investment, no glory
    Join Date
    May 2009
    Location
    IL
    Posts
    736
    Thanks
    588
    Thanked 243 Times in 168 Posts
    try adding "!important" after each property.

    example:
    font-size:127% !important;

    otherwise, maybe the browsers simply do not support the defined property for options. (I never really tried it).

  11. #10
    tmongy's Avatar
    tmongy is offline Net Builder
    Join Date
    Dec 2008
    Location
    Cairo, Egypt
    Posts
    299
    Thanks
    153
    Thanked 102 Times in 68 Posts
    Quote Originally Posted by Aziz View Post
    try adding "!important" after each property.

    example:
    font-size:127% !important;

    otherwise, maybe the browsers simply do not support the defined property for options. (I never really tried it).
    Gave that a shot but still didn't work. Looks like they just don't support it like you said.

    Well thanks for the help anyways, much appreciated

Similar Threads

  1. Dropdown Menus in WordPress
    By vectro in forum Blogging
    Replies: 6
    Last Post: 18 May, 2011, 03:57 AM
  2. A Quick Access/Forum Jump Menu?
    By JimmyK in forum Announcements and Suggestions
    Replies: 6
    Last Post: 18 March, 2009, 19:43 PM
  3. dependent dropdown boxes in form
    By DickTracy in forum Programming
    Replies: 3
    Last Post: 30 January, 2009, 10:37 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •