Transaprent div - how would you code this?

HTML & CSS
1

Hi Guys,

Can you advise on the best way to code this transparent div (not the brown pattern background)?

I’d like to have the images in the top left and bottom right of the div, and get it working in the most browsers where possible.

Thanks in advance

2

Hi,

I’d use rgba for modern browsers (ie9+) and an opacity fix for ie8 and under.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background:red }
.wrap {
	background-color:#fff;/* fallback */
	background-color: rgba(255, 255, 255, 0.50);
	width:300px;
	padding:20px;
	margin:auto;
}
</style>

<!-- fix for ie8 and under -->
<!--[if lte IE 8]>
<style type="text/css">
.wrap{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.inner{position:relative}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->

</head>
<body>
<div class="wrap">
		<div class="inner">
				<p>Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.</p>
		</div>
</div>
</body>
</html>
3

Thanks very much for your reply.

I’ve tried your code, but cant get trans in IE.

Can you help?

http://www.vhairandbeauty.co.uk/beauty/

Many thanks

4

Hi,

It seems to be working in IE7 - 9 for me. What are you seeing? Or am I looking at the wrong thing :slight_smile:

5

Thanks again for the reply:

I get this in IE 7:

The background of the div doesn’t appear, I would like to see a grey/ white transparent colour, like in FF

Thanks again

6

It’s working in IE8 ok but I can see that IE7 has failed and so did my original.

I’ve moved the fallback rule into the IE only styles and added a haslayout trigger for the inner and my code is working in IE7 and 8 now ok (even works in IE6).

You can see it here.

Copy my new code and try again.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { background:red }
.wrap {
	background-color: rgba(255, 255, 255, 0.50);
	width:300px;
	padding:20px;
	margin:auto;
}
</style>

<!-- fix for ie8 and under -->
<!--[if lte IE 8]>
<style type="text/css">
.wrap{
	filter:Alpha(Opacity=50);
	background-color:#fff;/* fallback */
}
.inner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->

</head>
<body>
<div class="wrap">
		<div class="inner">
				<p>Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.Lorem Ipsum dolor sit amet.</p>
		</div>
</div>
</body>
</html>
7

Thanks again for your reply:

I get a solid white background with IE7.

http://www.vhairandbeauty.co.uk/beauty/

I can live with that though! :slight_smile:

Thanks you so much for your help really appreciate it.

8

Did you add the second part of the IE style? I don’t see it.


.inner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
9

Actually you copied the rules incorrectly.:slight_smile:

They should be this:


<!-- fix for ie8 trans and under -->
<!--[if lte IE 8]>
<style type="text/css">
#colLeft{
	filter:Alpha(Opacity=50);
	background-color:#fff;/* fallback */
}
.contentinner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->
10

Thanks again Paul really apreciate it.

I’ve copied that exactly, I’ve changed the class name but its exactly the same.

Can’t get a background in IE 7 still, the fallback doesnt seem to work.

Thanks again

11

Hi,

The conditional comments are still broken in your live site:)

You have this:


<!-- fix for trans ie8 and under -->
<!--[if lte IE 8]>
<style type="text/css">
[B].contentinner{	[/B]
#colLeft{
	filter:Alpha(Opacity=50);
	background-color:#fff;/* fallback */
}
.contentinner{position:relative;zoom:1.0;}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->

It should be this:


<!-- fix for ie8 trans and under -->
<!--[if lte IE 8]>
<style type="text/css">
#colLeft{
	filter:Alpha(Opacity=50);
	background-color:#fff;/* fallback */
}
.contentinner{position:relative;zoom:1.0}/* stops opacity from reaching text in IE*/
</style>
<![endif]-->

It should be possible to make it work in ie7 and under as my demo is working ok.