|
CSS - Filter Which <th> Tags Not To Show
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 Similar TutorialsHello 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 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 {
Not working in mozilla This does not render well in Mozilla Firefox, but is okay in IE. Please Help Us........ 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. 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 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> 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. 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 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 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; ! 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???!?!? 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'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 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! Hi, I have some code that looks like this . #nav,#nav ul which puts all the listed elements in a vertical list. Now if I do ths #nav ul.. this changes all the elemnts to a horizontal list. What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't. I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall. It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image. Thanks. Hello! Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read). So the current html below would be shortened to: Code: <a href="javascript:void(0);" class="sddm"><u>Settings</u> <div id="m1" class="alignl"> <a href="#">HTML Drop Down</a> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </a> ORIGINAL CSS/HTML: Code: <style type="text/css">
/* Drop Down Menu */
span.sddm {
z-index: 30;
white-space: nowrap;
position: relative;
}
span.sddm a {
text-decoration: none;
}
span.sddm a:hover {
text-decoration: none;
color: blue;
}
span.sddm div {
position: absolute;
display: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #3366cc;
border-top: 1px solid #c9d7f1;
border-left: 1px solid #c9d7f1;
top: 18px;
}
span.sddm div a {
position: relative;
display: block;
margin: 0px;
padding: 2px 5px;
width: auto;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
span.sddm div a:hover {
background: #3366cc;
color: #fff;
}
span.sddm .alignl {
left: 0px;
}
span.sddm .alignr {
right: 3px;
}
</style>
<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>
|
|||||||