Solved

Transparent background <div> in i.e.

Posted on 2007-11-20
3
1,423 Views
Last Modified: 2013-11-19
Hi.
Anyone who can show me how to create a div with a transparent background, not transparant text, that works well with i.e?
I've tested with the following code. It gives me transparent background and transparent text in Firefox, but nothing in explorer.

Hope you can helpe me.
Best regards
Kristian
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<!--
.forside_bilde {
	float: right;
	width: 450px;
	height: 338px;
	vertical-align: middle;
	background-image:url(Illustrasjoner/Tp_09.jpg)
}
#forside_bilde_tekst {
   background: green;
   filter:alpha(opacity=40);
   -moz-opacity:.40;
   opacity:.40;
}
#forside_bilde_tekst h1 {
	color: #0000FF;
	filter:alpha(opacity=100);
   -moz-opacity:.100;
   opacity:.100;
}
-->
</style>
</head>
<body>
<div class="forside_bilde">
        <div id="forside_bilde_tekst"><h1>testText</h1></div>
 </div>
</body>
</html>

Open in new window

0
Comment
Question by:kristian_gr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 21

Expert Comment

by:jvuz
ID: 20318471
Which version of IE are we talking about?
0
 
LVL 21

Expert Comment

by:jvuz
ID: 20318473
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 500 total points
ID: 20321393
Hello kristian_gr,

Try the following page...

I hope this helps!

oceanbeach
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html</title>
<style type="text/css">
.box {
position: relative;
width: 450px;
height: 338px;
vertical-align: middle;
}
.transparent {
background: green;
position: absolute;
width: 450px;
height: 338px;
filter:alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity:0.40;
opacity:0.40;
}
h1 { color: #0000FF; }
</style>
</head>
<body>
<div class="box">
  <div class="transparent"></div>
  <h1>testText</h1>
</div>
</body>
</html>

Open in new window

0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question