|
CSS - Disable Case Sensitive
Hello
I would like to change the cursor when it is over on a link with an defined file extension. It does not work well: the test.zip link is OK while the test.ZIP link does not have any effect. How can i disable the case sensitive in the following code so that work? Thank you PHP Code: <html> <head> <style type="text/css" media="screen"> a[href*=".zip"] {cursor:help;} </style> </head> <body> <a href="http://www.abc.com/test.ZIP">test.ZIP</a> <a href="http://www.abc.com/test.zip">test.zip</a> </body> </html> Similar TutorialsI'm trying to create a context sensitive help system so that users can click an icon and get additional information about the section of the web page they're viewing. I want a layered div to come to the top and display this information then close upon the user clicking a button / link. I have all that working fine. The problem I'm having is I only want one help layer to appear at a time. So if the user fails to close the currently open layer, i want to automatcially close this layer then display the next one. Applicable CSS: Code:
.helpText {
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
color: #000000;
font-size: 13px;
float:left;
}
.top {
position: absolute;
bottom: 90;
left: 110;
width: 100px;
height:5em;
background-color:#FFFF99;
z-index:1;
padding:.5em;
border: 1px;
border-style: solid;
border-color: #000000;
}
HTML: Code:
<DIV id="button">
<input type="button" name="button" value="?" onclick="helpText(\'matches\');">
<DIV id="matches" class="top" style="display:none;">
<DIV class="close">
<input type="button" name="button" value=" X " onclick="helpText(\'matches\');">
</div>
<div class="helpText">
It works here too!
</div>
</DIV>
</DIV>
javascript: Code:
function helpText (elm) {
/*
The function below successfully alters the class ".top" to not display, the problem is it works globally. So since two or more "helpText" divs will use this class even the one i want to display will be hidden.
*/
// alterCssClass(".top","display","none");
var div = document.getElementById(elm);
if (div.style.display == "") {
div.style.display = "none";
} else {
changecss("#"+elm+".top","display","");
div.style.display = "";
}
}
Any help would be greally appreciated. Thanks in advance. How do I make a paragraph sentence Case (first alphabet of each word capital) in CSS? Thanx for your help. Recently I started making my very first doctype=strict page and am trying to make it act the same way in IE and Firefox. After much time spent in research and experimentation I ditched tables in favor of DIVs cause 100% tends to be either too wide or too tall. The only good solution I could find is using javascript to calculate widths and heights. This is fine since the entire page is one big ajax playground. So anyway, research says this is cause width/height percentages don't take padding and borders into consideration. Let's say I set an outer div to 100 pixels wide. Then I give it a 2 pixel padding on the left and right side. Then I give it a 1 pixel border on the left and right side. Then I add another DIV inside this container and set it to 100% width. For some reason, both IE and Firefox feels the need to calculate this as 106 pixels wide instead of 100 pixels. I'm not sure if the HTML standard says this has to be true, but I can find no justification for such a practice. I understand that they prefer that the 100 pixels apply to only the content - that padding and borders increase the width of the object. But I don't see why objects that are inside of that container would try to stretch wider than the content width. I say all the above just in case there's something I'm missing and somebody would like to correct me. So now for my question. Other than using javascript, is there a way to make sure that objects inside the container have the width of the container's content width rather than the container's actual width. Any answers must apply to the height as well, since I understand that there is a somewhat unreliable behavior (in my testing) where a DIV automatically takes up as much width as is available. please delete post...problem resolved. I'm trying to figure out how come the setting for the "base" <div> applies the margin rules to the <ul> in this example (see halveway down the article) URL and it does not work for me when I re-create the same code here URL As far as I can tell I'm duplicating something that seems fairly simple. So the solution is probably a simple one, why doesn't the margin rules affect the <ul> tag in my HTML and why does it work in the example? Sincerely, Aaron S URL (Why doesn't the image show up?) http://drupal.org/files/issues/browser%20view.jpg The small div with the class "left" doesnt stretch to 100%. What could be the problem? Here is the html: Code: <div class="content-wrapper">
<div class="top">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="content">
<div class="left"></div>
<div class="center">
<div id="content" class="column"><div class="section"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
And here the CSS: Code: .content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}
.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}
.content-wrapper .center {
width: 100%;
}
.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}
.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}
.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}
.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}
.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}
.content-wrapper .center {
background: white;
}
.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}
.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}
.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}
.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}
Any help on this would be very appreciated! Thanks in advance! Hi. Is it possible in the same page to use a css and in the middle of the page, disable it and use another for the rest page another? I know that if i include two similar css the last override the first in the whole page. Can i use them both ? Can you use a stylesheet to effectively disable the link, so that you can't click on it; that it will appear simply as text? Thanks Hi there, In my stylesheet I've written a style for the table tag: Code: table {
width: 500px;
margin: auto;
text-align: left;
border: 1px solid #999999;
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
line-height: 140%;
margin-bottom: 10px;
padding-bottom: 15px;
font-size: 14px;
padding-left: 10px;
}
All the main tables on my site need to be this exact style. I now need to create a table which shouldn't use the table style above. I could have just pasted the stylesheet info directly to the page (and delete the css link at the top of the page), and then delete the table info, but can't do this because the stylesheet link location is dynamic (my new site design will alternate a stylesheet every 24 hours). Anyone know how I can tell the css to not apply the style to an element? Thanks, saj Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame. is there a way to disable the 3d shadowing effect on form fields? so i can just have a border. Hi, I need a class, that if I apply to a DIV tag (which has login form), It makes the background of that div a dull colored. Also I want to know if I need to force the user to first close that div before any other action outside the div. I hope this make sense. I am not sure if it can be done only with CSS or it also needs javascript. I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks anyway to disable a user from viewing your css source? not particular for me but, i think there might be a way with php in the css file, but it still displays the code when i go to the file Whenever I roll out a new feature (including new layout) to the production version of a website I am working on, I know that it won't properly work until a user downloads a new version of the relevant CSS files. For new users this happens automatically, but existing users have to wait or hit refresh. The result is that the pages look bad for some users when I make changes. I would fix this problem by renaming the CSS files whenever I make changes, but this can get a bit unwieldy since I use SVN for source code management. I would have to make a revision to other source code files solely to reflect a change in the CSS file. Another idea is to control the name of the CSS file from a constant or from my database, but each has its downsides (complexity, performance in the case of the db calls). Is there any easy way to have caching of CSS files, but somehow break through that cache when I make changes? I am guessing not since the cache is based on expiration settings set by Apache, which to be meaningful need to be long. But if you have encountered this issue before, I'd love to hear what you did! I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
Forms are needed to submit values, of course. But they may also change the formatting on a page when included. If I want to include a form just to contain hidden input fields, or even include it otherwise for some other reason, it will affect formatting. Is there a way to disable all presentational effects caused by inserting a form tag? I'm assuming this would involve CSS. Skolem |
|||||||