How do I set the size and font-size of the menu

timstring

On a completely different note, when I set up the drop-down menu, how do I set the size and font-size of the menu

johanafm

A lot of CSS properties are inherited from parent to child, unless overridden. Thus, locate the outermost element in your menu. It's likely to be either a wrapper div or an ul or ol

<ul id="top_menu">
...
</ul>


<ol class="menu">
...
</ol>

Simply create a rule matching such an element

ol.menu, #top_menu

Weedpacket

Completely unrelated post moved to new thread in the appropriate forum.

timstring

Ok, I'm lost. I have this in my style sheet:

ul {
list-style-type: none;
font: 2em, Arial, sans-serif
height: 80px;
width: 300px;
margin-left: auto;
margin-right:auto;
}

Then I have this in the middle of my php script:

$ddl = array('--Select System--','Bryan, TX','Enid, OK','Tyler, TX');
echo '<ul><select name="System">';
foreach( $ddl as $k => $v ) {
   echo '<option value="'. $k .'"';
   if( isset($TechSystem) && $TechSystem == $k ) {
      echo ' selected="selected"';
   }
   echo '>'. $v .'</option></ul>';

No matter what setting in the style sheet I change, it is not reflected in the menu. I will readily admit that I'm a clueless coder

"If builders built buildings like programmers write programs, the first woodpecker to come along would wreck civilization."

Weedpacket

If you look at the HTML that generates you'll find a bit of a problem: <ul> elements are supposed to contain <li> elements, not a <select> (for which you're also missing the closing tag).

timstring

So I tried this in HTML:

<select name="System"><ul>
<option value="0"><li>--Select System--</li></option>
<option value="1" selected="selected"><li>Bryan, TX</li></option>
<option value="2"><li>Enid, OK</li></option>
<option value="3"><li>Tyler, TX</li></option>
</select>
</ul>

and it didn't work, either. I have tried the <li> tags outside of the <option> tags and that didn't work as well. Give me a little hint, please!

Weedpacket

No, that still doesn't make sense in HTML (in fact it's even worse because now the tags aren't properly nested).

Why do you have a <ul> at all? If it's for the style, why not apply it that style to the <select> directly (or to whatever would be containing the <select> if the <ul> weren't there)?

timstring

echo '<select name="System";style="font: 3em Arial sans-serif; height: 80px;
width: 300px">';

no werkie either.

Then I tried:

echo '<select name="System"; font-size="16px"; width = "300px"; height="80px">';

and that no vas

I've tried the line without semicolons and "px", but that doesn't fly.

Would someone give me a clue? I'm just blundering along here.

bradgrafelman

What's with all of the semicolons? The first version works fine if I remove the semicolon before the "style" attribute.

EDIT: To clarify, I meant semicolons not inside of an attribute's value.

timstring

So, I did this:

 <select name="System" style="font:24px Arial, sans-serif; height:80px; width:300px; margin-right:auto; margin-left:auto">

and the only thing that worked was the width. I end up with the menu being on the left side of the window, 300 px wide in the default font, with the options on the left side of the menu.

timstring

even more curious, this works in Firefox, but not Safari.

<select name="System" style="width:250px; height:40px; font:18px Arial, sans-serif; text-align:center; margin-right:auto; margin-left:auto;">

Huh? How do i make this whole system to work in Safari?

Weedpacket

Apparently Safari is a bit weak in that respect: see http://www.electrictoolbox.com/style-optgroup-option-css-safari/ (still: that article is from 2009 and Safari has gone through two major versions since then; I don't know if they've bothered to fix it yet. Odd really, since Safari and Chrome are supposed to be using the same rendering engine).

Incidentally: instead of replacing [font=monospace]margin-right:auto; margin-left:auto[/font] with [font=monospace]text-align:center[/font], it might be better to add [font=monospace]display:block[/font]. Without it, the <select> element would be displayed inline, and automatic margins are set to 0 for those. (The reason for that is that the space to the sides of the element would be taken up by other inline stuff anyway.)