CSS transparency problem...

First of all hi!
As you can see I am new here so please forgive me if I do something wrong, as you can see in my introduction thread I am here to learn web design and programming, actually I almost finished studying html, xhtml and css but there is one thing that doesn't let me sleep , I have a problem with transparency in CSS but only in Internet Explorer, I made a test page which I use an example for remembering me if I forgot how to do it and it looks fine in all browsers but not in Internet Explorer, screenshots:

Firefox for example:


Internet Explorer 8:


As you can see the box with text is missing in IE 8...

Is there anyway to fix this?

I am pretty sure that you'll ask me for the code, I uploaded all files to rapidshare because it has 300 KB, hope that's ok so, here is the dl link:

http://rapidshare.com/files/273628836/css.rar

Code (markup):

and to be sure, I don't know if I have the permission to post rapidshare link, so in the case that I have to remove it, I uploaded the files to a server, so you can see here:

http://glupost.host22.com/2_prozirnost.html

Code (markup):

 

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 40;

Code (markup):

will get you the desired result in most browsers, including IE 7 and 8.

 

You have numerous errors in your HTML code, which may or may not be causing the problem.

First, you are sending IE6 and IE7 (and possibly IE8) into Quirks mode by not having a Doctype (I would use HTML4.01Strict in your case). That means IE doesn't follow the rules correctly, assuming that you page was built back in the days of Clinton's presidency and the thriving economy of the 90's : )

Second, you have code after the closing HTML tag. Put those scripts right before the closing </body> tag.

Third, as run KMC suggested, you will not get opacity working in IE8 without using the -ms prefix. However I do it this way:

#the element {
   -ms-filter:"alpha(opacity=50)"; /*this is IE8*/
  filter:alpha(opacity=50); /*this is IE6 and IE7*/
  -moz-opacity:0.5;/*for old Mozillas like FF2 and K-Meleon*/
  opacity: 0.5;/*everyone else*/
}

Code (markup):

There's also a -webkit and -khtml version for older version of Safari and Konqueror, if you feel you need them. I dunno if I'd even continue using the FF one, except that K-Meleon's engine still hasn't been updated and it's a valid browser.

You are stating opacity in your CSS :

   img.slika {
            opacity:0.4;
            filter:alpha(opacity=40);
        }

Code (markup):

but nobody in your HTML has the class of "slika". "Slika5" and "slika1" are completely different class names and they do not apply to "slika" at all.

I've temporarily put a screenshot of your page up here, to show that it's not a good idea to use an image background like that... see how the text spills out? My computer has its own default font sizes and resolution and your growing text ought to have a semi-transparent background that can grow instead.

Lastly, when content vanishes in IE, it's usually one of the more popular bugs. It might be due to Haslayout or the fact that you've tried to absolutely position something (maybe you did it so you could use clip... instead try overflow: hidden which also hides overflow) and then move it around with margins.

I'd remove all the absolute positioning, there's nothing there that needs it.
I'll bet if you set a width on the .okvir p that it will magically appear in IE (also after you add a doctype and fix your HTML errors). Setting a width on the p will trigger Haslayout which often brings back hidden content.

 

Only the doctype fixed it, the code after the </html> tag is not mine, it's added by the web hosting service, if you download the original files from rapidshare, you'll see that it's not created by me..

It worked fine for me without the -ms- prefix but I didn't know about that, so thank you for that, I'll add it...

Next thing classes, the last image has the class slika, the one who is transparent to has a style combined with actions (onmouseover , ... )

I know it's not very good, it was just made as an example to remember me how to do it, it's now looking good in IE but I'll remove the absolute positioning and do the other tips you mentioned, thank you very much but one more thing, the text going out of the box, I didn't added a font-size, If I add that, wouldn't that fix the outgoing text in you case?

 

Adding a font-size there, if you set it in px, might stop differences between machine, however even then, screen resolution and font differences (if I don't have your listed font, my computer will substitute the one it thinks is the base for that type of font) can still make the text pop out. Plus it's a better idea in general to set font sizes in something like em (there are people who need to enlarge text and IE6 won't enlarge px text... and it's ok if your page stops looking as good with large text, people who make text really really large are more worried about reading the content than seeing a pretty design).

The cheating way to fix this is to make a background image that looks like a semit-transparent version of your fishes image (so you take a copy of your fishes image and in photoshop or Gimp or whatever, make a semi-transparent layer above that, then flatten it into a regular (with no alpha transparency) image) and set that as the background of your <p>. If this new image is the same size as the current one (underneath) then as <p>'s text grows, so will the background image.

Then you'd use background-position to make p's image line up with the current image, which fakes a semi-transparent box sitting over the fish image.

For the border, give it to <p> as a border in CSS, instead of in the image.

IE8 no longer works with "filter" like IE7 did. Without the prefix, regular opacity doesn't work... though it might in an inline style in the HTML (I saw some of those too), but not in regular CSS. This was some decision Microsoft made, while still not supporting CSS opacity (roll eyes).

I wonder though if the old "filter" works in IE8 if it's set in "compatibility mode" where it tries to act like IE7?

IE7 still works with "filter" though. And, the order is important: the -ms line has to come before the regular "filter" line, otherwise IE7 stops working.

ok I missed that one : )

So you know for the future, most of the mouseover junk can be taken care of with CSS alone, which means your visitors don't have to run and load some bloated dreambeaver script. Scripts are needed when you want something to happen "on click".

Well, you can't do anything about that : (

Now that you have a doctype, you can validate your HTML at the w3c validator. Sometimes errors make pages break and sometimes they don't, so the goal is to make sure that as you continue writing your page, that you don't introduce errors. Also, sometimes an error looks ok in all current browsers, but then some new browser comes out and doesn't look good.

It's especially good for finding typos : )

 

ok, thank you for the detailed answer

and with that solved I am finished with CSS, prepare yourself to solve my Javascript problems in the future