CSS - Css Filter Over-writing Div Content And Js?

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 there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

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

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;

!

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.

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

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

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?

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!

I have two divs

Code:

<div class="QuickLinkDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test
</div>

<br />

<div class="ContentDisplay" dir="ltr" lang="en">
Hello, World!<br />
Test<br />
Test</div>
</body>

The corresponding styles are as follows
Code:

div.ContentDisplay
	{

	background-color: rgb( 255, 250, 238 );
	background-image: url( ../../../images/ssplash/ContentBackground.gif );
	font-size: 10pt;
	left: 200px;
	margin-bottom: 0%;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

div.QuickLinkDisplay
	{
	
	background-color: rgb( 255, 227, 160 );
	background-image: url( "../../../images/ssplash/QuickLinkBackground.gif" );
	left: 200px;
	padding: 5px;
	position: absolute;
	width: 575px;
	
	}

The problem is, that ContentDisplay which is supposed to be displayed under QuickLinkDisplay, is printed right in the middle of QuickLinkDisplay (see it in action here The middle column is all I'm concerned about)

Anyone know how to fix this?