Skip to main content
Inspiring
March 17, 2014
Answered

CSS not displaying properly

  • March 17, 2014
  • 2 replies
  • 616 views

My CSS file includes the following formatting for a "Note":

p.Note {

border-left-style: Solid;

border-right-style: Solid;

border-top-style: Solid;

border-bottom-style: Solid;

background-color: #fafade;

padding-left: 12px;

padding-right: 12px;

padding-top: 6px;

padding-bottom: 6px;

font-size: 9pt;

line-height: 12pt;

border-left-width: 1px;

border-right-width: 1px;

border-top-width: 1px;

border-bottom-width: 1px;

border-left-color: #a3a5a7;

border-right-color: #a3a5a7;

border-top-color: #a3a5a7;

border-bottom-color: #a3a5a7;

margin-top: 12px;

x-next-class: ;

x-next-type: P;

margin-bottom: 12px;

}

In IE 11, not using Document Mode=Edge, the CSS is applied as expected:

In IE 11, using Document Mode=Edge, the CSS is not applied as expected:

I suspect the issue is with the CSS itself.  The CSS displays correctly in the Design view of the topic in RH10, but does not display correctly if I view the topic using the CTRL+W command from within RoboHelp, and does not display correctly in the compiled project when viewed in Chrome or FireFox.  Any ideas?  Thanks!

This topic is closed to new replies. Start a new post to keep the conversation going.
Correct answer Tim D Morris

Resolved.  Class tag was somehow being applied as "note" instead of "Note".  Changed case and css now displays as expected.

2 replies

Willam van Weelden
Inspiring
March 19, 2014

If I have to guess, I would say it has to do with the name of the style.

Your HTML probably uses lower case while your selector in the CSS starts

with a capital letter.

Try the following selector:

p.note,

p.Note {

That should solve it.

Kind regards,

Willam

Tim D MorrisAuthorCorrect answer
Inspiring
March 17, 2014

Resolved.  Class tag was somehow being applied as "note" instead of "Note".  Changed case and css now displays as expected.