IE6 shows transparent SELECTs white:(

[svoltz]

Hi there,
I've been looking for answers to this problem and have found solutions for similar problems. But these have not helped me here.

Here's the problem: I have a SELECT box that i want to make transparent, so that you can see the background picture behind it.
In my stylesheet I used {background-color:transparent;} for that specific select-tag. Firefox shows it just fine. But the Internet Explorer shows it with white background. How can I make it transparent in IE as well?

The solution I found focused on iFrames and said to put allowTransparency="true", which i did. But this didn't solve the problem. The background-color of the SELECT is still white.

Check it out at http://deluxe.fape.info/index.php?page=emotionen.

I hope there is a solution to it.
Cheers

[jscheuer1]

IE6 is very limited as to what you can do to style selects. As far as I know, your best bet would be to make the background for it black. To do that only in IE, use this declaration in your stylesheet (thus preserving the transparency for other browsers):

* html #emotion-select-select {
background-color:black;
}

[svoltz]

great it works!
thanks!
i thought about making it black for ie6 somehow but didn't know how. this is good now. i don't really understand how the * works yet, but i'll figure it out.

one other thing. is it possible that the ie6 also has problems with min-height, min-width and the like? seems like i have to set height and width to a specific value...

thanks for any help!
cheers

[jscheuer1]

I've never seen the * html hack (as it is often known) explained to my total satisfaction. The best that I can understand it, and I could be wrong, goes like this. First off, the true top element on any given page is the html element, nothing is above that in the DOM tree. All browsers recognize this except for IE. In IE there is a phantom top element over even the html one but, it has no name. However, since the * selector in css can represent any element, in IE it can represent this phantom top element. Since no other browser sees any element above html, the * html selector is meaningless and ignored in them. This makes it an ideal IE only css selector.

Now, min/max widths and heights are not supported in any current full release of IE (I have no idea what is in the public beta 7 or planned for the full v7 release). Fortunately, IE has a habit of ignoring other css conventions that often render min/max height or width unnecessary. It depends upon the situation. IE does have a unique method of declaring css styles that can duplicate the min/max width and height (and incidentally do things impossible in all other browsers via css) but, it will only work if javascript is enabled (thus opening the door to javascript only methods of duplication for other browsers). What I am referring to is the IE only 'expression' method of css style declaration. This is an example of how it works:

#mainarea {
width:50%;
min-width:300px;
width:expression(Math.max(document.documentElement.clientWidth/2, 300)+'px');
}

In the above the width is set for all other browsers to 50%, with a minimum of 300px. If this is an element that is just below the body in the DOM tree (and the body's width is left to its default), this will be half the window width or at least 300px. Now the expression declaration below that makes no sense to other browsers, so will be followed by IE alone. It will calculate half the window width, compare that to 300, choose the larger of the two numbers and append 'px' to the result and use that as the width for the #mainarea element. Any valid javascript may be included between the two parenthesis (rendered in red for clarity here) and any javascript function that is declared for the page may also be referred to and used in this expression calculation. The only limitation being that whatever the result of this expression may be, it must be a valid css value for the property in question, otherwise, even IE will ignore it.

Just to be on the safe side, I always combine the expression method with the * html or other IE specific methods.

[svoltz]

well thanks a lot for all the explanations! you tell me things i have never heard of before...

so let's get back to the {background-color:transparent;} issue. i finally managed to use opera as well for my testing. opera shows the select boxes with a white background instead of transparent so it keeps goin on. i don't know what netscape does. but i either have to change my design for all browsers or wait for you to give me another solution to this problem

i'll be happy about any suggestions. thanks,
stefan

[jscheuer1]

Opera is the odd man out. Sometimes behaving like IE, sometimes like Mozilla. Perhaps with a DOCTYPE, it could be persuaded to act like Mozilla in this case, if not, there is at least a kludge fix. Put this little script after the select element, right after it in the body:

<script type="text/javascript">
if (window.opera)
document.getElementById('emotion-select-select').style.backgroundColor='black'
</script>

Since the entire show won't work without javascript, this is not such a bad move in this case. Relying on javascript for style, generally, is a bad idea though.

[jscheuer1]

Another thought, why a select? Try replacing your select and all its options with this:
Attachment 259

[svoltz]

incredible! please let me call you master! this is great. i am using the overflow:auto method now and it's fine in every browser i have! i still have to fix the paths for those pictures but this is what i have been looking for

a while ago i was thinking if it's possible to make a single div scrollable because that would have been my favorite choice. someone told me it wasn't. well it is indeed. i am glad this works now

thanks for the amazing help. i'll make sure to come back to this forum if i have any more questions.

have a good day, john.

stefan