I have a third party application that can host HTML in something it calls a container. In the container, we do the following:
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible" />
<iframe style="WIDTH: 100%; HEIGHT: 640px" id="c_list"
src="/Path/ToMVC/ControllerPage" width="100%"></iframe>
In the _layout.cshtml that is used by ControllerPage, we hardcoded the links to the CSS in the head element. If I right click and pick "View Source", I can see the paths. Ex:
<link href="/Project/Content/Sheet.css" rel="stylesheet"/>
Despite all of the above, the CSS in Sheet.css is ignored/dropped/not used. When I view the "/Path/ToMVC/ControllerPage" URL in its own window, all the CSS renders without issue. How can I force the IFrame to stop dropping the CSS?
EDIT: Ok, I made a discovery. Using the F12 dev tools, I noticed the page using the IFrame was running in IE quirks mode instead of IE standards mode (Which is what the page is using when viewed outside of an IFrame). When I changed it to IE 9 Standards mode, all the CSS worked! Is there a way I can force the IFrame page to go with IE9 Standards instead of Quirks mode?
Related
I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome:
http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:
.parent {
max-height: 999999px;
}
But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout.
Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.
I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
I am working with a legacy third party site that allows me to add HTML to a container. The site will then show this HTML. I current have one of these containers hosting the following HTML
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<iframe id="the_id" src="http://blahblah.blah" width="100%" Height="640px"></iframe>
Since the third party site is legacy, it renders in Quirks mode. (If I try to force it into a different mode, the site does not load.)
The site contained in the IFrame, however is a modern site that uses a lot of CSS. Unfortunately, the CSS will not render when the parent is in Quirks mode. Can someone tell me if it is possible to force my IFrame to render in IE9 Document mode?
I'm using Paul Irish's HTML5 Boiler Plate.
The homepage renders fine on Chrome, Firefox, and IE8 (apart from the shadows / rounded corners - which is not of concern right now)
The margins, nav list are messed up in IE8.
It is linking to the CSS correctly, because the styles for the elements in the header come from the same file, but the positioning, and the nav list don't get their styles?
This is weird, because if there were issues in the CSS, wouldn't it render incorrectly in the root directory as well?
The script tag you're using to load Modernizr is using a relative URL, so it will only work at your domain's root:
<script src="js/libs/modernizr-1.7.min.js"></script>
Replacing it with a root-relative URL should fix this.
<script src="/js/libs/modernizr-1.7.min.js"></script>
Another tag has the same problem, but it's commented out, so it's not the cause of your rendering issues:
<!-- Uncomment if you are specifically targeting less enabled mobile browsersdo w
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
I've tried the following and all it does is change the Document Mode, not the Browser Mode:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
My particluar page only works when the browser mode is either IE7 or IE8 Compat View.
The code you posted should work.
Please ensure the following:
The meta tag is right at the top of the header, as first element after the <title></title>.
Restart IE and open your page without manually setting the Browser- or Document Mode from the Developer Tools. Setting these manually can overwrite IE's behavior and causes it to ignore the compatibility tag.