|
CSS - Help Loose Transparency In Background Image - Ie 6/7/8
Hello,
I have uploaded the site to the following location. Note that I hid it behind another site. All files within the folder /w/ are for this site. I have created a design which depends on content blocks having a transparency. It looks great if FF and IE 9, but I am having trouble achieving the same effect in IE 6/7/8. Strangely enough when i load the page in IE 8 the transparency is displayed but as soon as I click on the standard error message alert - allow blocked content, it becomes solid black?!@#$% an example of CSS code for: Code: #header{
position:absolute;
top:1px;
width:875px;
height:80px;
margin:0 auto;
border:none;
background:url(images2/trans.png);
opacity: 0.95;
filter: alpha(opacity=95);
padding:20px;
border:15px hidden;
zoom:1; }
Code:
<!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"><!-- InstanceBegin template="/Templates/main_en.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="w6.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<!-- InstanceBeginEditable name="Background" -->
<body class="bg" id="start">
<!-- InstanceEndEditable -->
<div id="container">
<div id="header">
<div id="logo"><img src="images2/logo2.gif" width="370" height="120" style="border-style:none" alt="logo" /></div><!--end logo-->
<div id="nav" class="menu">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="vision.html">VISION</a></li>
<li><a href="products.html">PRODUCTS</a></li>
<li><a href="contacts.html">CONTACT</a></li>
</ul>
</div><!--end menu-->
<div id="language"><a href="home.html">EN</a><img src="images2/transparent_spacer.gif" width="5" height="2" style="border-style:none" alt="s"/><img src="images2/slash.gif" width="1" height="12" alt="line" style="border-style:none" /><img src="images2/transparent_spacer.gif" width="5" height="2" style="border-style:none" alt="s"/><a href="index.html">NL</a> </div><!--end language-->
</div><!--end header-->
</div> <--end container-->
</html>
Any tips would be welcome. Thanks a million Similar TutorialsHi folks, new to the forums, having a problem that I've never encountered (mostly because I shy away from using transparency in the first place). A client gave me a website that was based on a template. Basically, #sitename is a div at the top of the page and i placed a transparent.png as a logo in the top. displays fine in firefox, in ie it has a solid color where the transparency should be. I researched and found a hack, which you can see in my code: Code: #sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack? The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09 I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move. Here is one of the examples: Code:
#homepage-bar h2.construction {
position:fixed;
top:225px;
left:505px;
}
I tried changing to position: absolute; I also tried to use percentages on the left: I know this is easy, but I can't find the fix after googling for 30 minutes. Help! Code: div.top {
border: 10px solid #CCCCCC;
border-bottom-width: 0px;
padding: 0px;
background-image: url(menutile.jpg);
}
The code above yields this . It is uneven with the normal image, though both are the same size. I simply want to tile the bg image to the border even with the normal menu images. What am I doing wrong? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php I want to use php to get images from a database and display them as css background-image attributes I know that the css Code: #id { background-image: url ('path/file'); }
works (obviously) and the html Code: <img src='image-generator-script.php'> also works but the css Code: #id { background-image: url ('image-generator-script.php'); }
doesn't work for me. It seems as though it should work. Why place such a seemingly arbitrary limitation on CSS as only being able to display images from existing files? I've done lots of searching through documentation and on forums, but not found anything conclusive either way. A couple of people have said it works. But it doesn't for me. Is there some extra configuration step I'm missing? Does anyone know for a fact that it works? -- so I can know for sure that somewhere I'm making a blunder in my code. But the code is simple, and I don't see where it could go wrong. (As is always the case!!) I can see the image in the browser just by pasting in the script link to the address bar. I know that url() specifiers are relative to the location of the stylesheet, not the html document, but in this case the html, the css, and the php are all in the same directory. I can't see what I could be doing wrong, so it really looks like you can't do it. But why?? And why isn't it mentioned in the documentation? (At least in the placers I've looked.) If you store all your images in a database, how on earth can you display any of them in CSS except by using a script in the url() specifier? I've seen plenty of tips about generating css files from php (I already do it), but that won't help in this case. All I can think of is to have php write the image data from the database into a temporary file, and put that file name into the url() specifier. But what a horrible kludge!! I will be very grateful to anyone who can give me solid facts on this question. Andrew Blake Hi there people. Is there ANY code or ANY way around making an CSS image have a transparency layer ontop, and then Font ontop of the transparency (but the font isnt included with the transparency layer) ? As it works fine in IE but not FF. Its driving me mad! lol Code: Ok, I have tried many many sites. they have each told me to do something different or where to write it in. except for one or two common things:
filter: alpha (opacity=50)
-moz-opacity= .5
opacity= .5
thats about it. i've been told to use style, id's, and class. its extremely confusing. also a lot of people say to use CSS but then some are saying its possible with html. but neway i've tried it doesnt work! can someone help. I am gonna be posting my html and css codes.
#1:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Lakewood YMCA Dance Program and Booster</title>
<!-- TemplateEndEditable --><style type="text/css">
<!--
@import url(../mel/semitransparent.css);
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<br>
<table width="1170" height="809" border="0">
<tr>
<th height="174" colspan="2" scope="row"><img src="../mel/logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="296" height="37" scope="row">commentary</th>
<td width="864" rowspan="3"> </td>
</tr>
<tr>
<th height="352" scope="row">Here is where I will write all the little comments and blurbs about what we are about and what we do. also what we value and support</th>
</tr>
<tr>
<th height="181" scope="row">This is where we will post New events for everyone. we will also post if we won any competitions. </th>
</tr>
<tr>
<th height="53" scope="row">This is a I dont know space </th>
<td>this is where it will say who designed this, when, when updated, and who our host is. </td>
</tr>
</table>
<p><br>
<br>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="../mel/boosterclub.htm">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="../mel/Danceprogram.htm">
<area shape="rect" coords="588,87,711,106" href="../mel/dancecamp.htm">
<area shape="rect" coords="783,84,971,107" href="../mel/fly.htm">
</map>
</p>
</body>
</html>
#2:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
#3:
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
These are all just some of the stuff I've had to go through.
here are some sites too:
http://www.quirksmode.org/index.html?/css/opacity.html
http://www.mandarindesign.com/opacity.html
http://www.domedia.org/oveklykken/css-transparency.php
I'm going crazy! :confused: plz help!! ><
Ok I am new to CSS. It's a little confusing. But um, what I want to do is create a table with a embossed border and semi-transparent background. I've been told by my teacher that it can't be done but he's never tried or messed around that much with CSS. So I came here. and also what a div span blockquote select input those are all codes I've come across. So if you can please help me. I've also looked around and seen codes but I don't know how to input them... well I mean where. I have come across this: .background { filter:alpha (opacity=50);} I don't know if that would work. Thank you for your help. FLY Hi, I would like to have al my boxes and td's, tr's, table's and other frames transparant. Can i do this with CSS only? You can view my site @ URL , the penguin has to be full seen! With a friendly greet, Dieter Van Houtte Hey everyone, I'm relatively new to CSS and I was hoping to incorporate some transparency effects onto my webpage. What I'm looking at is basically having opaque text over a div with a partially transparent background. When you take out the unnecessary stuff this is basically what it boils down to: Code: <div style="opacity: 0.5;background: #FF0000;"> <span style="opacity: 1;">opaque text on a translucent background</span> </div> The problem is when I open this is Firefox (version 2.0.0.1) I end up getting the 50% transparent red background but the text as well is 50% transparent...does anyone know what's wrong with this? Hey guys, I have a myspace layout.. and what I cannot figure out is how to get it to not be transparent!? http://www.myspace.com/thegoatherder13 I want the boxes to be plain red or something without that queer transparent look on it. Here is the template code. Code: <embed allowScriptAccess="never"src="http://home.comcast.net/~thegoatherder13/scenicroute.mp3" autostart="true" loop="true"
width="2" height="0">
</embed>
<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://mi4.bpcdn.us/atrucreation8/bg_bos_tile.gif');
border-color:CC2222;
border-width:5px ;
border-style: solid;
scrollbar-face-color:0d2b56;
scrollbar-highlight-color:0d2b56;
scrollbar-3dlight-color:0d2b56;
scrollbar-shadow-color:0d2b56;
scrollbar-darkshadow-color:0d2b56;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:bf141a;
}
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:3px;
border-color:FFFFFF;
background-color:transparent;
}
table table table td {
background-color:bf141a;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70; }
table table table table td {filter:none;}
table, tr, td, li, p, div { font-family:helvetica; color:FFFFFF; font-size:12px; }
.btext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext10 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext12 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.lightbluetext8 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.orangetext15 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redbtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.text { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
.whitetext12 { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
a:active, a:visited, a:link { font-family:helvetica; color:EEEEEE; font-size:12px; }
a:hover { font-family:helvetica; color:AAAAAA; font-size:12px; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.navbar:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
.nametext { font-family:helvetica; color:FFFFFF; font-size:12px; }
</style>
</style>
<style type="text/css">
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url(http://mi4.bpcdn.us/atrucreation8/redsoxct.jpg);
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style type="text/css">
table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("http://mi4.bpcdn.us/atrucreation8/redsoxtop.jpg");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important; }
span.blacktext12 img {display:none;}
</style><br><br>
I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background. I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. This is driving me absolutely insane. I'm trying to figure out WHY this DIV isnt showing up as transparent in IE. I have a DIV with the following style applied to it: Quote: .blocktitle { text-align: center; padding: 3px; font-weight: bold; background-color: black; color: white; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } I have a table.. at the top I want a title bar thats transparent, and the content below. I need the transparency so if I change the color of the TD the titlebar still stands out and matches with the new color. Problem is.. this doesnt work in IE and I'm losing my mind Mozilla.. works awesome. IE.. the titlebar is black and not transparent at all. If I set the position to absolute it goes transparent just fine! But then the content below invades the spacing for the title bar. Here's the HTML: Quote: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: green;"> <div class="blocktitle"> Test Title </div> <div style="height: 1px; background-color: black;"><img src="/images/spacer.gif" height="1" width="1"/></div> Some content goes down here. </td> </tr> </table> Any help would be greatly appreciated. someone help me, it's driving me crazy. i have a simple navigation menu where i have a semi transparent PNG image as the original image. when the image is moused-over, it changes the image to another semi-transparent via javascript. the issue is, when i mouse-out the image, i want it to return to the original semi-transparent image. however, while it does return to the same image, it is not as transparent as it should be. [image: 50% opaque] --> (mouse over) --> [image:70% opaque] --> (mouse out) --> [should go to image: 50% opaque] it is doing it in both IE and Firefox. is there a fix for this? thanks!! |
|||||||