/    Sign up×
Community /Pin to ProfileBookmark

transparant scrollable div and selection lists

Hi,

The content of my website is rendered in a div whitch requires to be transparant. This can be done in IE with the css filter attribute, value croma.

However, selection lists (html select tag) become totally crap when being used in this div.

Example:

[code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
<meta name=”generator” content=”PSPad editor, www.pspad.com”>
<title></title>
<style type=”text/css”>
div#content_part {
overflow: auto;
overflow-x:auto;
overflow-y:scroll;
width:469px;
height:300px;
background-color: #FFFFFE;
text-align:left;
float:left;
padding-left:10px;
padding-right:10px;
scrollbar-face-color: #FFFFFE;
scrollbar-shadow-color: #3FB404;
scrollbar-highlight-color: #FFFFFE;
scrollbar-3dlight-color: #3FB404;
scrollbar-darkshadow-color: #FFFFFE;
scrollbar-track-color: #FFFFFE;
scrollbar-arrow-color: #3FB404;
scrollbar-base-color: #FFFFFE;
z-index:600;*/
FILTER: chroma(color=#FFFFFE);

}
</style>
</head>
<body>
<div id=”content_part”>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
before<br/>
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
after<br/>
BLA<br/>
BLA<br/>
</div>
</body>
</html>
[/code]

When you run this, the list will be invisible or party visible only (tested in IE 5.5 and 6.0).

Has someone ever had the same problem, and is it possbile to get drop downs working on a scrollable transparant div?

Thanks in advance.

Regards,

Kees van Dieren

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzSep 24.2005 — The filter property seems to be causing that.

You should also test in good browsers like [url=http://www.mozilla.org/products/firefox/]Firefox[/url] and [url=http://www.opera.com/]Opera[/url].
Copy linkTweet thisAlerts:
@keesvandierenauthorSep 26.2005 — Thanks for your reply.

It works in Firefox. However, most visitors use Internet Explorer so it should work in IE also.
Copy linkTweet thisAlerts:
@KravvitzSep 26.2005 — Huh? It works fine in IE if you make the change I suggested.
Copy linkTweet thisAlerts:
@keesvandierenauthorSep 26.2005 — Sorry,

I knew that the filter causes it. I thought you suggested the visitors to use Firefox as a solution ?.

The filter is required, to make the scrollbars transparant. There is a background behind the div which has to be visible throught the scroll bars. Is there another way to make this background visible through the scrollbars?

Thanks very much
Copy linkTweet thisAlerts:
@keesvandierenauthorOct 01.2005 — I've fixed it by creating my own select tag implementation with dom.

[URL=http://flexexpress.resulting-it.nl/werkzoekenden/inschrijven/]Click here[/URL] to see it in action (field "opleiding").

It currently only works good in IE, have to make it work in FF. Keyboard navigation also is not implemented yet.
Copy linkTweet thisAlerts:
@KravvitzOct 01.2005 — Well it looks good in IE, but what happens to the 10% of users who use a browser that does not have JavaScript enabled?
Copy linkTweet thisAlerts:
@LJKOct 02.2005 — Hi -

"I thought you suggested the visitors to use Firefox as a solution."

They didn't, but I will ;-)

or at least you could,

for development, to

make sure that everyone

else can view the site w/out

all the proprietary coding

making that a difficulty.

El
Copy linkTweet thisAlerts:
@keesvandierenauthorOct 03.2005 — Thanks again for all the feedback!


Hi -

"I thought you suggested the visitors to use Firefox as a solution."

They didn't, but I will ;-)

or at least you could,

for development, to

make sure that everyone

else can view the site w/out

all the proprietary coding

making that a difficulty.

EL
[/QUOTE]


I've made it an IE only feature, since the normal select works well in Firefox.

Well it looks good in IE, but what happens to the 10% of users who use a browser that does not have JavaScript enabled?[/QUOTE]

If javascript is not enabled, it should show the normal select. In the XHTML the select wit its options are added. With DOM the select including its options is used to collect the data, and replaced with the dynamic selection list.

For those who are interested: the /js/list.js and /css/list.css are used to render the list.

This means it will still be crap for users that have javascript disabled AND use IE.
×

Success!

Help @keesvandieren spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...