I have a static web page that displays icons embedded in one of the css references. The icons are not displayed properly and we see some junk characters instead when browsed to from IIS. The same web page when opened directly in the browser seems to render fine. I wonder if it is some misconfiguration in the static page website but I am unable to figure out what the issue could be. Would greatly appreciate any help to solve this issue.
The page when rendered by IIS:
The page when rendered by browser directly:
Looks like the CSS file is the issue.
The css file when browsed to via IIS:
The original css file opened with the browser:
If you use extended styles and sass syntax, when SASS does the compression, it changes Font Awesome characters from escaped ASCII sequences to unicode. So you need to add <meta charset="utf-8" /> in the head to let the browser know how to interpret it.
Related
I've created a micro page with absolutely no external references, even without any favicon.ico.
Instead I'm using base64 inline images.
The only CSS I'm using is inline of a <div> element.
The following code is not part of my source, so I don't know where it becomes generated.
Where and how does the following code come from?
What is it's meaning? What consequences does it have?
Fulltext for copy&paste:
<style type="text/css" style="display: none !important;">object:not([type]),object[classid$=":D27CDB6E-AE6D-11cf-96B8-444553540000"],object[classid$=":d27cdb6e-ae6d-11cf-96b8-444553540000"],object[codebase*="swflash.cab"],object[data*=".swf"],embed[type="application/x-shockwave-flash"],embed[src*=".swf"],object[type="application/x-shockwave-flash"],object[src*=".swf"],object[codetype="application/x-shockwave-flash"],iframe[type="application/x-shockwave-flash"],object[classid$=":166B1BCA-3F9C-11CF-8075-444553540000"],object[codebase*="sw.cab"],object[data*=".dcr"],embed[type="application/x-director"],embed[src*=".dcr"],object[type="application/x-director"],object[src*=".dcr"],object[classid$=":15B782AF-55D8-11D1-B477-006097098764"],object[codebase*="awswaxf.cab"],object[data*=".aam"],embed[type="application/x-authorware-map"],embed[src*=".aam"],object[type="application/x-authorware-map"],object[src*=".aam"],object[classid*="32C73088-76AE-40F7-AC40-81F62CB2C1DA"],object[type="application/ag-plugin"],object[type="application/x-silverlight"],object[type="application/x-silverlight-2"],object[source*=".xaml"],object[sourceelement*="xaml"],embed[type="application/ag-plugin"],embed[source*=".xaml"]{display: none !important;}</style>
I can think of two possibilities:
1) Added by a browser plugin or extension.
Try running in Incognito mode with all extensions disabled, and if it's due to a plugin or extension the additional content will go away.
2) Added by the web server that is serving the web page
To see if it's #2, load the HTML file in your browser using a local file:// URL and check if it's still there.
Most likely it's related to an Ad-Blocking type of browser plugin that is setting { display: none !important } CSS attribute for all Flash, Shockwave, Silverlight, etc. content on the page.
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
So here's an interesting conundrum.
I have a page, default.aspx. It has a LINK tag to a stylesheet, located in the CSS subfolder:
<link type="text/css" rel="Stylesheet" href="Css/Logon.css" media="all" />
The folder structure is as follows:
[Root]
[CSS]
[Images]
[Logon]
No big surprises. (Our default.aspx page is our logon page. Again, no big surprises.)
Here's the problem. If you launch the page in IIS, the page renders beautifully. CSS loads, fonts appear, everything is positioned appropriately, and lions are laying down with lambs.
If you view the page in WebDev, the stylesheet isn't loaded. Since it specifies all the images, fonts, and positioning, everything is black on white, in Times New Roman, slammed left against the window border. Dogs are chasing cats in circles and causing traffic accidents. Chaos ensues.
Why? How do I fix it? What information do I need to provide to reach a happy conclusion?
P.S. I am aware of the URL differences between running it in IIS and Webdev, but the differences don't seem to make much sense to me, due to one simple fact: the path to the style sheet is relative to the location of the default.aspx page. The stylesheet isn't being loaded at all. I can see this because there's no font styling at all.
My recommendation would be to use Firefox to load the page. With the Firebug add-on installed you can view the requests for the CSS files in the Net panel. This will allow you to at least see the path that is being used for the CSS file.
If you have not used the network monitoring feature in Firebug before you may want to go here:
http://getfirebug.com/network
We eventually discovered the cause of this problem using Fiddler: HTTP 401 (Unauthorized). A little more research uncovered that we needed to add explicit <location/> entries for the stylesheet, and all the images it referenced, to our web.config file.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
The web dev toolbar for Firefox is quite an impressive tool.
What I am completely clueless about is how does this tool get the css stylesheet file of a site? This is hosted on a host which is secure etc. I am completely stumped.
I must be thinking about this in all the wrong way.
Thanks
The client (in this case Firefox) has to download the CSS file in order to render the page correctly. The plugin (in this case Firebug) simply requests the proper URL and the browser it gets it--most likely from the cache. There is no real mystery here.
In every HTML file, there's a link to the CSS stylesheet, or else the browser wouldn't know where to find it, thus losing the ability to render the page correctly.
It's in the form of <link rel="stylesheet" type="text/css" href="theme.css">,
I'd like to add that regardless of whether the host is 'secure' or not, it still is presenting the file to the client.
Unless, of course, you're looking at a XML file. Then you need to consult the XSL which'll tell you where the stylesheet is.