customizing listbox

[chuvak]

Hi,

is it possible to set the size and alignment for a listbox ?
<select>
<option> ....
..
..
</select>
It only gets as wide as the longest string in it and all strings are alligned to the left. Can that be changed? Or if it can't how do I make an alternative with the same form of input that can?

thanks in advance

[pyro]

Yes, you just use CSS:

<select name="myselect" style="width:300px;">
...options here...
</select>

[Jonathan]

or you can just do this... He got the "CSS" thing right but you can also do this
<hr>
<select size="30" align=center>
<option>Hello
<option>Hey
<option>DUDE
<hr>

[chuvak]

Yep, I can adjust the size, but not the alignment. Are you sure about this? Both ways don't work in neitehr Mozilla nor IE.

[Jonathan]

What version of IE are you using.. it works on mine and I am using i think 5.somethign or 6\

If worst comes to worst... get HTML-Kit...

[khaki]

hi chuvak...

this <style> works in Moz and IE :
($Opera has issues with it... but supposedly it's the perfect browser... so... whatever :rolleyes: )

;) k


select.drop {
background-color:#006699;
color: #fff;
font-family: verdana;
font-size: 13px;
text-align: center;
font-weight: bold;
padding: 2px 2px 2px 2px;
}



<select class="drop" multiple size=5 name="drop1">

[chuvak]

> this <style> works in Moz and IE :

Strange, it actually works in mozilla, but not IE.
I have IE 6.0
Maybe some patches are missing. I never bother downloading either security or any updates because they come out way to often.

> If worst comes to worst... get HTML-Kit...
What's that?

thanks

[khaki]

hi chuvak...

maybe i removed too much from my own code.
try it with the change (in bold) and let me know if that makes any difference.
;) k

select.drop {
display: block;
background-color:#006699;
color: #fff;
font-family: verdana;
font-size: 13px;
text-align: center;
font-weight: bold;
padding: 2px 2px 2px 2px;
}

[chuvak]

hi,

unfortunatly it doesn't make difference.

I thought just text-align: center; should be enough (and it is in mozilla)

[khaki]

sorry then :(

but I'm pretty sure that I saw that <style> actually center the text in an IE6 browser.

unfortunately I'm not much of a CSS guru... so... :rolleyes:

but maybe someone else will have some ideas for you :)

;) k

[pyro]

Try this:

<div style="margin: auto; text-align: center;">
<select name="select" style="width:300px;">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</div>

[spufi]

Originally posted by Jonathan
What version of IE are you using.. it works on mine and I am using i think 5.somethign or 6\

If worst comes to worst... get HTML-Kit...

And them getting HTML-Kit does them no good in trying to solve their problem.