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
Related
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've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.
Link to website:
http://www.ideagang.co/home.php
Is it possible to set the background to black when click from 1 page to another?
Right now the website load perfectly with the black background, it's just that when I navigate from one page to another the page flickr for a second.....
Is there anyway to resolve this by setting the background to black when loading page internally?
Not using only CSS. The browser's default color for the background is white, so the flicker you see is the default coming through for a split second before it has a chance to read the CSS rule to make it black.
The only way I can think of to get around this would be to load the first page, and then switch from page to page via javascript, loading them in to the exiting page. No reloads means no flicker. In my opinion, that is a ton of overhead for very little value, so I would suggest just living with it.
I very much doubt this would be possible with CSS.
Have you tried using
<body background="#000">
It is long deprecated but may help. I think you will still get a white flash but it may be for less time.
You could also try putting a small block of CSS as the first thing in the header after your title.
the html5 method of doing this via CSS is now:
<body style="background-color:#000">
also tried putting this CSS styling as the first thing in the <head> :
<style type="text/css">
body{background-color:#000}
</style>
...but on my application it still resulted in a momentary white flash
While this is a pretty old question, hopefully this can help someone else who stumbles along (like me):
Using some javascript seems to have worked for me (only tested on Firefox 84.0 - Ubuntu):
index.html:
<script src='script.js'></script>
script.js:
onload = function() {
document.body.style.backgroundColor = 'black';
}
I believe the most efficient way to accomplish this is to place the background color in the html tag itself in the main document file. Such that
<html lang="en" style="background-color: #111">
With this you can set any background color you want and it should work.
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.