conditional css not working correctly? - html

i have used condition css for internet explorer to show the auto cursor in internet explore but it is not working correctly
i have used following code to link the
<!--[if IE]><link rel="stylesheet" href="newstyle_ie.css" media="screen" type="text/css" /><![endif]-->
i have to show the default cursor in internet explore for that i uses
body{ cursor:auto !important;}
and for other browsers i have used
body{ cursor:url("some url");}
any hint ???

Your conditional comment is ok, you should check the cursor url, and set a fallback value(i.e. pointer, separated with a comma), just in case the first cursor isn't found. Also check the path to css file

Try this:
body {
cursor: auto;
cursor: url(url path), auto;
}
or
$(document).ready(function(){
$("body").css('cursor','url(your url),auto');
});

Please try to use hack css for browser to fix your issue .
Please refer this link http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ how to call hack css.
Thanks.

Related

External CSS not working in IE11

I have wrote my own embed-server, which can generate response to web browsers.
The generated "main page" is like the following html.
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="styles.css"><title>ABC Inc. Web Configurator</title></head><body>
<nav><p>[<b>Home</b>]</p></nav>
<table>
<tr><td><a href=Config>Config</a></td></tr>
<tr><td><a href=Logger>Logger</a></td></tr>
</table>
<footer>Web Configurator © ABC Inc. 2014 - 2015</footer></body></html>
And the generated CSS file is
.even{
background-color: #EFF;
}
.odd{
background-color: #FFE;
}
.title{
background-color: #226;
color: #EEF;
}
a{
color: #36C;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
body{
font-family: Tahoma;
font-size: 100%;
}
footer{
color: #999;
font-size: 0.7rem;
}
nav{
background-color: #DDF;
font-size: 1.1rem;
}
td{
min-width: 60px;
}
When I browse the main page by Chrome 43 or Firefox 39, they're both okay.
However, when I use IE11, the CSS not apply to the html, even though that I can make sure IE11 have access the CSS file from my server. If I press F12 in IE, the DOM manager shows no stylesheet in this page.
BTW, my URL is http://localhost:8888/, and need a basic authentication.
Any idea how can I fix it?
UPDATE
I've read the stackoverflow thread before, and I'm sure my problem is not about browser caching. Thanks Mauro for notification.
I've tried Chrome + IE tab2, the CSS works, but not apply to nav and footer tag. I guess IE tab not support HTML5.
UPDATE
I've try both of closed and non-closed link tag, both of them are not solve my problem with IE11.
I've try to disable Basic Authentication, still not working.
UPDATE
The CSS also works in Firefox 39.
The CSS works with IE11 + Compatible mode (but HTML5 tags will be ignored).
Try adding this attribute to the link tag:
type="text/css"
Example:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
After I compare a lot of website, I find out this problem could be solved easily by just remove the html5 declaration <!DOCTYPE html>. However, I don't understand why IE11 act like that, it should have support html5.
PS. I've read this SO article and add type="text/css", but it seems IE11 never care about that.
I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.
IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):
SEC7113: CSS was ignored due to mime type mismatch.
Fix was simply to mark the HTML response mime-type as "text/css" and all was OK.
Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.
Check if HTML1202 issue described here can resolve your problem.
if so, check this: How to avoid ie8 compatibility button?

HTML5 template not working on Internet Explorer, how to solve it?

I made a template in HTML5 which is working with Chrome and Firefox but not working with Internet Explorer (tested on IE 8).
How can I solve this problem?
just add "display:none" to your templates. Works for i.e. 11
<template id="fancyTemplate" style="display:none"></template>
I recommend you Neovov's polyfill:
https://github.com/neovov/template-element-polyfill
NB: There's a bug in IE 11: it moves <template> under the <body> element before rendering the DOM! So the parentNode attribute is wrong, and nesting will fail.
You can see it in the [F12] Tool.
Get a copy of html4shiv, and use it where IE is less than 9:
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script>
<![endif]-->
You are searching for the html5shiv.
It 'enables' all the html5 elements, which aren't available in the old internet explorer versions.
You can try to replace <template> tag by <script>
<script id="fancyTemplate"></script>
You can hide the element using CSS: template { display:none !important; }
And if you need to access/clone the content like natively possible in other browsers, use this polyfill: https://github.com/jeffcarp/template-polyfill
But keep in mind the content of the <template> can still be found in the DOM and is executed - preventing exactly that is the main goal of the tag. No polyfill can stop that from happening, IE is once again slowing down modern web development.

How do I add CSS script to my basic offline html site?

Im using css button generator to create the code for my css button and it generates the css code and the html code used to insert the css code. But I don't what classname to use. I tried
But that shows up blank in the website preview.
And for an offline site with minimal design would it be better to put the buttons inline? The site will be put on a CD. I'm using dreamweaver cs6.
Well i guess you will need to learn basic HTML first. Each HTML document should contain HEAD and BODY tags. In HEAD section you link your CSS file or write your generated CSS style between STYLE tags. Something like:
<style type="text/css">
.button1 {font-size:15px; color: #cccccc; ....}
.button2 {font-size:18px; padding:10px; ...}
</style>
or link your CSS file inside HTML header with:
<link rel="stylesheet" href="/css/your-stylesheet.css">
You can also check here for some basic examples of HTML and structure of HTML documents.
w3schools
With your link you just make a link to your CSS style which will open as a plain text in browser window so you don't really include it. So include CSS style in your HEAD section either by link or to put your CSS classes and everything between STYLE tags. Once you will do this "call" your style in your links like this:
Go to Google
Local file
Thanks guys. Got it to work. I found this question and answer: mmo-champion.com and it made it clear what you guys were saying.
I deleted the <style type="text/css"> and made sure that the class was = to "classname" since that was what it was called in the CSS file because it was unchanged, and then it worked. I think it didn't work because I had the class = "button1" and I also didn't delete that bit of code before.
Gantt charts & project diary
(source: css-tricks.com)
One more thing, because Internet Explorer does not support some elements which work on Chrome or FireFox, there are some special codes for including only IE CSS file (file that works only if IE is identified):
For all the IE versions, use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For X version only:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="file.css">
<![endif]-->
** This code can only be used for IE7. If you want to use the CSS code for other IE version, change "7" in the line !--[if IE 7> to the appropriate version number.
For IE5.5:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For IE6 and lower (including IE6), use if lte IE 6 or if lt IE 7.
For IE7 and higher (including IE7), use if gte IE 8 or if gt IE 7.
Sometimes IE blocks webpages' scripts or ActiveX controls.
To ignore IE block scripts or ActiveX controls, use this line, at the head of the HTML code.
NOT in the <head> tags, at the first line. It's important.
<!-- saved from url=(0014)about:internet -->
To read more about this error, read MOTW.

CSS file refuses to link to HTML file

I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.
The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)
How do you know its not working if the CSS is empty?
Type body { background-color: #f0f; } to test if it's working.
Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.
Like this:
<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>
As you can see I've added ?v=1.1 after "Joe.css
Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.
But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.
Hope that helps!
You should debug your code.
Firstly, replace your <link> tag with the following and see if it works:
<style type="text/css">
body { background-color: #000; }
</style>
If your background color is changed to black - that's a good sign.
If not, something's wrong with your script or browser.
Next, replace the above piece of code with the following:
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Create the file style.css in the same directory as your HTML script and put the following code in it:
body { background-color: #000; }
If that doesn't work, something's wrong with your script or browser.
btw, try to clear your browser cache.
Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.
Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?
Try this:
<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />
I inserted the relative path. You could also try this:
<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" />
With upper case j. Perhaps your web server is case sensitive?

external CSS issue

Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>