CSS Doesn't Work on Https Pages in Chrome and Ie

CSS doesn't work on HTTPS pages in Chrome and IE

Maybe try Protocol Relative URLs :

< link href="//www.domain.com/css/mainstyle.css" rel="stylesheet" type="text/css" >

The Protocol-relative URL - Paul Irish

Hope it can help!

CSS not working in Chrome

Comparing css links between the page you referenced and sub-pages, you have a "media" attribute in your link:

Problem:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px" />

Working:

<link href="/stylesheets/css_Sanford.css" rel="stylesheet" type="text/css" />

Try removing the "media" attribute and it should work fine.

More specifically, it does not appear that "only" is a valid operating for the media attribute. See this W3Schools page for details.

CSS formatting showing in IE but not Chrome or Firefox

Presentation (css) can appear different in different web browsers because each web browser has their own default and user configurable settings. You will always see differences between browsers because of differences in the default settings. eg. In the screen shot below using your sample code you can see that on my computer IE and other browsers display the page 'more or less' the same.
Canary v IE11

To make browsers display the same web pages 'more or less the same' you need to configure each of them with the same default settings for presentation (fonts, font sizes, color, background colors etc)

To debug rendering differences between browsers you need to use the DOM Explorer tab of the Dev tool in each browser(screen shot above) and compare the applied rules.

To help you further we would really need a screen shot from your computer, showing the browsers side by side. As you can see by the screen shot on my computer different browsers display the page 'more or less the same'. That's because I have configure all of my test browsers with the same user settings for presentation/accessibility (text size, zoom, color, background-color, font family, link and hover color etc).

The best way to test between browsers is to use https://www.browserstack.com/ because you are using virtual instances of vendors' browsers that have the 'factory' default settings. Comparing browsers on your own computer you should expect that the best result is that they will display the same web page "more or less the same", but not exactly the same.

To debug presentation, you need to use the DOM Explorer tab of your browsers dev tool.

<!DOCTYPE html>
<html>
<head>
    <title>Sprout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        h1 {
            font-family: Palatino, 'Palatino Linotype', serif;
            color: blue;
            font-size: 90px;
}

h2 {
    font-size: 32px;
}
    </style>
</head>
<body>
    <h1>Mysample</h1>
    <div class="hero">
        <h2>Sprout.</h2>
        <p>A book by J. Daniel Bedford</p>
        <a href="#">Read now.</a>
    </div>
    <p>© Mystwood Publishers Limited</p>
</body>
</html>

Internet Explorer doesn't recognize css

Issues 1

<!DOCKTYPE HTML>

it should be DOCTYPE

Issue 2

 <link rel=StyleSheet href="largecw.css" TYPE="text/css" media=screen/>

in this line media=screen is connected with / (media=screen/) and so it is not able to recognize media so better put it under quotes

 <link rel=StyleSheet href="largecw.css" TYPE="text/css" media="screen"/>

Can't see logo in Google Chrome but can in IE and Firefox

There seems to be a workaround to this issue. You can try to use <object> instead of <img>

<object height="100%" width="100%" data="Media/Images/logo.svg" type="image/svg+xml">
</object>

Please also refer to the following links for more details.

http://e.metaclarity.org/52/cross-browser-svg-issues/

http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (`file:///`)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

CSS Doesn't Work on Https Pages in Chrome and Ie