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"> -->
Related
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 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?
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
One of the sites I am developing is loading an external stylesheet:
#import url(http://www.othersite.com/stylesheet.css);
This works in every single browser properly, except for Safari. Safari does not even try to load it. What am I doing wrong?
Could it have to do with this old bug: http://www.thinkoomph.com/thinking/2011-04/odd-css-bug-in-webkit-and-safari-4/ ?
The solution is simple. My #import directive was surrounded by other
CSS instructions. Whereas IE tolerates this, the actual W3C spec
declares that #import directives should appear before any other CSS
instructions, and Firefox honors this restriction. Thus, my #import
directive was being ignored. I moved it to the top of the file and
everything started working.
and
At most one #charset rule may appear in an external style sheet — it
must not appear in an embedded style sheet — and it must appear at the
very start of the document, not preceded by any characters.
<link rel="stylesheet" type="text/css" href="http://www.othersite.com/stylesheet.css" />
I stumbled upon the solution while reading an article that details the pros and cons of using #import vs. tag. I tried using a tag instead of #import, and for whatever reason this solved my issue. Safari will now load the stylesheet. If anyone has any insight into why this works please comment :)
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.