Stylesheets Conflicting in Master Page HTML?

[JoeJitsu]

Hey all, got an interesting case here. Apologies for long read.

I worked with a web developer here at my company to create a nice little script for a Feedback tab that appears on each topic. Click it, opens up to Was this Helpful > Yes or No. User clicks, and the server emails me the results. Works great both front and back end.  However, there is some funny behavior on the project side.

The portion of code is below (these are the last three lines; I bolded the line in question)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  <script src="../guidefeedback/feedback.js?v1.0" type="text/javascript"></script>

<link href="../guidefeedback/feedback.css?v1.0" rel="stylesheet" type="text/css">

When I drop the entire code into the footer of the Master Page (in HTML mode of course), RoboHelp accepts it, recognizes the scripts, etc., but it automatically moves the bold line up to the header, directly below the line of code for the Master Page's default CSS:

<link rel="StyleSheet" href="Millennium_OnlineBooking.css" type="text/css" />

<link href="../guidefeedback/feedback.css?v1.0" rel="stylesheet" type="text/css" />

</head>

Now if I just leave everything alone, regenerate, and place the output on the server, everything works great. But if I make ANY minor change to the Master Page...either in Design or HTML view...and save, it blows away the default CSS that is applied to all topics. The code in the Master Page HTML remains the same, the default CSS remains the same, but if I look at individual topics' Properties > Appearance, the CSS has been defaulted to None. If I remove that bold line from code, I can make changes to the Master Page to my heart's content with no odd behavior or style sheet changes to topics. This line is definitely confusing RH in some way.

I know an easy workaround is to just pull up Topic List and reapply the desired CSS to all applicable topics, and I know I will rarely be editing a Master Page once I get it how I like it, but I can't help feeling that we're missing a fundamental tweak that will allow RH to manage two CSS.

Does anyone know what am I missing here?

Thanks in advance!

Joe C.

[Willam_van_Weelden · Accepted solution]

You can add multiple CSS files to a topic in RoboHelp, but the RoboHelp dialog doesn't understand it. Nothing to be done about that. I have also tried using @import rules, but RH doesn't like that either. I the end, I merged al my CSS files into one. That works as expected.

[JoeJitsu]

Thanks William. I tried @import rules as well!  I knew combining CSS was an option, but I was stubbornly holding out hope that two calls to a CSS could coexist peacefully.

Nevertheless, it turns out your advice was spot on, as usual. Combining the Feedback CSS into my project's CSS and removing the call to the external CSS from the Master Page code resolved everything. Works like a charm.  Thank you again!

[Amebr]

Willam van Weelden​, could you expand on the problem with @import rules?

I've got one set up in a release notes css which imports my regular css for p tags etc. The release notes css targets some specific formatting I only want available in the release notes.

It all seems to be working, but if there are known issues it would be helpful to keep an eye on them.

[Willam_van_Weelden]

The Design view doesn't show all styles as you may expect. Your output will work, but you may have to add the imported CSS as a baggage file. On occasion, I've found that the CSS editor from RoboHelp crashes when an @import rule is present (HTML editor works fine). Especially when you chain @import rules, you can have unexpected rewrites of your CSS and crashes.

[Amebr]

Ah, that would probably explain why I haven't seen any issues. I'm importing my base css into a special release notes css, so both stylesheets are "known about" by RH. And I edit almost exclusively in HTML view.

I'll give some serious thought to them, considering future maintenance.

Many thanks.