Why don't complex selectors work consistently?

ChoccieMuffin · Post by **ChoccieMuffin** » Tue May 15, 2018 6:29 am

Not sure if the title is a correct summary of the problem, so I'll explain.

* I have a small project with 10 topics. All topics use the same stylesheet.
* In a couple of my topics I have a table formatted with a tablestyle (the same tablestyle is used in both topics, don't know if that's relevant).
* In the second column of both tables I have a td which contains a p followed by a ul with a li in it.
* There is no additional inline formatting in either of the topics in that table.
* The first table is inside <body>, the second table is inside a <li> in a <ul>. As far as I can see, this is the only difference between the two tables.
* In the first topic, the li displays with the correct bullet style. In the second, it doesn't.

To try and identify the cause of the problem I copied the table in the second topic into another place in the topic so it wasn't inside a list and it displays with the correct bullet, so I think I'm missing a complex selector. Any suggestions? I'm too close to it and can't see the tree for the twigs, let alone the wood for the trees.

What do I need to add to my stylesheet so that list inside the table inside the li inside the ul displays bullets correctly?

I currently have the following complex selectors defined (plus lots of others but I don't think they are relevant):

* li table
* li table.TableStyle-1medium-2to5auto (this is the style used by both tables)
* td table.TableStyle-1medium-2to5auto
* td ul
* td ul li

Many thanks

Post by **NorthEast** » Tue May 15, 2018 7:31 am

Press F12 (in the browser), and use the 'inspect' option to select the item and look at its CSS. That'll tell you straight away which CSS rules and properties are being applied.

ChoccieMuffin · Post by **ChoccieMuffin** » Tue May 15, 2018 7:55 am

Dave Lee wrote:Press F12 (in the browser), and use the 'inspect' option to select the item and look at its CSS. That'll tell you straight away which CSS rules and properties are being applied.

Sorry, I meant to mention that the output is a PDF rather than a web page or help, this project only has PDF output.

Post by **NorthEast** » Tue May 15, 2018 8:04 am

So for the 'wrong' bullet style, is that not defined anywhere in your stylesheet?
My guess is that you have a complex selector that defines the bullet style for nested lists; e.g. ul ul li { } or a variant of that.

devjoe · Post by **devjoe** » Wed May 16, 2018 5:38 am

ChoccieMuffin wrote:
Dave Lee wrote:Press F12 (in the browser), and use the 'inspect' option to select the item and look at its CSS. That'll tell you straight away which CSS rules and properties are being applied.
Sorry, I meant to mention that the output is a PDF rather than a web page or help, this project only has PDF output.

You can still load the topic into Chrome, open the inspector, and in the Rendering tab, choose to emulate the print medium and it will display using the styles defined in your "print" medium instead of your default one.

ChoccieMuffin · Post by **ChoccieMuffin** » Thu May 17, 2018 3:00 am

Dave Lee wrote:So for the 'wrong' bullet style, is that not defined anywhere in your stylesheet?
My guess is that you have a complex selector that defines the bullet style for nested lists; e.g. ul ul li { } or a variant of that.

BIngo! Yes, the penny drops. It hadn't occurred to me that the list inside the table would count as a nested list, but of course that's what it is. And now a very easy thing to fix.

Dave, you are such a clever bloke!

MadCap Software Forums

Why don't complex selectors work consistently?

Why don't complex selectors work consistently?

Re: Why don't complex selectors work consistently?

Re: Why don't complex selectors work consistently?

Re: Why don't complex selectors work consistently?

Re: Why don't complex selectors work consistently?

Re: Why don't complex selectors work consistently?