I need html5 scripts to be opened by IE7.
I did input a script to call html5shiv.js on <head> script in the HTML file.
Here's my HTML code:
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
</head>
and I trying to styling a button on tag <header> like this:
HTML:
<header>
<input type='submit' value='LOGIN'>
</header>
CSS:
header input[type=submit]{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and that's still not working, I don't know where the error is? are the error on the caller of html5shiv or in some of the syntax?
NOTE: no CSS class like .Something Allowed
Include html5shiv.js before style_ie.css:
<head>
<!--[if IE]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
</head>
Use it as a class example
.btn
{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and use it in html as
<header>
<input type='submit' value='LOGIN' class='btn'>
</header>
The Internet Explorer 7 have a buggy support for the attribute selector. to prevent this issue it would be goo if you can make a class and then apply it on input tag. I hope it will work on IE7 or even IE6.
NEW SOLUTION
you have to call the html5shiv.js and CSS file separately like this way.
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script><![endif]
-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
OLDER SOLUTION
<input type='submit' value='LOGIN' class='myClass'>
CSS would be
.myClass{border:1px solid red;}
IE7 not supported this attribute of HTML file so you can not use header input[type=submit]{ }
i need create class for ie7 and check browser if it is less than IE8 then you call that class.
Related
Hi I'm new to learning html and css and been really struggling with this problem. I can't link to an eternal CSS file, it just won't work when testing on my web host, I'm sure the file name is right though and it the css works fine when hosting locally. It's saved as "test.css" and is in the same folder as the "index.html" file.
This is my HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<p>This is some text</p>
</body>
</html>
This is my CSS
<style type="text/css">
p {background-color: blue;}
</style>
Any help would be greatly appreciated!
Two things...
1) remove </style> from your header
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
2) And remove <style> tags from css file
p {
background-color: blue;
}
There's no need to include <style type="text/css"> in your css file. Remove that and just put:
p {
background-color: blue;
}
The only time you put <style type="text/css"> is when you're putting the your css directly in your HTML file.
In your CSS there is no need to wrap your code in a <style> tag, that is only necessary in HTML.
Also not sure why there is a closing </style> tag below your <link> tag. There is currently no inline styling here in the head of your document.
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="test.css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
I want to define a CSS rule for IE9 and below ONLY so I included this line on my style sheet:
<!--[if lte IE 9]>
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
<![endif]-->
it didnt work. Internet Explorer 9 is not understanding it unless I take off the conditional tags.
Why is that?
Thank you.
Embedded the css in style tag.
<html class="ie9-fix">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--[if IE]>
<style>
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
</style>
<![endif]-->
<body>
// body content goes here...
</body>
</html>
You can only add HTML code inside conditional comments. Your page structure should be like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->
<body>
// body content goes here...
</body>
</html>
And in ie9.css you can define your css
.gradient {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
Okay, I think I found the answer. This seems to work.
#media screen and (min-width:0\0) {
gradient {-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#bbb69c, endColorstr=#ffffff)";
}
At this page there is a graphic in the sidebar:
I have in the <head>:
<!--[if IE]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie.css" media="screen" />
<![endif]-->
The ie.css file contains .textwidget {display: inline-block;} however this CSS rule is not being applied when I select the <div class="textwidget"> while inspecting the graphic in IE11.
IE11 doesn't support conditional comments such as <!--[if IE]>.
From MSDN:
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser.
You have missed type of the link you are adding. It should be
<!--[if IE]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ie.css" media="screen" type="text/css" />
<![endif]-->
I'm not sure what I did, because I'm sure this was fine before, but now IE8 is only loading a small portion of this site's stylesheet. In every other browser it's fine.
http://50.57.131.195/adamekdev/
This is the stylesheet that's only partially loading:
http://50.57.131.195/adamekdev/wp-content/themes/skeleton_adamek/style.css?ver=1.6
I've run it through the validator and commented out any experimental css.
Any help would be appreciated.
It's a wordpress child theme of Skeleton.
Thanks
Try adding different css for IE
<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie-8.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie-6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/ie-7.css" />
<![endif]-->
I think it was because I was using #media all and... but I fixed with a separate stylesheet for ie8.
I have my main.jsp page wich contains this code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="/targets/js/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/targets/jsp/uploadify.css">
<link rel="stylesheet" type="text/css" href="/targets/css/cssPicker.css">
<!-- ko template: { name: showView } --><!-- /ko -->
It is initializing some components as scripts and css. I'm calling cssPicker.css which contains the below code:
<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/jsp/targetsMSIE.css">
<!--[endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
<!--<![endif]-->
But the style is not applying.
I have never played with css before and I'm pretty sure that the way I'm trying to call the sheet is incorrect. Please give me an advice on how to call correctly the sheet when someone is using IE and when someone is using another browser.
All versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
All browsers except IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
All browsers.
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
Conditional Stylesheets should help you to understand better.
I doubt you are not referring CSS locations properly "/targets/jsp/targetsMSIE.css" should this be "/targets/css/targetsMSIE.css"