Indents and font size on pulldown menus

[paulcj2]

I have two questions re: pulldown menus.

1) How do you indent the subheads?

2) How do you change the text size?

Re: indenting the subheads, I have tried the &bsp; and other special character entities. All that happens is the code shows up.

Re: size of text, I have tried using the <font size="1"></font> tags in a variety of places within the table, cel, form and pulldown menu item and nothing seems to make a change in the font size within the pulldown menus.

I created a test table above the pulldown menu table. Font size changes work fine there. But no changes, neither indents nor print sizes seem to work within the pulldown menus.

Is there a way around this?

Can either or both of these things be done?

(sample at
http://www.kripalushop.org/website_improvement/)
using HTML and simple java script.

<form method="post">

<select name="navbox" size="1" onchange="window.open(this.options[this.selectedIndex].value,'_top')">

<option value>Welcome</option>

<option value="whats_new.shtml">What's New?</option>

<option value="history.shtml">History</option>

<option value="philosophy.shtml">Philosophy</option>

</select>

</form>

[RogueJedi]

If I understand what you are wanting to do, I don't think it's possible using select elements in a form. You'll need to implement a dHTML menu system. If you don't want to write your own menu system, you can download one from several places around web (http://www.dynamicdrive.com is one such place).

[Ian Glass]

Try using CSS.

<select style="font-size:2em">

That's probily a bit larger than you want, so look into CSS mesurement {http://www.w3.org/TR/REC-CSS1#units} spec to find the sizes you want. You could also use the 'text-indent' property in CSS, too.

Part of the problem with the character entity it that's the wrong one. You wrote '&amp;bsp;' it should be '&amp;nbsp;' it stands for 'no breaking space'. That may have just been a typo, though.

~~That's My 2¢

[paulcj2]

Thanks, guys. I'll give these ideas a try.

[RogueJedi]

I tried using the text-indent CSS property in a selectbox when I replied originally. I found that, at least in IE 5.5sp2, that property does not work in <select> or <option> tags.

text-indent may work better in Mozilla/Netscape6.x/IE6, but I'm at work and don't have access to those browsers.

[paulcj2]

Turns out &nbsp; works fine to create an indent of the sub categories. I was using &bsp in error.

Still trying the font size thing.

[Ian Glass]

Glad to help in any way I can...

[paulcj2]

Making progress on my top navigation bar here!

I've got the indents and the text size to work, but I can't seem to squeeze the six drop down boxes within the 770 px of my design. The boxes seem to have a mind of their own, allowing more blank space at the end of a menu item than I need, causing the six menus to take up more space than I want.

At http://www.kripalushop.org/website_improvement/
I have put two versions of the navigation bar. The top one includes only four of the six menus, showing that with the amount of space they are taking, there is no way I will get the last two menus into spaces five and six without going over my 770 px limit.

The bottom one shows what happens when I include all six menus. Is there any way I can over ride the default width that the menus seem to want to assign themselves given the length of the menu items?