image at selectbox...IE?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

image at selectbox...IE?

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Fiddle with the repeat and potentially positioning directives.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

all ok when putting no repeat...however any solution for IE? or we just wait for IE to get better?
Post Reply