0

I have a website that runs smoothly, but I just saw that when I'm viewing the source, in Chrome and IE9, it shows my css and javascript inline instead of the link to the files. <style type="text/css" style="display:none">[my css]</style> instead of the <link rel="stylesheet" type="text/css" href="style.css" /> that I see in my PHP editor and that I coded on purpose. I don't see things like this on other websites, only at mine.

How is this possible? A certain change in server settings?

Sgarz
  • 331
  • 3
  • 17
  • 3
    Possible to post a example of whats going wrong so we can see it ? – Patrick R May 02 '12 at 16:11
  • Are you sure you didn't accidentally click on the "Scripts" tab in the developer tools frame? – HMartch May 02 '12 at 16:14
  • @PatrickR The site is www.drawsomethingwords.com and I tried to turn off all developertools, if I am not missing one I've turned it all off and it's still happening. Is there a certain option that does this? – Sgarz May 02 '12 at 16:35

2 Answers2

0

There are 3 different ways of adding CSS to your HTML pages: inline, external, and attribute-based.

Inline CSS is what you have now. It's when the CSS code is directly embedded into your HTML.

External CSS is when you reference a CSS file, like your second example.

Attribute based CSS is when you directly set attributes in the HTML file. Ex:

<div style="CSS HERE"></div>

All 3 methods work the same, but for abstraction purposes, external stylesheets are recommended.

In your case, the PHP editor is probably injecting the CSS directly into your code.

Tushar
  • 8,019
  • 31
  • 38
  • And the problem is that I use external stylesheets, but they appear in browsers inline. – Sgarz May 02 '12 at 16:15
  • What do you mean by PHP editor? Just a notepad-like editor or a special software to create websites? – Tushar May 02 '12 at 16:17
  • I mean PHPStorm. But when I open them with notepad it's also ok, so appearing like a external link. – Sgarz May 02 '12 at 16:18
  • 1
    As Sohnee said below, it could just be the developer tools you're using then. – Tushar May 02 '12 at 16:19
0

The browser tools are just in-lining it to make your debugging easier. This is merely a convenience to show you the flow of the page. The files are still external and shared across many pages.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • Can you please explain to me why it's only happening on this site and not on others and in 2 different browsers? I'm certain I don't have browsertools active in IE9. – Sgarz May 02 '12 at 16:21
  • @user1269707 it is a tough one as I can't get this to happen on your site in Chrome or IE9. Did you switch from inline to external and perhaps were looking at a cached version from before the change? – Fenton May 03 '12 at 14:07