Page 1 of 1

image at selectbox...IE?

Posted: Sat Apr 21, 2007 6:38 pm
by sarris
I found arround the internet a really cool way to have an image at selectbox.
Wanted to have a selectbox for the user to choose the way he wants some data sorted.
I have this code and this style.

Code: Select all

<style type="text/css">
    <!--

    option[value=price ASC]:before { content:url("up.gif"); }
    option[value=price DESC]:before { content:url("down.gif"); }
    option[value=size ASC]:before { content:url("up.gif"); }
    option[value=size DESC]:before { content:url("down.gif"); }
-->
</style>

Code: Select all

<option value="price ASC">Price</option>
<option value="price DESC">Price</option>
<option value="size ASC">Size</option> 
<option value="size DESC">Size</option> 
Works really nice with mozzila...But, as allways, there is a problem with Internet Exlporer. IE doesnt show the images, is there anyone you know if i can fix this?

Out of topic comment and question...
Genereally IE limits ones choices amazingly much, so can anyone see any hope that all those problems will soon be fixed?

Posted: Mon Apr 23, 2007 10:41 am
by pickle
Wow, that's some funky CSS magic. I'm not surprised IE doesn't handle it well. Is that standards compliant CSS?

In any case, I'd do it a bit differently:

Code: Select all

option.priceASC{
   background-image:url(up.gif);
   padding-left:20px;/*Assuming up.gif is < 20px */
}
...
etc
...

Code: Select all

<select>
   <option value = "price ASC" class = "priceASC">Price</option>
</select>

Posted: Mon Apr 23, 2007 2:37 pm
by sarris
yes it nice magic there.
I tried what you suggested and in Mozzila it showed the image many times (as if you put a small background image on windows desktop...it duplicates it some times to cover all the empty space).
And on IE...off course nothing. Whats wrong with that browser seriously...nothing works

Posted: Mon Apr 23, 2007 3:27 pm
by feyd
Fiddle with the repeat and potentially positioning directives.

Posted: Mon Apr 23, 2007 8:10 pm
by sarris
all ok when putting no repeat...however any solution for IE? or we just wait for IE to get better?