[Tact]

ok i looked at your source...wow you used css to make a shadow of an image? that's neat. i didn't know you could do that. i would have used photoshop to do that and then simply have a revamped image. but then that wouldn't help the semi transparent thing at all. it'd make it worse. but seeing as how you were able to make it to begin with, surely some of the above codes might do it.

[B-fly]

well.... dynamicdrive-dot-com is my biggest friend

[nettkkr]

Hey i found out that if you use the <span> tag within the opacity and set your css to the following it will work to show full opaque text...

<style type="text/stylesheet">

span
{

filter: alpha(opacity:100);

position: relative;

}

</style>

I know for sure this works in IE. However i tried inserting within both the opaque areas and the text areas the -moz-opacity: 1; and it doesn't work with mozilla firefox. Does anyone know how to get it to work with firefox?

Dan

[tGoM]

has anyone found a fix for firefox for this yet? sorry to sound impatient or impolite but i've been searching for hours.

[Tact]

whats the exact problem? i never bother making sure my code is good for anything other than IE. (this was good back in the days when the world used nothing but IE. but now...)

so does ff simply not support it or you think it does but not sure how?

i'm sure ff is like any other browser where you can prolly list supported things on a table like


thing || ie || ff || opera
css || yes || maybe? || not sure
java || yes || should || also should
flash || yes || most likely || who knows


i've seen those once in a while. i use em to determine which one is more worthy of coding for. i always go with IE.


anyway. since i don't know anything about ff. i dont know whether it supports it at all. if it does, and you can't get it to work, then i have no idea. O_o

[Mushoo]

Ok, I was really excited when I saw this board, and read through some of the previous posts and thought that Tact had the exact problem as I do now, so it would be very very appreciated if someone could help me with this irritating problem as i am a complete dumbo when it comes to html/css editing.

New to the website called IMVU, they did prompted me with an option of using CSS or HTML to spice up our homepages. What I wish to create is a simple semi-transparent White background box(with a border, hopefully) with Opaque text in it, which hopefully works in most browsers.(but with FF and IE as first priority.) How do I go about doing this? Or can someone help me in doing so? HTML would be prefered, but CSS is very welcomed too.

Thanks in advance..

[tGoM]

i found a way to do it for both ie6 and ff, not sure about ie7. i used spans and css.
if you know how a span works you should be able to get it. if not just ask and i can post the code i used.

though i haven't mastered the alignment completely, it still looks good just not exactly where i wanted it.

[Tact]

yah. give me a min to re-read this thread. this was a long time ago and whatever code i ended up using i still have on. (never changed it again afterwards cause it was so hard to make it work that when i finally did, i never wanna touch it again. )

let me check if i posted it. if not, i'll give you what i used. i do remember i was at one point looking at 3 diffrent methods testing each one to see which one i liked best. in the end the trouble was just me being nit picky about things that were off by 1 pixel and i used a workaround for this teeny image that was bugging me so you prolly won't struggle that much with it.


brb whilst i skim over the thread again.


ok. if i remember correctly. it looks like after a ton of work, i ended up going with creating the ILLUSION of what i wanted to accomplish but not the actuall thing? wierd. let me double check my site. it's offline though cause it was more of a hobby and i dont' wanna pay for hosting but i always have it on my hdd.


*back after some remembering of what i did*

ok. i remember now. yah. i was right. i gave up on it after a while and did a simple workaround of making it LOOK like it was transparent by cropping out the secion in the box i wanted and faded it in photoshop. it was the only way of making sure the text stayed opaque. i remember i didn't want to resort to that, but every other idea wasn't working for me.


here's me quoting myself

so that's what it was. man. and to think that i already went through hours of trouble making it work by using a background image in the iframe to look like its still teh background image in the page. which i should have prolly done int he begining but didnt want to.

if i'm not to tired, i'll definately test it or isntead use it on somthing else cause i'm already done with that section on my site. lol. thanks though. i'm even more sure this will work if i ever need to apply such a setting again.

but for now. i'm satisfied wtih what i've done so far.

yah. basically i lost. lol. but the solutions given afterwards seem very promising. have you tried those?

if your background never moves, you can use my workaround. but if it does, then you'll definately need to try the solutions here. i think i actually made one work for another site i made. it ended up giving me an ugly scrollbar though if i remmeber. don't know if i fixed that...

if your box moves WITH the page, should be even easier. you prolly wouldn't even need the transparency at all. just make it look like its see through. easiest way imo.

btw is your box an iframe or something? cause that's what i tried to apply it on. i love iframes. even thoug they tell me not to use em cause not all browsers support em or whatever. whatever. i like em.

[tGoM]

here's the fix i came up with, although positioning isn't the way i wanted, i'm no css master.

div.trans {
	background-color:#14003a;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
span {
	position:absolute;
	margin-left:5;
	margin-right:5;
	margin-top:3;
	margin-bottom:3;
	word-wrap: break-word;
}

<span name="header_span" id="header_span">Title or something goes here... <br>logo here maybe</span><div name="header" id="header" class="trans"></div>

this was in a td with it's own name and id tags, then i used javascript to resize the div to make it match the span or td height. could prolly just use the span height though.

hope this helps ...

[MikeyB]

heya

have been persuing the same problem myspef for the past few days

in the end, the only way I found to do it was to create two <div> layers, and put exactly the same table in each. I gave one the <div style = "filter: opacity (50);"> treatment, and set the table cells to have a solid background colour. The other I gave no transparent style to, but put all of my text/images in. Hope that helps anyone else with the same problem. you can see the result at www.v-69.co.uk/pscu/index.html

the <span style="position: relative"> trick also works, but only in IE, not firefox :-(

Mikey

[Lady-Rosesharana]

I found this thread on google. There is a site called IMVU and I have seen many pages with semi transparent sectional backgrounds and images. I have looked through their source button to try to pick it out and failed. I have tried these codes and none have worked. help?

[MMJ]

Lmao, this thread doesn't seem to die.

[Shiggity]

that's because after four years, no one has had a good answer.

[hi_itsme]

I'm not sure... are you still in need of an answer.
I don;t know if this will work, but I suspect that this might work...
First, you have to use both
filter: alpha(opacity=60);
AND opacity:0.6;
so the opacity will take in multiple browsers. (I think you know that, but...)
If your text is still being affected by that declaration, why don't you try nesting a div for the text. Like <div id="something"><div id="text">...</div></div>
Give #something an opaque background.
Then, #text can have background: transparent; and color: #foo;
I don't know, that's my best guess...

[Pierre Geroudet]

Hi

Why dont you use background-color: transparent ? in your frame. And if you want a fader, just put an other div which will herit ? I know this works with ff and opera. No idea for Ie.