|
CSS - Css / Javascript Alpha Filter Opacity In Ie Clipping Problem
I have a problem involving the ie only filter alpha().
My problem is that any <div> that is nested inside another becomes clipped, see example: Code: <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#inBusinessHolder {
position: relative;
}
div.inBusinessBox {
display: block;
filter: alpha(opacity=80);
position: absolute;
width: 250px;
height: 80px;
border: 1px solid black;
background: #cff;
}
</style>
</head>
<body>
<div id="inBusinessHolder">
<div class="inBusinessBox" style="top:70px;left:100px;">text</div>
<div class="inBusinessBox" style="top:140px;left:110px;">text</div>
<div class="inBusinessBox" style="top:210px;left:120px;">
text
<div class="inBusinessBox" style="top:10px;left:-10px;background:#cf6 z-index:1000">text</div>
</div>
</div>
</body>
</html>
Anyone got any ideas? It's like the parent container is behaving like a clipping rectangle! Similar TutorialsI'm working on a site that's a single php page with CSS file. The site uses the same rotating image script, in 2 locations. In the one location, it rotates the background image of a div. I've set the opacity to 0.7, alpha filter at 70. This is working properly - it is affecting the opacity of the background image as I want. The problem is that it is also affecting the opacity of static images that are contained within that same div. Any ideas on how I can keep the opacity of the rotating background image, without affecting the opacity of the static images that are on top of the background? Site is triple-w . visitchester . ca Relevant code he FROM INDEX.PHP (IT'S THE JPG'S IN THE BIZCARDS FOLDER THAT I WANT TO BE SOLID) <div id="rotator2" style="background-image:url(link to rotate2.php); opacity:0.7; filter:alpha(opacity=70); padding-top:20px;"> <a href="link here" target="_blank"><img src="bizcards/mecklenburghinn.jpg" height="170" width="207" style="border:#FFF; margin-left:5px; border-style:double;" /></a> <a href="link here" target="_blank"><img src="bizcards/ropeloft.jpg" height="170" width="207" style="border:#FFF;border-style:double; " /> <img src="bizcards/banner3.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> <img src="bizcards/banner4.jpg" height="170" width="207" style="border:#FFF;border-style:double;" /> </div> FROM MAIN.CSS: #rotator2 { width: 900px; height: 655px; font-family:"Courier New", Courier, monospace; font-size:16px; color:#FFF; } Thanks in Advance! Regards, ChesterNerd Is there Opera compatible code for filter:alpha or -moz-opacity? I have an image link which I want to display at 50% opacity and when the user hovers over it I want it to be 100%. My code doesnt seem to be working tho? Please could someone help me... <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .fadein { } a.fadein { filter: alpha(opacity=50); } a.fadein:link { filter: alpha(opacity=50); } a.fadein:hover { filter: alpha(opacity=100); } --> </style> <head> </head> <body> <a href="gfdg.html" class="fadein"><img src="First.gif" width="257" height="130" border="0"></a> </body> </html> Hi all, I have created a widget that has some resize handles positioned to overlap the bottom, right and bottom right corner of the widget window. I also have an option for the window to be transparent, however when transparency is applied the handles no longer become usable. The widget is created as follows: this.window = $('window_'+this.id); this.window.innerHTML = '\ <div id="toolbarAndContent_'+this.id +'" class="toolbarAndContent">\ <div id="toolbar_'+this.id +'" class="windowToolbar"></div>\ <div id="contentWrapper_'+this.id +'" class="windowContentWrapper">\ <div id="content_'+this.id +'" class="windowContentContainer"></div>\ <div id="bottomBar_'+this.id +'" class="windowBottomBar"></div>\ </div>\ </div>\ <div id="resizeSE_'+this.id +'" class="resizerSE"></div>\ <div id="resizeE_'+this.id +'" class="resizerE"></div>\ <div id="resizeS_'+this.id +'" class="resizerS"></div>'; and the transparency is applied as follows: $('toolbarAndContent_'+this.id).setStyle({opacity:0.85}); and ideas why this is causing a problem. This is only a problem in IE, it works fine in firefox. Thanks in advance. hello, i have a problem with aplha opacity filter in IE6. My div looks like this <div style='width:0%;height:0%;background-color:white;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;color: blue;' >" + label + "</div>"; This works well and good i have one more div prior to this and I want to display both of them in line. For that when I apply position:relative;display:inline; The opacity filter is not showing any effect. any help would be appreciated... Thanks, Robust hi | i'm setting alphas and this code: filter:alpha(opacity=50); is working fine on: IE on a PC IE on a MC Mozilla on a PC Mozilla on a MAC but it doesn't work on: FireFox on a MAC Safari on a MAC is the filter tag not supported by these 2 browsers? anyone have any suggestions? any help is greatly appreciated. thanks. fu-meng. I have a problem with a website Im working on, the text on most of the pages e.g. www.topviplimosdubai.com is supposed to have a transparent white background behind it but on some browsers naming firefox it doesn't show up making the text unreadable, I don't understand what's causing this problem but I can only imagine it to be a css compatibility problem. see my css code below I would very much appreciate your help. thank you Code:
@charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
margin: 0px;
padding: 0px;
font-size:18 qpx;
background-image:url(topviplimos/BG.jpg);
}
.FCap {
font-size:36px;
font-weight:bold;
}
.TitleBar {
position:relative;
}
.main2
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=40);
_background:#FFFFFF;
_position:static;
}
.main
{
margin-left:125px;
width:665px;
overflow:hidden;
margin-bottom:19px;
color:#000;
position:relative;
filter:Alpha(opacity=85);
_background:#FFFFFF;
_position:static;
}
.bd{
zoom:1;
padding:22px;
font:72%/1.6 Arial;
position:relative;
}
.lower1 {
margin-top: 800px;
position:relative;
}
.bd img {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.HigherZ {
z-index:5;
}
.bd embed {
z-index:6;
}
.Jia {
float:left;
left:-10px;
position:relative;
margin-bottom:19px;
}
.Jia2 {
float:right;
left:0px;
position:relative;
margin-bottom:19px;
}
.TitleTex {
font-size:15px; font-weight:bold;
color:#000066;
position:relative;
top:-9px;
z-index:5;
}
a {
text-decoration:none;
color:#0000AA;
font-weight:bold;
}
.kk {
border-top-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
a:hover {
font-weight:bold;
color:#AA1100;
}
.ft[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.85;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
.ft2[class]{
background:#FFFFFF;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
z-index:-1;
*position:static;
*opacity:1;
*background:transparent;
}
Hi all, I have been coding html and css for 4 or 5 years now and have never ran into this problem. I'm creating a personal site and have made simple text box where I use a div with a background with its' opacity lowered, but the p text inside of it is fully visible. I have written this code many times and never had a problem, but now I can't seem to get my text visible when going higher towards white on the rgb scale. Here's the css: Code:
.module_container {
background:#000;
width:99%;
height:101px;
border:#fff 1px solid;
}
.module {
background:#FFF;
width:100%;
height:100px;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
overflow:scroll;
}
.module p {
color:#ffffff;
}
and the html: Code: <div class="module_container"> <div class="module"> <p>Hey</p> </div> </div> the page is he http://lateralus.byethost12.com/new23/ hey all, i have a small problem with opacity. i have a table that is populated using php and the lines are coloured two different colours using a different div class. one is just white..no worries there, the other is a blue that i have added opacity to as i couldn't find the colour i wanted otherwise. However the writing that appears on in the cell that has the blue opacity div class is also opaque and so it looks grey rather than black!! i hope that makes sense !! here is the code for the div classes Code:
<style>
.whitebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #ffffff;}
.bluebg {margin: 0 0 0 0; padding: 0 0 0 0; background: #99ccff; opacity: .5; filter: alpha(opacity=50); -moz-opacity: .5;}
</style>
[/CODE
here is the code for the text (this is in a .css file rather than embeded in the html page.
[CODE]
.labels2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:14px;
font-weight: bold;
}
.normal {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size:12px;
}
and here is the html/php PHP Code: <?php $i=0; while ($row = @ mysql_fetch_object($getdataR)) { ?> <tr> <td <?php if($i%2){ print 'class="whitebg"'; }else{ print 'class="bluebg"'; } ?> ><span class="labels2"><?php print $row->blog_subject;?></span> <?php if(!empty($row->r_link)) { print " - <a target=\"_blank\" href=\"".$row->r_link."\">Related Link</a>";} ?> <br> <span class="normal"><?php print $row->blog_msg; ?></span><br> <span class="small">(Posted By: <?php print $row->posted_by; ?> on <?php print $row->blog_submitted; ?>)</span><br> <br> </td> </tr> <?php $i++; } if anyone can advise that would be great, thanks RF I'm not quite sure how to put this question in technical terms, but I'll do my best to show you what I mean. I need to convert all unnecessary html (especially tables) at 'seagull dot net slash services.html' into CSS. Everything was going dandy until I came to the horizontal rules above the text and next to the images. Let me say that again, ABOVE the text, the text being NEXT TO the images. I can't seem to find out how to place the horizontal rules (borders) above JUST the text. It always seems to go above both the the text and the image. I also want the border to start at the end of the image and go all the way to the right end of the page. Any help/bits of code would be greatly appreciated. PS: I wanted to upload an example image, but my ftp program is on the fritz, so I had to paraphrase a url... PPS: By the way, hello all! I'm new here, and I plan to be asking question alot because I'm stuffing my head full of programming this month. Hi all, Normally I'm faithful to table layout in my page design, but try to stay aware of how CSS is comming along at least as far as browser compatibility issues go. I've been wanting to use CSS for its transperancy abilities, and with my first trial page I've sadly run into same reasons I've steered away from CSS for so long. Hopefully all is not lost, and I may find help here. My problem is with a div that has a background image, and another div inside that containing the text which uses semi tranperant background color and "overflow : auto" to set the text apart from the background and allow scrolling. In IE, everything looks beautiful, and I wondered for a moment why I stayed away form CSS for so long. Then I tried Mozilla... Scrolling the text in the div is painfully slow and unresponsive to the point its almost impossible to move where you want in the text. The opaque background changes in color once you move down and leaves a seperation between the two colors or opacity, and generally works poorly. Here is the link, and the source is small: http://coinmonger.com/now.html Hopefully this is due to my lack of expertise using CSS, and a work-around is available. Currently I've downsized the background image hoping it was image size that was causing the problem (as this is just a quick test to see if I could do this), but no change. The page even loads slower using the "moz-opacity" attribute. Any input is appreciated! i have a div that has a background img. when i have p's within this div the background img only shows up if theres a line of text there. i specified the height: 277px to fix this (if theres a better way, pls let me know). and tried to put overflow:visible within p's but its still clipping. any ideas? containing div: Code: #content .col {
width: 303px;
height: 277px;
background: url(../images/one_third_box_top.png) no-repeat;
float: left;
}
p: Code: #content p, ul {
padding: 0 25px 0 30px;
line-height: 1.5em;
overflow: visible;
}
edit: this problem is in mozilla, but not in IE... weird. theres also one minor thing on a totally different subject. paths.. my paths a Code: /pub /css main.css /images foo.jpg foo2.jpg index.html obviously i have a link to the main.css in the index file but when i try to use url(images/foo.jpg), foo.jpg wont load? the path looks right unless im missing something... instead i have to url(../images/foo.jpg) for it to work... i always thought the '../' meant parent directory of the file (which is index.html since its linked from it)... right? thanks in advance. Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz Hello Everybody: I use this: Code: filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); to rotate a table 90 degrees right. It works pefectly. When the table is in horizontal position, the text looks good, but when the style is aplyied, text looks like printed with a 9 dot impact printer, can I avoid this?, Is there any other way of doing this without using that style?. Thanks in advance Hi, I am trying to validate my CSS using the Jigsaw CSS Validator. http://jigsaw.w3.org/css-validator/validator I keep receiving the following error. Quote: Line: 1895 Context : #save attempt to find a semi-colon before the property name. add it Line: 1895 Context : #save Property progid doesn't exist : DXImageTransform Line: 1895 Context : #save Parse Error - DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none'); Line: 1896 Context : #save Parse error - Unrecognized : } With regards to the following piece of text: Code: #save
{
height:40px;
width:40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../includes/images/iconSave.png', sizingMethod='none');
}
#save[id]
{
height:40px;
width:40px;
background-image:url(../../../../includes/images/iconSave.png);
}
Is it because i'm trying to use an MS Filter in my CSS, if so where else can I place this - in the code? Doesn't that defeat the object of CSS though? Any help much appreciated. Thanks, Jay. Hi, I have a div which is somewhat transparent. There is no problem there. Then I have textin this div, which is also showing up with transparency, and this is the problem. I need the text to be 100% opaque. Here's the div css: Code: .rounded_STYLE
{
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
width: 224px;
background-color: #616161; /* if needed */
/* border: 1px solid BORDER_COLOR; */ /* if needed */
-webkit-border-radius: 4px; /* for Safari */
-moz-border-radius: 4px; /* for Firefox */
}
Here's the text css: Code: .bodywhite{
margin:0px, 4px, 4px, 4px;
opacity:1;
font-size:10px;
color:#FFFFFF;
font-weight:normal;
}
I've tried different numbers in the opacity value, but to no avail. Here's the site:site any ideas? thanks Ok, I am creating an image gallery that is composed of a square layer that has opacity of 50. I have created 9 other div layers within that layer to hold thumbnails. When I put images in those thumbnail divs, the image shows up as semi-transparent. I do not want this. Here is my code, how can I turn off opacity just in those div thumbnail squares? CSS Code:
DIV.outer
{
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 488px;
border:2px solid white;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
}
DIV.inner
{
position:absolute;
left: 50%;
top :50%;
width: 500px;
height: 488px;
margin-left: -250px; /* half of width */
margin-top: -244px; /* half of height */
background-color:#CC6666;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
div.tn
{
position:absolute;
width:115px;
height:115px;
background-color: #660000;
layer-background-color: #660000;
border: 1px none #000000;
}
HTML Code:
<div class="outer">
<p> </p>
<div class="inner">
<!--row 1!-->
<div class="tn" style="z-index:2; left: 50px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 17px;"><img src="tn/tn_fountain.gif"></div>
<!--row 2!-->
<div class="tn" style="z-index:2; left: 50px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 185px;"><img src="tn/tn_fountain.gif"></div>
<!--row 3!-->
<div class="tn" style="z-index:2; left: 50px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:2; left: 192.5px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
<div class="tn" style="z-index:3; left: 335px; top: 352px;"><img src="tn/tn_jackpot.gif"></div>
</div>
</div>
What i'm trying to get at here is how do I get non transparent items in a transparent div box? Well, I have a couple png images that are using a transparent background. As most of you probably know, it looks great in every browser except IE for the PC. It looks like complete *** in that browser. Now I looked all over the net for a fix for this and found this in Microsoft's library of fixes for their products and found the AlphaImageLoader. Tried using their own code and the same code I found on a dozen other sites and it still isn't loading the transparency, so I'm just curious what I am doing wrong. Here is the code: Image HTML Code: <div id = "welcome_image"> <img src = "/testing/inertia/images/home/welcome.png" alt = "Welcome" /> </div> Image CSS Code:
#welcome_image
{
position: absolute;
top: 10px;
left: 10px;
width: 168px;
height: 216px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/testing/inertia/images/home/welcome.png", sizingMethod="scale");
}
is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity? i've been playing with this code: style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100 and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table. is there any way around this? on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss. Hiya, been playing around with trans PNGs and appreciate Firefox more and more with each passing hour!! What's the best way to get PNGs with alpha channel transparency to work in IE6, so far I've tried the .htc script mehod which works OK, except, on my PC it asks if I want to execute the script each time I open or refresh the page. Don't know if it would do this on my web server and haven't tried it yet. Is there another equally straight forward way to deal with this? I thought about browser sniffing and then giving IE6 a nasty transparent GIF and everything else a PNG. What does everyone else think? John. |
|||||||