Search code examples
pythoncssgoogle-chromeinternet-explorer-8webapp2

Chrome not rendering stylesheets served by Python/WebApp2


I have no idea what I'm doing wrong.

I am using Twitter Bootstrap with a basic page for a front end and serving everything with Python / WebApp2 (Not Google App Engine) in the back end.

If I load the page from the server in Internet Explorer 8, the styles appear.

If I load the page from C:/ in Chrome, the styles appear.

If I load the page from the server in Chrome, the styles do not appear.

I've checked all my mime types, compared the C:/ and server pages and everything looks the same.

I cannot for the life of me figure out why Chrome isn't rendering the style sheets when served by Python / WebApp2.

I can't figure out how to put code without it actually processing in this text box, so the page I'm using is basically the same as the example shown here: http://twitter.github.com/bootstrap/getting-started.html

Any ideas?

Python Script for css https://i.sstatic.net/Tu4NX.png

Non Styled - Served by Python / Webapp2 viewed in Chrome https://i.sstatic.net/vfKIa.png

Styled - Pulled from C viewed in Chrome

https://i.sstatic.net/35C4S.png

Non Styled - Chrome Resources Tab https://i.sstatic.net/HvQXt.png

Styled - Chrome Resources Tab https://i.sstatic.net/Rel3r.png

I am able to pull up CSS file in Chrome Resources tab and see contents of CSS file. No warnings that it is interpreted as text/xml in console. https://i.sstatic.net/5gTUO.png


Solution

  • GAAAH I just figured it out!

    In my python code about, you can see I am using 'self.response.headers.add_header'. I guess whenever you use the 'self.response.out.write' function, it has a 'text/html' content type by default. if you 'add headers' to that, then it adds a 'text/css' header before the final 'text/html' header. Chrome then reads the last header and uses this as the content type for the style shee. I guess IE and Opera use the first? Anyways: to fix, use:

    self.response.headers['Content-Type'] = "text/css"
    

    and as a whole

    def css(self, css_dir, filename, extension):
        self.response.headers['Content-Type'] = "text/css"
        self.response.out.write(open(css_dir + filename + extension,"rb").read())
    

    Yay!