HTML <select> + IE 6

[Clive Quinn]

Hi,

I have created an html select element which contains optgroups and options.
An option when selected will link to a new html page in a new window.

Now my problem is formatting this select element.
I have an external style sheet and I want to position this element in the
top right hand corner of my page:

Style sheet code:

select.RadioOptions
{
background: #ffffcc none no-repeat fixed top right;
size: 1;
}

HTML code:
<SELECT class="RadioOptions"
onChange='parent.location=this.options[this.selectedIndex].value,"_new"'">

Now when I do this the select element appears in the top left hand side of
my canvas. Now I have tried other alignment options
align: right
vertical-alignment: right
but still no joy.

Has anybody any ideas?

Cheers

 

[Adrienne]

Hi,

I have created an html select element which contains optgroups and
options. An option when selected will link to a new html page in a new
window.

Now my problem is formatting this select element.
I have an external style sheet and I want to position this element in
the top right hand corner of my page:

Style sheet code:

select.RadioOptions
{
background: #ffffcc none no-repeat fixed top right;
size: 1;
}

HTML code:
<SELECT class="RadioOptions"
onChange='parent.location=this.options[this.selectedIndex].value,"_new"'
">

Now when I do this the select element appears in the top left hand side
of my canvas. Now I have tried other alignment options
align: right
vertical-alignment: right
but still no joy.

Has anybody any ideas?

select.RadioOptions
{ position: fixed;
top:1px;
right:1px;
background-color:#ffffcc;
}

Don't know what you mean there about size. Size applies to the page itself,
landscape, portait, etc.

Don't know what you mean about no-repeat either. That would usually apply
to an image, and I don't see anything about an image.

 

[Clive Quinn]

Thanks for your help with this.
From my original post I noticed I had a few typos.
As both of you said the size attribute should not appear in the style sheet
(My mistake) and also vertical-align is the what i should have had instead
of vertical-alignment.

This problem was solved as follows: First of all the select element, I
believe is not a block element. So to get around this I put the select
element in a div block and applied text-align: right to this div block. This
sorted out my problem.

Thanks again.

Now my problem is formatting this select element.
I have an external style sheet and I want to position this element in the
top right hand corner of my page:

Style sheet code:

select.RadioOptions
{
background: #ffffcc none no-repeat fixed top right;

If you're only doing a background colour, this is sufficient:
background: #ffffcc;

size: 1;

There's no such property. There's a HTML size attribute which you
might want to put on the element.

}

HTML code:
<SELECT class="RadioOptions"

size="1" would go here. Though it's the default value so you don't need to.

onChange='parent.location=this.options[this.selectedIndex].value,"_new"'">

Now when I do this the select element appears in the top left hand side of
my canvas. Now I have tried other alignment options
align: right

Doesn't exist, try:
text-align: right;
or
float: right;
depending on what you're trying to do.

vertical-alignment: right

Doesn't exist, try:
vertical-align: (though 'right' isn't a usable value for it anyway).

but still no joy.

Not surprising if you make up stylesheet properties and values.

Has anybody any ideas?

Read the CSS specification at
http://www.w3.org/TR/CSS2/ (for an official specification its very readable)
and use the CSS checker at
http://jigsaw.w3.org/css-validator/
to make sure that your CSS actually matches the specification.