Solved

Transparent background <div> in i.e.

Posted on 2007-11-20
3
1,419 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Put upload button on your image and change it 2 59
FIx alignment of two texts 1 26
Remove greater than sign 3 43
Angular2 app not loading Bootstrap properly 4 8
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now