So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
Related
I got this as close to a true SSCCE as I could while still replicating the issue:
<!DOCTYPE html>
<html class="colored-bg">
<head>
<title>Firefox CSS Priority Test</title>
<link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/>
<link rel="stylesheet" id="_switchSheet" href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/>
</head>
<body>
This page should have a purple background, not a blue one.
<br/>
This should have purple text.
</body>
</html>
Live Example
As you can see, the first stylesheet is a backup in case the second stylesheet doesn't load or takes awhile to load (This is my way if implementing minimal-JS site theming, so when a style is changed, the user doesn't see a noticeable flicker). The intended result is that the page is purple if all stylesheets load properly.
This works great in Chrome and Edge browsers, but not in Firefox. The weird thing is that it's just the background coloring; other classes like inverse button (which makes a white button with colored text) work as intended! Is there a quirk or unsupported feature in Firefox that causes this? Most importantly, How do I fix this?
Also, I tried minimizing the code further but couldn't replicate this weird behavior.
The rule on line 33 of visual_Clean_Purple.php is breaking the CSS in Firefox. Try removing:
*::selection,
BoltClock offers a good explanation in this answer:
Firefox appears to simply not understand ::selection (hence
necessitating the vendor-prefixed ::-moz-selection), so it ignores the
entire rule on encountering an unrecognized selector per the spec.
The common workaround for a browser not understanding one or more
selectors in a group is to split/duplicate the rule set.
...
In fact, in this case it's the only thing you can do, i.e. you will
have to put up with this slight bit of bloat.
You are using a CSS selector that Firefox doesn't yet support (*::selection) in visual_Clean_Purple.php which stops the css selector from being interpreted.
I removed that selector and it works: https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.
I am having this huge issue with IE 11, I can't get any variation of the color royal blue to display correctly as a background color. The background color works great in firefox and chrome.
I have tried all of this in the CSS file:
background-color:navy;
background-color:navy !important;
filter: none !important
I have tried other colors, like blue, and have tried to use just the color codes.
I have tried to force compatibility, If you run IE in compatibility, it will display the color correctly. I can never seem to get IE 11 to run compatibility from HTML. I have tried the the following:
<meta http-equiv="X-UA-Compatible" content="IE=8">
I am using the Doc Type tag as well:
<!DOCTYPE html>
How it looks in Firefox:
How it looks in IE 11:
No matter what I do, I can't get internet explorer to display the background color that I want. Can someone please tell how I can accomplish this?
This seems like a really strange behavior, as color constants have been supported by IE for quite a while. Your post contains a number of details, but not enough to help identify what might be going wrong in your case.
This JSFiddle works correctly on my machine; that is, it changes the background color of the body element as requested. Both navy and royalblue appear to work as intended on my copy of IE11.
Also, this MSDN sample, written originally for IE8, continues to work in IE11 (though you need to use the F12 tools to switch the document mode. BTW, that page also shows how to correctly declare the x-ua-compatible header to IE8 mode, if you're looking for such a live sample.)
To specify this (and the x-ua-compatible) directive in a bare bones HTML page, I might be tempted to use something like this:
<!doctype HTML>
<head>
<title>My page title</title:>
<meta http-equiv="x-ua-compatible" content="ie=8">
<style type="text/css">
body { background-color: navy }
</style>
</head>
<body>
<p>Hello, world</p>
</body>
</html>
If your machine is not showing this, then I would consider other environmental factors, such as basic syntax errors, out of date video drivers, loose cable connections, or related things
Hope this helps...
-- Lance
If you are getting the wrong blue, it's most likely how IE is reading the color "Navy". Have you tried using specific HEX codes? A browser will read a hex code the same, but color names can appear differently, try using the HEX Code like below.
background:#000080; /*Navy BG Color*/
or
background-color:#000080; /*Navy BG Color*/
My IE displays these as the same colors.
Heres a site you can get the browser HEX codes for each color name:
http://www.color-hex.com/color/000080
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
How do I get IE6 to display inline base64 encoded images?
<img src="data:image/png;base64,....." />
This works in Firefox/Chrome/Safari but not IE6.
My solution run smoothly on IE6. It may help you!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
Install Google's Chrome Frame?
Seriously, you can't. IE6 does not have support for base64 inline images.
IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.
base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.
"write two attributes in a same class. Use css browser specific hacks"
I am going to explain it below.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.
You can use base64 in CSS, at least.
Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Perhaps more research could possible help using mhtml:// for inline images, too.
This could be a quick fix to make Base64 images showing up in IE6 again:
Base64 image fix for Internet Explorer
*Sorry for the broken link, now comes the correct one!
I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.
ORGINAL
I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.
EDIT
Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**