CSS not recognized when style tag added during Live Preview, before CSS file exists

[MitchellvB]

Original Subject: Live Preview not working for CSS

System: Mac OSX 10.9.3 Brackets: Sprint 39 Chrome: version 35.0.1916.114

Live Preview does not work at all with CSS. It works fine with HTML. I have tested all the suggestions on the troubleshooting page and searched the topics for similar problems.

The case I am testing is very simple: a folder including only a .html and a .css file. The .html file refers to the .css file. The .html includes only some simple very basic code, including a header with a certain ID. The .css defines the background color of this header.

When I activate Live Preview Chrome opens and shows the page perfectly. When I alter the text in the header, it is immediately updated in Chrome (without saving or refreshing).

When I go to a css line, the Live Preview highlights the section which the css line relates to. However, when I change for example the color in the css line (either in the .css file or in the quick edit view), nothing is changed in the preview in Chrome. When I then save the files (html and css) and refresh the Chrome webpage, still nothing changes. (the Live Preview is still working for the html and to highlight the sections)

When I then disable Live Preview and enable it again, the page is reopened in Chrome with the new color. However, when I refresh the page in Chrome (without changing anything else), the color is changed back to its original color, while this 'setting' is nowhere in the css anymore (the adjustment has been saved).

The same works the other way around: when I change the color say from yellow to red, save the file and refresh the Chrome page (Live Preview is constantly on) I see that it does not update the view (still yellow). If I then, before doing anything else, change the color back again to it's original color (yellow) in the css file, save the file and disable Live Preview to enable it again, the page is shown with a red header background...

I get the feeling that I am missing something obvious here because it doesn't work at all with css while it works with html, but I can't figure out how to get it working.

[redmunds]

@MitchellvB Is your stylesheet referenced via <link> or @import? Can you post links to or copies of your files?

[MitchellvB]

They are referenced via a link. Here are the files:

• HTML: http://www58.zippyshare.com/v/85857197/file.html
• CSS: http://www58.zippyshare.com/v/23282812/file.html

UPDATE: links have expired.

[MitchellvB]

Hi @redmunds,

I've been testing some more, and all of the sudden I noticed that Live Preview was working for css as well.

So I checked the other html file I made Friday (see the links above), but that one still does not work with Live Preview for css.

Another file I made this evening also doesn't work: HTML: http://www13.zippyshare.com/v/53779094/file.html CSS: http://www13.zippyshare.com/v/11897382/file.html

The latest file I was made however works with Live Preview also for css: HTML: http://www45.zippyshare.com/v/33237897/file.html CSS: http://www45.zippyshare.com/v/57687342/file.html

The only difference in creating these two files is that the first one was made based on a copy of the one in my previous post, and the second one was made from a completely new, blank file (created in Brackets).

So probably the problem is the same in the first file of this post as it is in the file in my previous post, however, I wanted to share it to be complete.

If I now have all three files open in Brackets at once (in the folder structure left and the working files), I can switch between all three files with the same results: Live Preview does not work for two of the files, while it keeps working for the third.

I compared the two files and tried to adjust the following because these are differences between the files:

• add the general css command ("*{}") in the last/third file;
• add the slash ("/") in the link tag to close it in the first two files, since I forgot it there.

Both did not seem to have any effect.

[MitchellvB]

@redmunds After some further testing I have found the issue.

When I type the file name of the css file I want my html file to refer to, I get a drop down menu of the files in the current folder. If I select the css file from this drop down menu instead of typing the file name myself, the Live Preview does work with css.

Also for the old html files with which it did not work - if I re-enter the referenced file, but now via the drop-down menu, it works like a charm!

[redmunds]

Glad you figured it out. I didn't download your files because it requires installing a plugin that I've never heard of before.

There must be some difference between the file reference that you typed and the one that was inserted by the code hints. Was there any encoding such as %20 replacing a space char? Was it enclosed in quotes or url()? Were there spaces before/after it?

[MitchellvB]

No, there was no space in the name, nor any special characters. The file was named "Test.css" and referenced via: <link rel="stylesheet" href="Test.css" />

So nothing could go wrong there. I have done some additional testing and found that the problem is not so much in using the code hints or not, but in the sequence of creating the files.

I usually create my html file, put in my basic structure (including the stylesheet link) and only after most of the html structure has been inserted, I create a css file. However, it seems that when typing a link to a css file that not yet exists in the current folder, the link does not work for Live Preview.

If I first create a css file (a blank document is sufficient, as long as there is a file with that name in the current folder) and only then type the link to it in the html file, it does work with Live Preview.

edit: and sorry for the plugin, I've never used zippyshare before and it seems that I won't anymore either :-)

[redmunds]

@MitchellvB Great detective work! I updated the Subject to better describe the issue.

[gineg]

I am a beginner, and confused how to use the .html file and .css file of mine. I prepared them using Sublime Text 2 and paste them in github respiratory of mine, as site it displays but clearly the style format .css doesn't work. Actually, they are under one folder, but I think somehow they have to have some connection, but they don't. How to solve my problem, please?

[redmunds]

@girm1 Live Preview uses the browser, so your page needs to work in browser without Brackets or Live Preview. Once your page is working in a browser, then you can use Live Preview.

[gineg]

Hi, Randy, Thank you very much, for your fast answer. As I said last time, I am new for the github system, unfortunately, I couldn't realize your answer. From my sublime text 2 of my computer, my project has shown good on the browser; however, when I created the respiratory in github and override the existence .html and.css files by mine, by simply copying from sublime and paste to github, in fact, the html file is shown on the browser, but terribly, because of not reading the .css file or not formatted. For clearance, I attached the two files, with some modification. Please, explain me step by step what I have to do. Thank you,

Girma

On Sun, Jan 25, 2015 at 2:17 PM, Randy Edmunds notifications@github.com wrote:

@girm1 https://github.com/girm1 Live Preview uses the browser, so your page needs to work in browser without Brackets or Live Preview. Once your page is working in a browser, then you can use Live Preview.

— Reply to this email directly or view it on GitHub https://github.com/adobe/brackets/issues/7990#issuecomment-71390682.

[redmunds]

@girm1 First, go through the Troubleshooting guide -- you might find solution there.

Otherwise, your problem does not seem to be related to this issue, so please open a New Issue with all of these details. Attached files to not get sent through so you have to paste in the contents in issue (if files are small enough) or provide a link to your files.

[peterflynn]

Actually, this question doesn't sound like it's related to Brackets at all. I don't see any mention of Live Preview or other Brackets features. It sounds like the question might actually be about GitHub Pages, an online hosting feature of GitHub itself.

@girm1 If you're actually using the desktop code editor app Brackets, could you post a series of screenshots showing what you're doing in Brackets, along with more details on what you're trying to accomplish?

In the meantime though, I'll close this since I suspect it's not a Brackets issue.

[redmunds]

@peterflynn Re-opening. I asked @girm1 to open a new issue because that problem is unrelated to this issue, but this issue (captured in this comment) is still valid.

[peterflynn]

Ah, sorry -- somehow I missed the earlier comment history above that :-/

[peterflynn]

Workaround: delete & re-add the tag after creating the CSS file. Then Live Preview will reflect the CSS file (and will update live to reflect future edits to it).

This is probably similar to #7348: HTML Live Preview creates the tag, but the tag fails to load since the file doesn't exist yet; later, when the file does exist, we have to go back and poke the browser to "retry" loading the tag (which can only be done by removing it from the DOM and re-adding it).