Select drop-down menus

Keeping sizes uniform on Mac and Windows

[DFrag]

Hello all,

I have a page with 5 drop-down menus one on top of the other. Porblem is I can't get them to all the same size. When they're of uniform size in Windows, the Mac makes them a lot wider.

I am using dashes (-) to space out the menus but it doesn't work as intended. Are there any tricks or tips in getting the menus uniform width?

Thanks
DFrag

[Purple Martin]

Absolutely positioned divs?

[DFrag]

What do you mean?

[Purple Martin]

Put each menu inside it's own <div> tag. Use the style attribute of each div to set it's position and height and width (using CSS styles). That way you can control them exactly and they'll all be the same size in all browsers.

[DFrag]

Purple Martin,

I'll try that. Thanks

DFrag

[pageoneresults]

Purple Martin, could you also assign a class to the select element?

.w250{width:250px;}

<select class="w250">

This is what I've been doing instead of adding all the additional <div>s and attributes for sizing. I don't mess with height as there is too much consistency between browsers.

P.S. I should add that I normally work with absolute sizing so if you are using relative font sizing, my solution may not work.

[DFrag]

All is good. I created a class and set the menu width that way. I didn't need to use <div>.

Actually it would wok when done using <div> but works fine using the <style> tag.

Thanks for the help!

DFrag

[Purple Martin]

P.S. I should add that I normally work with absolute sizing so if you are using relative font sizing, my solution may not work.

I'm sure you already know this but... you can size your elements using ems so that they grow with the text (which should also be sized with ems for this to work). When the user changes their font size to larger or smaller, your elements will grow and shrink in proportion to the text inside them. In some situations this looks very nice. Of course in other situations you'll prefer fixed size elements.

[pageoneresults]

I'm sure you already know this but... you can size your elements using ems so that they grow with the text (which should also be sized with ems for this to work).

Yup, I've just not been able to make that transition yet. I've built a test site using ems for everything including image sizes. Yes, the images are in png format. Unfortunately the results were not what I expected.

I'm at the point now where I think I'll stay with absolute sizing. IE is the only browser that does not allow the user to size the text up or down using the text sizing feature. But, you can go into the accessbility features and override absolute sizing. So, if there are any users with disabilities, I'm going to assume they are familiar with their IE accessbility settings or are using a browser that allows them to adjust size.

P.S. Sorry to go off topic.