|
CSS - Css Filter Problem
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 Similar TutorialsHi, 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. 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> 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 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! 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. A lot has been added to the MS IE css site since I last visited it. In particular it seems I should be able to load a PNG image without the horrible rendering of IE and then filter it with this to keep it's original transperency. Not requiring to settle for gif or keep copies of all images in gif format. Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() I can't seem to get it to work though. Here is my atempt. Code:
/*include line*/
<!--[if ie 6]>
<link rel="stylesheet" type="text/css" href="style/iemain.css" />
<![endif]-->
/*css*/
#nav_main{
margin-top:1em;
margin:0;
float:left;
clear:left;
width:122px;
background-image:url('../image/not_a_real_image.png');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/nav_bg.png', sizingMethod='scale');
}
It reveals nothing, because this is not an image doens't exist. Not working in mozilla This does not render well in Mozilla Firefox, but is okay in IE. Please Help Us........ When the :not pseudoclass is used with an element selector in Firefox, it works as expected, excluding the selector inside the parentheses. But used by itself or attached to the * selector, it applies the rule to ALL elements. This unexpected behavior can be exploited to write Mozilla-specific patches to your CSS code. example:
html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Testing :not Hack</title> <style type="text/css"> :not([id]) p { font-weight: bold; } </style> </head> <body id="thisthing"> <p>This is a test.</p> <p id="test">This is a test.</p> <div>This is a test.</div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> The idea is to set the ID of the parent and browsers which correctly interpret this selector will not apply the rule to anything; also those browsers which don't already support it will simply ignore it. The :not selector is part of the new CSS3 recommendation. Here's just the css code for the hack: css Code: Original - css Code :not([id]) example { /* Moz/FF/Netscape code here */ }
:not([id]) example {
Hi. I have this DIV element which has content inside, and which has some JS code implemented on it. Every thing works like a charm. Then, I add a transparent PNG background. Everything's still working. But for the PNG background to be transparent in IE I have to set a filter on the DIV, like this: CSS Code: Original - CSS Code * html #master_container /* This is the DIV element */ { background-image: none; background-color: transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='./images/main_window_glass.png', sizingMethod='scale'); } * html #master_container /* This is the DIV element */ Which in turn, for some blunt and very unknown reason, cancels any functionalities of the content inside the DIV or the JS code relative to the DIV. Here, take a look: http://pilau.phpnet.us/mctours/index.html Compare in FireFox and IE6 and tell me if you have ANY clue! Thanks, very much, frustrated Pilau Hi I know we can not show th tags with css as such th{display:none} but is there any way to filter out which <th tags not to show? rather than not displaying any? maybe only the ones with id='not show' is this possible? Thanks discovered whilst working on asp where i use '' for comments and tried to comment out a line in the css file the same way... this should technically work by breaking the whitespace and create an invalid rule but IE yet again responded differently... Code: ""item:attribute; ''item:attribute; //item:attribute; ignored by opera 7.54 netscap 7.02 firefox 1.0.4 read by IE 5.01 IE 5.5 IE 6.0 "item:attribute;" 'item:attribute;' ignored by all read by IE 5.01 interested to see how the mac browsers respond but it looks like a better IE5.0 inline filter than Code: _item /**/: /**/attribute; ! I've added a background to my site which sits behind the content, in firefox it works fine, it sticks to the bottom of the browser fine, the same applies in IE, but we all know the IE PNG bug, so I used filter instead to load the PNG. But now the image is aligning at the top of the div: Screenshot The red shows where the div is actually covering, and it does cover right down to the bottom of the browser. How do you go about getting the filtered image to go to the bottom of the div? Theres maybe a simple solution but at the moment its not coming to me. I'd rather not use another file format, thats the last resort. I am about to go insane.. I am a total newbie to DHTML and Javascript and I am trying to do a onmouseover event to make an image display normally as a grayscale version of itself (with filter:gray) and when the mouse moves over it I want it to switch to the full RGB color version. I tried to do a rollover with two seperate versions of the image and it worked, but for some reason IE 6 wants to load the image from the server again everytime I onmouseover or onmouseout. This is very slow, especially on my server. I just want to change the image with DHTML filters.. General pseudocode: <img src="blah.jpg" style="filter:gray" onMouseOver="style='filter:none'" onMouseOut="style='filter:gray'"> Can anybody help me? PLEASE???!?!? I'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 the design for a web page i am coding calls for a floater with rounded corners and drop shadows. this is easily done by making the entire background a PNG with the corners, borders, and shadow applied (thankfully the window is a fixed size) now, ive been having no problems in the past using the following code in my javascript pop ups. however, this time i'm replacing the entire background with this and it's making everything inside of the container that has this unclickable. i realize there are workarounds to this including making everything 'inside' this window absolute above it, to only making the drop shadows transparent PNGs, but i'm hoping for a much simpler answer. does anyone know about this issue? Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blah.png', sizingMethod='crop'); I've been using Microsoft's filter to use PNGs in IE 7 & 6: http://msdn2.microsoft.com/en-us/library/ms532969.aspx But it doesn't seem to allow positioning (left, right, top or bottom) of the image. Does anyone know of any way to achieve this? Cheers! Is there Opera compatible code for filter:alpha or -moz-opacity? Hi there, I have a hidden layer (a gif image), as follows: <div id="1" style="position:absolute; left:2px; top:2px; visibility:hidden;"><img src="./image.gif"></div> The image becomes visible by passing the mouse cursor over a text, by calling a javascript function: ....." OnMouseOut="hide_layer('1');" OnMouseOver="showFilter('1');"> The show_layer / hide_layer function a <script language="JavaScript"> <!-- function show_layer(lname) { if(document.layers) document.layers[lname].visibility = 'show' if(document.all) document.all(lname).style.visibility = 'visible' } function hide_layer(lname) { if (document.layers) document.layers[lname].visibility = 'hide' if(document.all) document.all(lname).style.visibility = 'hidden' } // --> </script> It works fine, but I want my image to come up gradually, by using the filter: revealTrans(Duration=1,Transition=2) If anybody knows how the "show_layer" function can be modified so that the filter works, please teach me. Thanks a lot. Ranger Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! |
|||||||