homepage Welcome to WebmasterWorld Guest from 54.198.42.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Border-radius and opacity in Internet Explorer
Lorel




msg:4311473
 5:46 pm on May 12, 2011 (gmt 0)

I have a website with a colorful image for the background. Over that I have a semi-transparent box with text inside of that.

It works fine in all modern browsers on Safari, Firefox, Opera on the Mac and Firefox on Windows, but IE 6 and IE 8 there is no background under the text at all. I've tested several methods to do this but none of them work in IE.

Here is the code I'm currently using - supported by CSS3.


#content4 {
width:900px;
margin:0 30px 0 30px;
border:1px solid #000000;
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6; }

Can someone tell me how to get this to work and if not then at least get a plain background in Win IE 6 and Win IE 8 and still show the semi-transparent background in other browsers?


I also tried this one with the same results.

#content6 {width:900px;
margin:0 30px 0 30px;
border:1px solid #000000;
background:rgba(255,255,255,0.6)

 

alt131




msg:4311774
 11:38 am on May 13, 2011 (gmt 0)

Hi Lorel, I wonder if there is something else in your code - the first ruleset works for me in ie6-8, plus other browsers/versions. (ie<9 doesn't understand rgba, so the second ruleset won't work.)

When you said "there is no background", did you mean none of the background-image colours are visible behind #content4, or is the "transparency" not "noticeable"? Recalling opacity applied to white over white won't have any visible result, and 60% can be hard to notice if the text is black.

Another option is to modify your first ruleset to use rgba instead of opacity:
Assuming your html is something like:
<p id="content4">My para</p>

#content4 {
width:900px;
margin:0 30px;
border:1px solid #000;
/*for ie - rgb must appear first so it is over-written by rgba for understanding browsers */
background-color:rgb(255,255,255); /*or background-color:#fff; */
filter:alpha(opacity=60); /* Supposedly different filter syntax is required for each ie version, but this seems to work for ie>5.5 . Also note filters only apply to elements with haslayout - not required here as already triggered, otherwise:
zoom:1; */
/*for other browsers */
background:rgba(255,255,255,0.6);
}

Does any of that help?

Lorel




msg:4311931
 3:53 pm on May 13, 2011 (gmt 0)

Hi Alt131.

I tried your code and it still works on the Mac and FF on PC but not IE6 or IE8. However this time I noticed the semi-transparent background in the box shows up for a split second when I refresh the page but then disappears.

To explain further: I have the background image of a rainbow on the background of the whole page then 2 semi-transparent boxes overlaying part of that so the rainbow shows through around the edges. I also have roundcorners on the boxes which I forgot to mention last time.

When I said there was no background I meant the boxes with semi-transparency show no background at all in IE; only the black text shows up on the page. The boxes show up with rounded corners and semi-transparent background in all browsers but IE and the color and shade of transparency is just as I want it. The main background image is fine but when the semi-transparent background in the overlaying box doesn't load then I can hardly read the text because the background image is pretty dark and thus I need a background in the boxes.


Here is the CSS:

#container {width:960px;
margin:0 auto 0 auto;
background-image: url(images/stars-bg2.jpg);
background-repeat:repeat-y; }

#content4 {
width:900px;
margin:0 30px 0 30px;
border:1px solid #000000;
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6; }

.roundcorners {
border:1px solid #000000;
border-radius:10px;
-moz-border-radius:10px; /*firefox*/
-webkit-border-radius:10px; /*safari n Chrome*/
-khtml-border-radius:10px; /*Linux*/
behavior:url(border-radius.htc); } /*so IE will work*/


Here is the HTML:

<div id="content4" class="roundcorners">
Blah<br>
Blah<br>
Blah<br>
</div>

Can you see a conflict in the above?

BTW I ran the W3C validator using CSS3 and it threw a whole lot of errors for the content box- all related to the new rgba and pseudo elements and -moz opacity etc. The rounded corners code doesn't validate either (Property -moz-border-radius doesn't exist, etc.) however the HTML validates.

Thanks for trying to help.

rocknbil




msg:4312005
 5:38 pm on May 13, 2011 (gmt 0)

Not willing to go old school with it and use a 1 x 1 pixel transparent .png instead? :-) It's not latest tech but it's lightweight and gets the job done.

alt131




msg:4312270
 5:22 am on May 14, 2011 (gmt 0)

Hi Lorel, thanks for that. My only suggestion is to move border-radius below the proprietary code so later versions of understanding browsers aren't confused.

Just to check - to reproduce your code I've nested #content4 inside a <div id=#container"> with a dark coloured background-image. All worked as designed (less rounded corners) until I used the .htc from g code - is that the one you're using?

If so, the issue is the .htc. In rough summery it uses javascript to create a new element, microsofts vml to mess with fill and stroke to create the effect of a round corner, then adjusts position and z-index to stack the target and parent elements. The "clue" is the flash of correctly styled content - which is the time-lapse as the .htc loads. Also that transparency works as designed until the htc is applied.

The issues
Two issues here. The first is that you are applying two transforms to the same element. That means the .htc destroys the transparency applied by the filter. This is a known issue.

The second is stacking issues. The rounded corners are there, but stacked behind the background-image on #container. SuzyUk and I looked at stacking last year, and I concluded there is a direct contradiction in the recommendations. Unfortunately that doesn't help when using a script written to deal with what are commonly of as "errors".

Partial solution
Did you search on this? The .htc has a history and the usual complex "fixes". But you can achieve rounded borders in ie6 and 7 by setting position:relative on #container. ie8 needs z-index:0 as well. (I suggest a conditional comment to keep all this away from ie9 and other browsers.)

However, the issue of multiple "transforms" means the "transparency" is destroyed and leaves .content4 with an opaque background. That makes it readable - but doesn't deal with the original issue.

I tried additional elements, then "splitting" the components of the .htc to find a solution. But (all credit to the author of the .htc) that's trying to fix problems caused by code that has been written so it creates them. Better to avoid them to start. I also tried other libraries, but on this code, a similar result.

Practical
I think the desired effect is doable, but probably requires a combination of javascript/microsoft filters and extra elements, for example setting the transparency and rounded corners on different elements, then "layering" them using positioning. So I would ask if it is critical to have rounded corners as well as opacity in legacy browsers? Unless you can find an existing library that works, this requires a bit of work, and will create code maintenance issues for the future.

Another thought was to identify how much advanced css you plan to use in the code, and if a lot, consider something like ie9.js. It might be possible to use pseudo elements which avoids adding elements to the html. But note I haven't tested to see if that overcomes the issue of being unable to set a transform on a pseudo independent of the parent - and I suspect not.

Finally, if you must, a slight variation on rocknbil's suggestion is transparent images in each corner of an element to simulate rounded corners. cssplay has less complex demonstrations using alpha transparency on a single png to create images with an oval frame.

Lorel




msg:4312411
 3:14 pm on May 14, 2011 (gmt 0)

Thanks alt, I will do some experimenting with what you offered.

And thanks RockingBill -- I'll try a one pixel image.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved