Need Help With Using Css to format a SELECT list

[Avalon 1]

This is a post I did on Xisto.com. I'm not getting much response there, I am hoping here will be more successful.

 

I thought I had Cascading Style Sheets (CSS) pretty much under control, but this has me stumped. What I want to do is format a SELECT drop-down list with a drop shadow as a background image, similar to what I have done with the INPUT box shown below. As you can see, I can't it get to work on the drop-down box. I can change the font color, font type, width and background color but I can't seem to use a background image like I can for an INPUT box.

I have tried various things without success, can someone please show me a working example of where they have managed to put an image in the background of a SELECT list? I'm getting very frustrated by it.

While I'm asking, does anyone know of a workaround to make the "Opacity" and "Gray" filters in CSS work for Firefox like it does for IE? For an example of what I mean by these filters, look at this page http://www.mudmall.com/list.php?search=all in both FF and IE and look at the differences in mouseover effects on the thumbnails. When viewed with IE, these are the effects: lowered opacity for unvisited link, grayscale for visited link and full color with full opacity for rollovers.

 

Anyone have any ideas?

[vujsa 0]

This is a post I did on Xisto.com. I'm not getting much response there, I am hoping here will be more successful.

While I'm asking, does anyone know of a workaround to make the "Opacity" and "Gray" filters in CSS work for Firefox like it does for IE? For an example of what I mean by these filters, look at this page http://www.mudmall.com/list.php?search=all in both FF and IE and look at the differences in mouseover effects on the thumbnails. When viewed with IE, these are the effects: lowered opacity for unvisited link, grayscale for visited link and full color with full opacity for rollovers.

 

Anyone have any ideas?

1064335529[/snapback]

First, the drop down menu as far as I know can not be formated in the way which you desire due to it's dynamic nature. The size varies and then the dropdown has it's own set of problems. I'm pretty sure that the entire thing is a multi component item. Meaning that the dropdown box during over is seperate from the box when not active. Basically, the dropdown (select) input type is too complex for such formating. Now this is my opinion of the situation. Now here is the facts. I have never seen the formating you described successfully implemented.

 

The opacity filter (filters in general) are only supported by IE. I guess since IE has decided not to follow any of the standards for CSS which has soured webdesigners, they would try to shift focus to a kind of cool feature that only they support. IE's "I know there isn't any electricity but here is your new lamp!" approach to designing a web browser has forced many webdesigners to abandon widely compatible CSS standards just because one major software developer refuses to follow the standards.

The newest Netscape release actually has an IE engine built in so that users can see any page as the webmaster designed it. Just click a button to see how it looks in IE or FF.

 

Sorry I don't have better news for you.

Oh and somebody please prove me wrong because I wish that these things were possible.

 

vujsa

[Khymnon 0]

I can't prove you wrong because I believe you're right. Sorry to disappoint you .. :-)I even intended to bash on IE a little when I first read the post, but you got that pretty much covered yourself, so I'll thank you and move along.Now, indeed I've never tried the shadow effect on Select menus since I assumed right away that a multi-component container would never accept such a thing. But I tried it out a minute ago anyway, just to make sure, and it's confirmed. This effect is not possible, as far as I can tell.Perhaps CSS 3.0 might come up with a new thing regarding this matter, although I doubt it. Plus, I firmly believe you should make your Website compatible with at least 2 - if not 3 - major browsers, even if it means sacrificing a bit of visual enhancement.I'm sorry I couldn't bring in any good news. Good luck anyway! :-)

[Avalon 1]

Actually it would appear there is a simple way to use opacity via CSS for both IE & FF, thanks to jlhaslip for the information via PM. This link explains how it works http://forums.xisto.com/no_longer_exists/ Quite simple really, doesn't sort out the drop shadow thing though. I guess I'll have to survive without it for now.

Edited January 15, 2006 by szupie (see edit history)

[Quatrux 4]

Talking about CSS and Forms, FF, O and IE treats the CSS differently, try it your self, I were having a lot of problems about this that you do not have the full control of forms for your site using css, but I got used to it.. like the input type file, even the background and font can't be changed.. so on different layouts it might look strange..

[Khymnon 0]

Fonts *can* be changed in an INPUT field, Quatrux. It can even be done in IE, with no problems. I'm yet to see a browser that doesn't support CSS' font-family in an INPUT field, actually.Plus, FireFox and Opera claimed to be W3C Recommendations Compliant from the get-go. How could they treat CSS differently? Perhaps you could give us an example? It'd be much appreciated.

[Quatrux 4]

did you read what I wrote ? you can't change anything on this code

<input type="file" name="upload" size="50">

of course you can change the input tag, but it won't have effect on the file upload form (on opera, on ie it will change the background and border, on firefox only the background), on the text type you can do anything you desire, you have full control of it. And on different browsers, select, input type radio or checkbox looks different.. on IE hover over forms does not work. etc.

[iGuest 3]

"IE has decided not to follow any of the standards for CSS?"

 

Need Help With Using Css

@vujsa

"I guess since IE has decided not to follow any of the standards for CSS which has soured webdesigners, they would try to shift focus to a kind of cool feature that only they support."

Poor sheep.  Proprietary is not equal to standard. A browser is not 'standards compliant' if you have to type in proprietary code to make it work, which is exactly what has to happen with Firehoax (Mozilla) and Chrome (WebKit).

For examples (for anyone who does not know), here is the Aplha/Opacity filter made to work with the three browsers mentioned.

IE: Filter:Alpha(opacity=50)

Firehoax: -moz-opacity:.50

Safari/Chrome: -webkit-opacity:.50

So, in order to be standards-compliant, I have to use all three of these -two of which are proprietary?  That makes no sense.

It is not Microsoft failing to comply; it is Mozilla failing to grow up.  Internet Explorer is a full-featured browser.  If you cannot handle its power, just say so.  Besides, is IE not the oldest, still-standing GUI-based web browser?  So who wrote the standards?

P.S.  IE has not shifted "focus to a kind of cool feature that only they support."  They moved on.  Perhaps it is time for whiney Mozilla worshippers to do the same.

 

 

-reply by Dave Smith

[iGuest 3]

Dear Dave Smith:

The reason why cerain browsers, such as mozilla and webkit use vendor specifix prefixes to CSS tags relates to the very way that CSS evolve.

"Poor sheep.  Proprietary is not equal to standard. ABrowser is not 'standards compliant' if you have to type in proprietaryCode to make it work, which is exactly what has to happen with Firehoax(Mozilla) and Chrome (WebKit)."

Actually, it is standard compliant. It is defined way to integrate suggested standards into browsers.

In order for a CSS proposal to become a W3C recommendation, at least two browsers need to implemet the feature. While a CSS proposal is in this phase, and browsers implement the suggestion, they use vendor spcific prefixes such as -moz-, -webkit-,  -o-, -ms- .. Etc

http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html

 If you for instance is designing a web application that for instance utilizes a css feature that is yet to become included "as stable" in browsers, you can add that default syntax that will be used if the browser has implemented it as  a non-vendor specific feature.

#box-shadow {-o-box-shadow: 10px 10px 5px #888;-icab-box-shadow: 10px 10px 5px #888;-khtml-box-shadow: 10px 10px 5px #888;-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;

}