I have a rails app (source) where I am trying to change fix some display bugs in Internet Explorer. In app/views/layouts/application.html.haml I have:
/[if IE]
= stylesheet_link_tag "ie", media: "all"
This seems to be generating the appropriate HTML with the precompiled asset which is downloadable from the server:
<!--[if IE]>
<link href="/assets/ie-21dfbd4e306a3f4685597c40061f9d43.css" media="all" rel="stylesheet" />
<![endif]-->
The contents of the stylesheet are simply:
#logo {
display: none;
}
When the page is displayed in IE, however, the logo still appears.
According to this page in the Microsoft Developer Network Library, conditional comments were first supported in Internet Explorer 5, and are no longer supported in Internet Explorer 10 and later.
If you are in fact not using IE10, do you have a second style sheet for non-IE browsers? Is this before or after this conditional comment in your HTML? If it is after and it contains #logo { display: block; } or similar its styles will override that of the IE specific CSS file.
Related
I need to target all IE browser in .... inside html file.
I see on internet
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
But how to target this inside ?
What i need ?
<!-- Internet Explorer ONLY
.actionbar-container {
left: 0!important;
}
<!-- Internet Explorer ONLY
Check those links I think they might be helpful:
https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
You can try creating a style file specifically to target Internet Explorer and it's different versions and use media query like for example :
#media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
I'm having two issues.
My application is not centered in IE, but looks perfect in chrome.
I have conditional just for IE, but it doesn't seem to be working. The #outline is not shifting to the left like the ie.css file is telling it to.
It is my understanding that the conditional I put in the isn't supported for IE 10 or IE 11 so what can I do so that these versions aren't ignored?
The conditional I put in
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can view it in action with all the files and whatnot here: http://andrewhnovak.com/AMC%20Ticket%20Calculator%202.0/index.html
Remove the zoom: 80%' fromamc.css` line 7. That is an IE only style, and is what is messing things up.
If you were trying to accomplish something by having that there, then let me know in the comments and I'll see if I can help. But you'll notice that that shrinkage isn't happening in any other browser.
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.
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.
I' ve website HTML5, Css3 and Jquery, it is look fine in IE9, but not look good in IE8
I read all solutions here, plus using all methods
Such as
CSS3 PIE
ie7-js
-
<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
-
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('hgroup');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
and.... and....
i can't find the best way to appear website fine in IE8
any help Plz.
website: moic-egypt.com
I won't recommend css3pie, it causes several side effects.
For the styling issue with html5 elements, you're correctly using a shim/shiv (like html5shiv), so you don't need the document.createElement part. That will solve most of the issues.
Instead of creating custom CSS stylesheets for IE, i would switch to conditional comments, so that you can add specific ie rules in the main CSS:
.ie #specificdiv { /* custom rule for ie */ }
When your project gets bigger you won't have to browse all the different sheets.
Then ie9.js, that's for css selectors (like :not) which weren't supported in older IE versions.
You've css3 properties left. For these, i'm afraid you'll have to search for fallbacks/polyfills one by one. Here are some beutiful resources to start with:
html5please
Can I use
List of cross-browser polyfills