More Transparency Issues

**scrumarf** · 11-20-2008, 07:23 PM

Hi

I know others have asked similar questions elsewhere in the forums. I've tried most of the suggestions made in those threads but without success.

I'm trying to make div backgrounds transparent. I've succeeded in Mozilla and Safari, haven't thought about Opera but continue to fall flat on my face with IE. I've a main div with an image background, inside which I want to place two other divs with transparent white backgrounds.

My layouts are CSS-based and here's an example of the code I'm trying to get to work. I've tried so many of the different solutions suggested here that it now looks messy code. Happy to listen to others' suggestions.

#righttop {
position: absolute;
min-height: 330px;
max-height: 330px;
display: inline-block;
opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */;
min-width: 250px;
max-width: 250px;
padding: 5px 5px 5px 5px;
color: #217DDE;
z-index: 1;
right: 6px;
-moz-border-radius: 15px 15px 15px 15px; /* Mozilla rounded corners */
float: right;
background: #FFFFFF;
}

Thanks in anticipation.

Matt

**Medyman** · 11-21-2008, 05:53 PM

I'm really confused as to what you're trying to do. Do you want an image as the background, solid color, or nothing? "Transparent white" background is a bit of an oxymoron.

**traq** · 11-22-2008, 03:27 PM

do you want it partially transparent?

**scrumarf** · 11-24-2008, 11:00 AM

I'm after an opaque white background at about 70% opacity hence the code for both transparency and background colour. As stated, it works on firefox and safari but not on IE.

**jscheuer1** · 11-24-2008, 04:06 PM

Your css appears to work in IE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background: #000;
color: red;
text-align: right;
}
#righttop {
position: absolute;
min-height: 330px;
max-height: 330px;
display: inline-block;
opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */;
min-width: 250px;
max-width: 250px;
padding: 5px 5px 5px 5px;
color: #217DDE;
z-index: 1;
right: 6px;
-moz-border-radius: 15px 15px 15px 15px; /* Mozilla rounded corners */
float: right;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="righttop">
</div>
some text here to test opacity of the division
</body>
</html>

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**scrumarf** · 11-25-2008, 05:54 PM

Thanks for your help. Perhaps it's my html that's causing the problem then. Here's a link to the page in question.

http://www.lerygbi.co.uk/sussexalt.html

Matt

**jscheuer1** · 11-25-2008, 09:46 PM

Well, you know you are not going to get those rounded corners in IE unless you use a fieldset (limited utility for that, no control over the amount of curving) or special css routines (optionally driven via javascript) to achieve them. But other than that, once I removed:

This website is best viewed with Mozilla Firefox, which you can download for free at www.mozilla.com. Last updated at 14:00 on 15th November 2008

's element from the document (set its display to 'none') things looked fine in IE 7. The partially opaque division was a bit narrower and taller in IE 6 (that could be fixed with conditional style). So I'm sort of scratching my head as to what the problem really is. What version of IE are you using? Not IE 5 Mac, I hope. If you are using IE 8, there is a way to get it to render like IE 7, which would work well for your page.

As a side note, on those rounded corners, there is a:

-webkit-border-radius

property in Safari that is similar (not identical, though there is some overlap in its usage) to the -moz-border-radius property. It may be used to achieve the same sort of effect, but may or may not require a different syntax to achieve the same look.

**scrumarf** · 11-26-2008, 11:00 AM

Hey

Many thanks once again. Did what you suggested and removed the'Best Viewed With Mozilla' bit - though not sure why that would make a difference - by setting it to display: none; in the css.
It still displays as I wanted it to in safari and mozilla but the problem may be that while I use firefox as my preferred browser but try things out in IE as most people use it, I've got IE8 installed. Could this be the issue?

Thanks

Matt

**scrumarf** · 11-26-2008, 12:33 PM

Having reinstalled IE7 it displays correctly. However there's still the issue of IE8 when that comes online. Any suggestions - and thanks for your help.

Matt

**jscheuer1** · 11-26-2008, 03:32 PM

Originally Posted by jscheuer1

If you are using IE 8, there is a way to get it to render like IE 7, which would work well for your page.

Originally Posted by scrumarf

However there's still the issue of IE8 when that comes online. Any suggestions

Sure! Just place this meta tag right before your title tag in the head of your page(s):

Code:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Oh, and by the way, this:

Code:

<link rel="stylesheet" type="text/css" href="sussexstyle.css" media="screen" />

should technically come after the title tag.

Go Sussex!

Thread: More Transparency Issues

Thread Tools

Search Thread

More Transparency Issues

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to traq For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions