CSS - Transparent Iframe In Safari?

Dear all,
I am really stuck on this.
I cannot use an alternative, I have to use png.
I must have transparency. As you know, IE6 doesn't 'do' transparent png.

I have tried three different hacks and I cannot get any of them to work.
I am a good traditional developer, but fairly new to web development.
Terribly frustrated that I don't seem to be able to get even one of these hacks to work.

Please do you know the link to a page that has an easy to follow png hack for IE6 that you know to work? At this point, anything goes, as long as it works!
Best
Jo

Ok so I have a vertical menu, with menus that pop to the side... it looks fine in every browser except IE. For some reason, the pop up menus become transparent in IE.

Relavent CSS:
#nav, #nav ul {/* 1st level ul */
padding: 0;
margin: 0;
list-style: none;
float: left;
background-color: #000000;
width: 130px;
}

#nav li {/* 1st level li */
position: relative;
color: #ffffff;
font: bold 12px arial;
padding: .3em 0em .1em .3em;
border-top: solid 1px #ffffff;
}

#nav li ul {/* 2nd level ul */
margin: 0px;
padding: 0px;
list-style: none;
position : absolute;
left: -999em;
background-color: #CCCCCC;
}

#nav li ul ul {/* 3rd levl ul */
margin: 0px;
padding: 0px;
list-style: none;
position : absolute;
left: -999em;
background-color: #CCCCCC;
}

#nav li li {/* 2nd & 3rd level li */
position: relative;
color: #000000;
border: solid 1px #000000;
padding:3px;
font-family:arial;
font-size:10px;
text-decoration:none;
}

/* and some link styles */
#nav li li a {
display: block;
color: #000000;
text-decoration: none;
}

#nav li:hover, #nav li a:hover, #nav li.sfhover {
color: #000000;
background-color: #E5F5E9;
}

#nav li li:hover, #nav li li a:hover, #nav li li.sfhover {
background-color: #F58219;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {/* lists nested under hovered list items */
top: 0px;
left: 9.1em;
voice-family: "\"}\"";
voice-family:inherit;
left: 10.4em;
z-index: 1;
}

referring to:
<ul id="nav">
<li><img src="contents/images/navarrow.gif" border="0" />Content For ...
<ul>
<li><a href="/community/864/Builders/23414.html">Builders</a></li>
<li><a href="/community/864/Remodelers/23415.html">Remodelers</a></li>
<li><a href="/community/864/Architects/23416.html">Architects</a></li>
<li><a href="/community/864/Suppliers/23417.html">Suppliers</a></li>

<li><a href="/community/864/Consumers/23418.html">Consumers</a></li>
<li><a href="/community/864/Manufacturers/23419.html">Manufacturers</a></li>
</ul>
</li>


example:
http://www.housingzone.com/index.asp?layout=news&industryid=23414

I am trying to use the IE workaround for PNG transparency (using the alpha filter).

The trouble is it only seems to work on a fixed size image. Is there any way to successfully apply it to a repeating background? I can't seem to find any info on that so I am guessing it can't be done

Hey guys,
I'm going to try an explain my problem as brief as possible. Okay, so, my wrappers/containers aren't showing up with my desired background color properly using Firefox 3. Could you guys look at the code below and possibly help me out? Thanks!

index.php:
Code:

<div id="wrapper" class="content">
		<div class="col1">
			<h2 class="title">Top Stories</h2>
					<div class="inner">
						<img src="images/featured_image.gif" class="featured" width="256" height="146" alt="" />
						<h1><a href="#">Non Feugiat Egestas</a></h1>
						<p>Urpis in nec eleifend duis orci id, per felis libero, 
						mattis nec qui eu porta ipsum. Felis amet porta ac 
						convallis nostra aliquam, sed faucibus, fringilla ut 
						donec lacus et. Felis nec, nullam eleifend porttitor 
						dignissim. Rutrum fermentum vitae. In enim arcu velit 
						neque, venenatis netus, donec leo facilisis, odio 
						gravida sed scelerisque.</p>

						<ul><li><a href="#">Full story</a></li></ul>
					</div><!--/inner-->
			
			<img src="images/add-account-button.gif" class="button" />
			<img src="images/its-price-button.gif" class="button" />
		</div><!--/col1-->
	
		<div class="col2">
			<h2 class="title">Section Title</h2>
			<div class="news">
				<h3>Vim saperet dolores ea</h3>
				<p>Nusquam alienum accusamus nec te, vel ei velit tibique 
				vituperata, nec id soleat recusabo deterruisset. Vim no scripta 
				iuvaret principes, nam vocent expetenda sadipscing ei, detraxit 
				takimata indoctum ne ius. Et vitae maior um appareat eos, sed an 
				etiam voluptua pertinax. Sit puto iusto fabellas ea, admodum 
				deseruisse vel ne. Mei ei mazim mandamus percipitur, ius ad 
				numquam delenit gloriatur, ea esse consul timeam duo.</p>
				
				<p>Sea nullam saperet adipisci ad, noster mentitum recusabo his 
				eu. Soleat incorrupte ex sea, kasd dicit atomorum eu mei. Cu 
				mutat blandit ius, nec ex brute etiam falli. Sit an homero 
				salutatus, cu usu dicant volutpat splendide. In qui legimus 
				veritus pericula, nusquam abhorreant te vel, vivendo fierent 
				instructior ei eum.</p>
				
				<p>Eu lorem dictas adversarium qui, soleat verear philosophia 
				an vix. Vis adhuc paulo gubergren no, pri ex voluptua invenire 
				forensibus. Eum te laoreet suavitate abhorreant, eu sit mutat 
				iudicabit voluptaria. Pri falli utamur electram an, in periculis 
				forensibus comprehensam qui. Ius omnis tibique cu, te sint dicant 
				pri, viderer indoctum torquatos ad quo.</p>
				
				<h3>No tota tempor persius</h3>
				<p>Prima deseruisse necessitatibus nec an. Nec eius labores 
				copiosae ad, posse nihil voluptua at sea, altera aperiam alienum 
				has ex. Tantas putant nec et, per ea semper mediocrem. Ex 
				eripuit imperdiet, pri ex quem eros epicuri, ius sonet meliore 
				ei. Decore graeco maiorum at vel, ex mediocrem quaerendum sed, 
				cum sonet detraxit convenire in. Eu quando soluta indoctum vim, 
				vim zzril numquam vivendo et.</p>
				
				<p>Sea alterum antiopam te, minim postea his te. Has utinam 
				dissentias in, enim aperiam sententiae eum cu, eu iusto iuvaret 
				senserit his. Saepe suavitate efficiantur ea pri, sea ne elit 
				ullum, vix in saperet oporteat. Laudem salutatus vis eu. No tota 
				tempor persius has, ne erat altera maluisset quo. Fuisset 
				iudicabit dissentiet te cum, te dignissim democritum 
				signiferumque vix, in vix fierent oportere imperdiet.</p>
			</div>
		</div><!--/col2-->
		
		<div class="col3">
			<h2 class="title">Quick Links</h2>
		</div><!--/col3-->
</div>

style.css:
Code:

#wrapper {
	margin: 0px auto;
	padding: 0px;
	width: 1024px;
	text-align: left;
	background: #fff;
	display: block;
}

#header {
	margin: 0 auto;
	width: 1024px;
	text-align: right;
	padding: 20px 0 20px;
}

.content {
	background: #fff;
	display: block;
}

.col1 {
	float: left;
	width: 282px;
	padding: 15px 10px 25px 10px;
}

.col1 img.button {
	padding: 10px 0 0 0;
}

.col2 {
	float: left;
	width: 400px;
	padding: 15px 10px 25px 10px;
}

.col3 {
	float: left;
	width: 282px;
	padding: 15px 10px 25px 10px;
	background: #eeeee8;
}

.col1 .inner {
	position: relative;
	padding: 9px 6px 0 6px;
	border-top: solid 1px #666;
	float: left;
	display: inline;
	background-color: #eeeee8;
	text-align: center;
}

.col1 .inner a {
	margin: 0;
	padding: 0;
	text-align: left;
}

.col1 .inner a img {
	margin: 0;
	padding: 0;
	text-align: center;
	margin: 0 auto;
	background-color: #eeeee8;
	border: 1px solid #eeeee8;
}
/* border is a hack to remove white shadow at bottom of image QB #3851 */

.col1 .inner h1 {
	margin: 0;
	padding: 7px 0 4px 0;
	text-align: left;
}

.col1 .inner h2 {
	margin-top: 0;
	margin-bottom: 0;
	background-color: #eeeee8;
	text-align: left;
}

.col1 .inner p {
	margin-bottom: 5px;
	text-align: left;
}

.col1 .inner ul {
	padding-bottom: 0 6px 5px;
}

.col1 .inner ul li {
}

.col1 h2.title {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #666;
}

.col1 .inner h1 {
	font-size: 18px;
	font-weight: bold;
	color: #003bb0;
	padding: 0 6px 0 6px;
}

.col1 .inner h2 {
	font-size: 11px;
	font-weight: bold;
	color: #000;
}

.col1 .inner p {
	font-size: 12px;
	line-height: 1.5em;
	color: #333;
	padding: 0 6px 0 6px;
}

.col1 .inner ul, 
.col1 .inner ul li {
	font-size: 12px;
	font-weight: bold;
	color: #003bb0;
	list-style-image: url(../images/more_arrow.gif);
	text-align: right;
}

.col1 img.featured {
	border: 1px solid #000;
}

/*========= COLUMN 2 =========*/

.col2 h2.title {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #666;
	padding: 0 0 10px;
	border-bottom: solid 1px #666;
}

.col2 .news {
}

.col2 p {
	font-size: 12px;
	font-weight: normal;
}

/*========= COLUMN 3 =========*/

.col3 h2.title {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #666;
	padding: 0 0 10px;
	border-bottom: solid 1px #666;
}

Hi,
I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file:

Code:

.dataContainer {
	background-image:url('/images/transluscentbg.png');
	*background: none:
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale');
	padding:10px;
}

and call it he
Code:

<html><head>
<link rel="stylesheet" type="text/css" href="styles/kr.css" />

<meta name="description" content="">
	<meta name="keywords" content="">
<script src="rollover.js" type="text/javascript"></script>

</head>
<body id={$styleName|lower}>
	<!-- BEGIN OUTER WRAP -->
	<div id="bodywrap">
		<div id="logoSpace">
		</div>
		<!-- BEGIN MAIN CONTAINER -->	
		<div id="content">
	        <div id="contentBorders">
			<div id="mainContent" class="clearfix map{$mapNum}">
				<div id="navBar">

			<div id="innerContent" class="clearfix">
				{include file="nav.tpl"}
				<div class="goContent">
                                <div class="dataContainer">
               lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
lorem ipsum 
</div>
</body></html>

This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">).

Anyone have any idea why this might be happening and how i might be able to get the <div> to work?

Hey all, i'm trying to create pop up note box capabilities. My test example is using digg (dot) com's login box. If you go to the site click on login box will pop up.

And you will see the border around the box has a transparency to it. I've tried emulating it but to no avail.

PHP Code:
<a href='#' onclick="document.getElementById('notepad').style.display = 'block';">Open Notepad</a>

<div id='notepad' style='display:none; top:150px; opacity: 1;'>
    <div class='notepad_body'>
        <div class='notepad_content'>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
            Post a Note<br>
        </div>
    </div>
    <div class='notepad_footer'>
    </div>
</div> 





That is the html to generate the box which works fine... the only problem is the border is solid, then if I change the opacity it turns the entire div box with opacity.

Here is my css

PHP Code:
<style type='text/css'>
#notepad {
    left:50%;
    margin-left:-315px;
    position:absolute;
    width:673px;
    z-index: 100001;
}

.notepad_body {
    background:transparent url(testbg.jpg) repeat scroll 0 0;
    padding: 40px 13px 10px 40px;
}

.notepad_footer {
    background:transparent url(footer.jpg) repeat scroll 0 100%;
    height:23px;
}

.notepad_content {
    background-color:#FFFFFF;
    max-height:900px;
    width:550px;
}

</style> 





Does anyone have a clue on what I am doing wrong or what I can do to make the transparency work just on the border?

Thanks in advance

Ok, I am going to try to describe the best way I can my problem. Hopefully I can be pointed into the right direction. Here is my CSS:

div.background
{
width:850px;
height:1100px;
background:url(images/Sunrise.png) repeat;
border:2px solid black;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
margin-top: 35px;
padding-left:15px;
padding-right: 6px;
/* for IE */
filter:alpha(opacity=45);
/* CSS3 standard */
opacity:0.4;
}

div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}

I have a div.background box with an image and I want it to have a transparentency or opacity of 45. The text that is in my div.transbox p needs to be just like normal but my problem is is that when I view my page in the browser my text is also has a transparentency of 45. Not sure what is going wrong. Would someone be so kind to point me into the right direction?

Thank you,

Diana

yes my friend has on her site scrollable screen separate from the fixed background but in the code its listed

<style type="text/css">


table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:91A4F3;


now what would the optional choice of turning the transparent off?
opaque?

I have applied the Twin Helix PNG fix http://www.twinhelix.com/css/iepngfix/ to a site I am building. The fix works on my PNGs apart from the PNGs having an ugly 1px white border around each of the transparent images. I have set the css img tag to the following:

Code:

}
img {
        border: none;
	margin: 0px;
	padding: 0px;
}

However. The white borders still appear in Internet Explorer 6. Can anybody think of what might fix this problem? I have been trying to solve it for two days now. Thanks.

Hello,

I have a transparency applied to my main wrapper so the body area is semi-transparent to allow the background to show through:

http://www.tombraiders.net/katie/index2.html

The images, however inherit this property and I would like them to be normal. I tried making a class within the inner_wrap div with an opacity of 100% but it doesn't work.

I read somewhere that when you use this command it always inherits from the parent (which in this case has the transparency).

Anyone know a way around this? My style sheet is located here

Thanks

Hello,
Tried searching and couldn't find anything. I want my header's background to match that of the body. Essentially, a "see-through" header.

Shouldn't this be some easy markup?

Thanks.

Are there any workarounds to get a transparent png that is being used as a background-image to be affected by background-: position, attachment, or repeat.

This site says it's not possible:
http://www.satzansatz.de/cssd/tmp/a...ansparency.html

But Im hoping that over time someone has come up with a fix ...

Thanks, Mark

I have divs layering on top of each other, and they have background images (gifs). In Firefox, the transparency looks fine, but in IE the transparent areas are colored in. How can I fix this? thanks.