Log in

View Full Version : 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:


<!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
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.


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):


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

Oh, and by the way, this:


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


should technically come after the title tag.

Go Sussex!