Loads of white space in the middle of a table

[ChoccieMuffin]

Hi guys

Deadlines approach and of course that's when the gremlins come out of the woodwork.

I have a 2-column table that has a table style applied. In the first cell of my table I have a paragraph, followed by an unordered list with two bullet points, followed by a paragraph.
The rest of the table carries on quite happily.

Problem is, after the list in the table cell my HTML help output shoves in several tons of space, and a huge scrolling area. It also shoves in a horizontal scroll bar which is just not needed. I've checked the topic and can't see any extraneous formatting in there. But the oddest thing is, if I resize the help, the extra (unwanted) vertical space just disappears and the table displays just how I want it. (The horizontal scroll bar stays there though.)

Actually, I've just noticed the horizontal scroll bar is there on all of my topics, even the very simple ones that just have a couple of sentences in them and no tables, graphics or lists.

Can any of you think why this is happening, and where I should be looking for a solution? What can I show you that might help track it down?

Puzzled of Surrey.

[Daniel Ferguson]

This is hard to diagnose without looking at the code. Have you tried opening up developer tools in your browser to inspect the CSS to see what's going on?

As far as the horizontal scroll on every page, my best guess is that you have width or min-width property set on a container div somewhere. The white space in the table is a puzzler, but the fact that it corrects itself when you resize the window hints that you might have some bad responsive code in your CSS.

Does this issue occur in all browsers?

[ChoccieMuffin]

This is hard to diagnose without looking at the code. Have you tried opening up developer tools in your browser to inspect the CSS to see what's going on?

As far as the horizontal scroll on every page, my best guess is that you have width or min-width property set on a container div somewhere. The white space in the table is a puzzler, but the fact that it corrects itself when you resize the window hints that you might have some bad responsive code in your CSS.

Does this issue occur in all browsers?

Think you've found the reason for the horizontal scroll bar. I have a div in the master page (not something I set up) that has width=1920px, so that's probably what's done it. I'll fix that when we update the look and feel, so I'm not going to fret about that one, but good to know where it came from - thanks!

As for the vertical space, I've looked at the code in the topic, both in Flare and by viewing source on the generated topic, and it's as clean as it's possible to be with no extraneous inline formatting or anything. And there are other tables with lists in them that don't have the same problem, so I'm just stumped. What do you mean by "you might have some bad responsive code in your CSS"? I'm not a coder so any pointers will be gratefully received.

I'm not sure how it works on other browsers, this is just in Internet Explorer, which is the only one I have on my machine. Will need to install Chrome and see what happens there.

Thanks for your help, keep the suggestions coming.

[Daniel Ferguson]

RE responsiveness: In CSS, you can have different CSS properties apply to the same HTML elements based on certain media queries, such as screen width. When you say that the table is fine when you resize the screen, it makes me wonder if you have a media query in your CSS file that applies one set of CSS properties at a given screen width and then another set of properties at another width.

The best way to diagnose this is to use your browser's developer tools to see what CSS properties are being applied. That will show you where that extra white space is coming from so that you can go fix it. In most browsers, you can open developer tools by pressing F12. From there, you can use the select element function to click any element on your screen, and it will show you what CSS is being applied.

[ChoccieMuffin]

I can't imagine it's anything to do with responsive CSS, as I only have two mediums: print and non-print. I'm not using responsive output at all (we don't need it). And I have already examined the source text of the generated topic, and there is NOTHING in there that would suggest it should shove in acres of space - everything in the generated topic's code is as I would expect it to be, without even a stray CDATA thingy anywhere, just the table containing a paragraph, a list with two bullets and then more paragraphs.

[Daniel Ferguson]

It's certainly a stylesheet problem, not a topic problem. Tables have a lot of HTML tags in them, and they can be very tricky from a style standpoint as a result. That's why I mentioned that your best option is to look at the css styles that the browser is applying when you look this topic in your output. That will show you what style in your CSS style is applying the extra space. Once you know that, you can adjust the css file in your Flare project to make the correction.