Skip to main content

HelpViewer rendering problem with CSS definition

3 replies [Last post]
Anonymous

I'm having a problem getting a CSS tag style definition to render properly
in the JavaHelp help viewer (JDK 1.4.2_05) and am wondering if I'm doing
something wrong. What I'm trying to do is substitute those ugly default
bullets in

    lists for nicer graphic images. Since our helpsets are
    large, I want to do it by changing the definition of the standard
      list
      images rather than requiring that our writers apply classes to all their
      unordered lists. Here are the style definitions in the CSS file:

ul {list-style-image: "images/blue-ball-mid.gif";
margin-top: 5;
margin-bottom: 0;
margin-left: 14}

li ul{list-style-image: "images/blue-sqr-mid.gif"}

This works fine with a bulleted list and its sublists (we don't usually
have more than one sublist of a bulleted list). For example, the following
code displays the blue-ball-mid.gif graphic for the main list and the
blue-sqr-mid.gif graphic for the sublist:

  • First bullet
  • Second bullet
    • First sub-bullet
    • Second sub-bullet
  • Third bullet

Where it doesn't work is when there's an

    inside the bulleted list. The
    ordered list apparently inherits the bullet image style from the
      it's
      in, and the ordered list looks like a bulleted list. Here's an example of
      code that exhibits this inheritance behavior in the help viewer:

  • First bullet
  • Second bullet
    1. First step
    2. Second step
  • Third bullet

I've tried all kinds of ways of defining the ordered list tag in CSS to
cause the ordered sublist to display numbers instead of the inherited
bullet graphic, but nothing in CSS seems to work with the JavaHelp help
viewer. I have been able to get it to work in HTML by breaking the
inheritance as follows (but this isn't a good solution because not only is
it not good HTML coding practice, it messes up the inheritance if the
ordered list is in an unordered sublist, and it requires more kludges to
get the unordered sublist to work):

  • First bullet
  • Second bullet
    1. First step
    2. Second step
  • Third bullet

Has anyone on this list who's implemented their own bulleted list graphics
gotten this to work some other way?

Thanks,
Paul
paul.fussell@sun.com

********************************************************************************

You may leave the list at any time by sending message with no subject and
"SIGNOFF JAVAHELP-INTEREST" in the body to LISTSERV@JAVA.SUN.COM. Archives
are available at http://archives.java.sun.com/archives/javahelp-interest.html.
Submit bug reports at http://java.sun.com/cgi-bin/bugreport.cgi.

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
larry hoffman

Paul,

This works for us:

ul {margin-top: 10;
margin-bottom: 0;
margin-left: 30;
-bullet-gap: 70;
list-style-image: ../images/blueListBull.gif}

Note that the path to the image is relative to the style sheet (didn't
used to be).

Larry

Paul Fussell wrote:
> I'm having a problem getting a CSS tag style definition to render properly
> in the JavaHelp help viewer (JDK 1.4.2_05) and am wondering if I'm doing
> something wrong. What I'm trying to do is substitute those ugly default
> bullets in

    lists for nicer graphic images. Since our helpsets are
    > large, I want to do it by changing the definition of the standard
      list
      > images rather than requiring that our writers apply classes to all their
      > unordered lists. Here are the style definitions in the CSS file:
      >
      > ul {list-style-image: "images/blue-ball-mid.gif";
      > margin-top: 5;
      > margin-bottom: 0;
      > margin-left: 14}
      >
      > li ul{list-style-image: "images/blue-sqr-mid.gif"}
      >
      > This works fine with a bulleted list and its sublists (we don't usually
      > have more than one sublist of a bulleted list). For example, the following
      > code displays the blue-ball-mid.gif graphic for the main list and the
      > blue-sqr-mid.gif graphic for the sublist:
      >
      >
        >
      • First bullet
      • >

      • Second bullet
        >
          >
        • First sub-bullet
        • >

        • Second sub-bullet
        • >

        >

      • >

      • Third bullet
      • >

      >
      > Where it doesn't work is when there's an

        inside the bulleted list. The
        > ordered list apparently inherits the bullet image style from the
          it's
          > in, and the ordered list looks like a bulleted list. Here's an example of
          > code that exhibits this inheritance behavior in the help viewer:
          >
          >
            >
          • First bullet
          • >

          • Second bullet
            >
              >
            1. First step
            2. >

            3. Second step
            4. >

            >

          • >

          • Third bullet
          • >

          >
          > I've tried all kinds of ways of defining the ordered list tag in CSS to
          > cause the ordered sublist to display numbers instead of the inherited
          > bullet graphic, but nothing in CSS seems to work with the JavaHelp help
          > viewer. I have been able to get it to work in HTML by breaking the
          > inheritance as follows (but this isn't a good solution because not only is
          > it not good HTML coding practice, it messes up the inheritance if the
          > ordered list is in an unordered sublist, and it requires more kludges to
          > get the unordered sublist to work):
          >
          >

            >
          • First bullet
          • >

          • Second bullet
          • >

            >
              >
            1. First step
            2. >

            3. Second step
            4. >

            >

            >

          • Third bullet
          • >

          >
          > Has anyone on this list who's implemented their own bulleted list graphics
          > gotten this to work some other way?
          >
          > Thanks,
          > Paul
          > paul.fussell@sun.com
          >
          > ********************************************************************************
          >
          >
          > You may leave the list at any time by sending message with no subject and
          > "SIGNOFF JAVAHELP-INTEREST" in the body to LISTSERV@JAVA.SUN.COM. Archives
          > are available at
          > http://archives.java.sun.com/archives/javahelp-interest.html.
          > Submit bug reports at http://java.sun.com/cgi-bin/bugreport.cgi.

          ********************************************************************************

          You may leave the list at any time by sending message with no subject and
          "SIGNOFF JAVAHELP-INTEREST" in the body to LISTSERV@JAVA.SUN.COM. Archives
          are available at http://archives.java.sun.com/archives/javahelp-interest.html.
          Submit bug reports at http://java.sun.com/cgi-bin/bugreport.cgi.

Chris Morris

On Fri, 23 Jul 2004 13:24:23 -0700, Paul Fussell
wrote:

>I'm having a problem getting a CSS tag style definition to render properly
>in the JavaHelp help viewer (JDK 1.4.2_05) and am wondering if I'm doing
>something wrong........

>Here's an example of
>code that exhibits this inheritance behavior in the help viewer:
>
>

    >
  • First bullet
  • >

  • Second bullet
    >
      >
    1. First step
    2. >

    3. Second step
    4. >

    >

  • >

  • Third bullet
  • >

>.............

>Has anyone on this list who's implemented their own bulleted list graphics
>gotten this to work some other way?
>
>Thanks,
>Paul
>paul.fussell@sun.com
>

We have succesfully used a stylesheet in which the bulleted list has our
own defined bullet image. The CSS definition is thus:

/*** Used for JRE 1.4 and above ***/
ul {margin-top: 10px;
list-style-image: images/blacklistbull.gif}

/***Used for JRE 1.3.x only ***/
/* ul {margin-top: 10px;
list-style-image: ../images/blacklistbull.gif} */

/*******************************************************/

ul ol {list-style-image: none;
list-style-type: decimal}

The last part of the definition explicitly halts the inheritance for
numbered lists embedded within bulleted lists. This approach works well,
but be aware that if you have more comlex structures you may need to review
how it's defined in the CSS.

Hope this helps.

Chris.

********************************************************************************

You may leave the list at any time by sending message with no subject and
"SIGNOFF JAVAHELP-INTEREST" in the body to LISTSERV@JAVA.SUN.COM. Archives
are available at http://archives.java.sun.com/archives/javahelp-interest.html.
Submit bug reports at http://java.sun.com/cgi-bin/bugreport.cgi.

Paul Fussell

>On Fri, 23 Jul 2004 13:24:23 -0700, Paul Fussell
>wrote:
>
> >I'm having a problem getting a CSS tag style definition to render properly
> >in the JavaHelp help viewer (JDK 1.4.2_05) and am wondering if I'm doing
> >something wrong........\

At 01:23 AM 7/26/2004, Chris Morris wrote:

>We have succesfully used a stylesheet in which the bulleted list has our
>own defined bullet image. The CSS definition is thus:
>
>/*** Used for JRE 1.4 and above ***/
>ul {margin-top: 10px;
> list-style-image: images/blacklistbull.gif}
>
>/***Used for JRE 1.3.x only ***/
>/* ul {margin-top: 10px;
> list-style-image: ../images/blacklistbull.gif} */
>
>/*******************************************************/
>
>ul ol {list-style-image: none;
> list-style-type: decimal}
>
>The last part of the definition explicitly halts the inheritance for
>numbered lists embedded within bulleted lists. This approach works well,
>but be aware that if you have more comlex structures you may need to review
>how it's defined in the CSS.

Thanks, Chris. Your suggestions worked great. The main thing I needed to
know was that "list-style-image: none;" breaks the inheritance. (I tried
other list-style-image definitions that definitely didn't work.) Also, I
got rid of our generic "li ul" and "li ol" style definitions and replaced
them with explicit definitions starting with "ul" and "ol", such as "ul li
ul". To cover all the alternatives, I needed a lot of these explicit
definitions, but they worked fine with our test file, so it looks like our
writers won't need to change anything to see the new styles in their help
topics.

Thanks again,
Paul
mailto:paul.fussell@sun.com

********************************************************************************

You may leave the list at any time by sending message with no subject and
"SIGNOFF JAVAHELP-INTEREST" in the body to LISTSERV@JAVA.SUN.COM. Archives
are available at http://archives.java.sun.com/archives/javahelp-interest.html.
Submit bug reports at http://java.sun.com/cgi-bin/bugreport.cgi.