HTML

What's covered?

This topic is intended to cover some of the HTML issues that recur regularly in the RoboHelp forum.

Cascading Style Hierarchy

A lot of problems on the RoboHelp forums are related to styles not appearing as the author believes they should. Very often, although not necessarily, this can be linked to topics created by importing a document from Word. Once the hierarchy of html styles is understood, it is often quite easy to fix the problem.

It is important to understand that HTML is a language that was designed to control the structure of an HTML page rather than its appearance. Tags tell a browser whether it is to display a heading, a normal paragraph, a numbered list, a bulleted list etc. Without further input, each tag will display the text according to the browser settings and html language defaults for the specific tag.

Values can be set within each instance of a tag so that, for example, a heading is displayed in red text. This can be likened to using Word with just one style and having to manually format some text.

Cascading Style Sheets are a development that allow an author to define the appearance of content wherever a particular tag is used, a bit like defining a style in Word. The style sheet can define the appearance of a particular tag such as the <H1> or <P> tags so that where those tags are used, the appearance will be as defined in the style sheet. The style sheet can either be a file linked to the page or it can be defined in style block in the page.

The hierarchy is very simple and to keep it simple, we will only consider defining the <H1> tag:

Method

About

Inline

Instead of the basic <H1> tag, the colour can be defined as below. Note that browsers will expect the US spelling of words such as colour.

<H1 style = color: red>

If an inline style is defined, this will override anything in the style block or the style sheet.

Embedded Style Block

A style block can be defined between the <HTML> and <BODY> tags and can set the style for whichever tags you want.

In this example we will define the colour for the <H1> tag as blue.

<STYLE TYPE="text/css">

<!--

   H1 {color: blue}

-->

</STYLE>

The comment tags are not necessary in modern browsers. They prevent the text "H1 {color: blue}" being displayed in older browsers.

If a style block is embedded, then it will override anything in the style sheet but will only take effect if nothing is defined inline. Thus in a topic with an <H1> tag, the text would be blue as nothing has been set inline. If the tag was written as <H1 style = color: red>, then it would override the style block and the text would be red.

Linking to Style Sheet

A style sheet can be linked within the <HEAD> tags and can set the style for whichever tags you want.

For example, if your style sheet is called stylesheet.css, you would create a link as below making sure the path is set as required.

<link rel="StyleSheet" href="..\..\stylesheet.css">

Whatever you define here will apply to all pages linked to the style sheet unless it is overridden by an embedded style block or an inline style.

 

So if a style does not appear in the way you expect, track the styles to find out which definition is being applied. If you are having trouble fixing the problem and are running out of time, you might like this quick fix supplied by Dan Deming.

 

Let's say you style sheet definition is something like this:

H1 {
color: rgb(210, 220, 235);
font-size: 17pt;
font-weight: bold;
margin-left: -0.5pt;
margin-top: 0pt;
margin-bottom: 10pt;
font-family: Verdana, sans-serif;
background-color : rgb(30, 95, 170);
}

Add !important before the semi-colon

so that it looks like this:

H1 {
color: rgb(210, 220, 235);
font-size: 17pt;
font-weight: bold;
margin-left: -0.5pt;
margin-top: 0pt;
margin-bottom: 10pt;
font-family: Verdana, sans-serif;
background-color : rgb(30, 95, 170)
!important;
}

Now what is defined in the style sheet will override any embedded or inline definitions.
Care though, it will always override, even in places you don't want it to. Can be a quick-fix solution though.

 

RoboHelp users might like to note that I saw one post where the problem was attributed to a long path and filename.

"Believe it or not, the problem was long file names. My .css was called Implementation and Sys Admin’s Guide and by the time topics got four levels deep (../../../../), the .chm conversion was truncating the .css file name.

There is a wealth of tutorials on the web but unfortunately one of the clearest, written by Handan Selamoglu, has been pulled from the Microsoft MSDN site. It is dated in some respects but nonetheless well worth a read because of its clarity.

I recommend that you visit these sites before searching further afield.

Hyperlinks

To edit the appearance of hyperlinks, you need to set values for unvisited links and visited links. You may also want to set a value for the appearance of a link when the mouse is hovered over it.

This would look something like the lines below in a style sheet.

A {
color: rgb(50, 100, 155);
}
A:VISITED {
color: Red;
}
A:HOVER {
color: rgb(50, 100, 155);
background-color : rgb(200, 210, 225);

Note that these lines will not affect the colour of links for expanding and dropdown hotspots. See the next section.

Expanding and Dropdown Hotspots

Another "favourite" source of problems is having edited the hyperlink colours and / or fonts, the hyperlinks for expanding and dropdown hotspots are not taking on those attributes. This is because they are specific classes and those classes have to be edited.

You can either

OR

Thus to change the colour of the text you would just need something like the definition below, the hover definition is of course optional. The colours can be expressed either by name or RGB value or hexadecimal value.

A.expandspot {
color: red;
}
A.expandspot:HOVER {
color: rgb(0, 204, 0);
}
A.dropspot {
color: blue;
}
A.dropspot:HOVER {
color: rgb(204, 0, 204);
}

Donations

If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions

Date

Changes to this page

08 May 2010 WebMonkey link corrected.
31 Jan 2006

Dan Deming's tip on adding !important to a style sheet definition added.

Warning re long path and file names added.

27 Dec 2004 New topic.