MadCap Flare Style ID menu enlarged and not working - madcap

I'm fairly new to using Madcap Flare but have been using it without problems for a few months. Now suddenly the Style Class menu appears zoomed way out to many times its normal size, and it won't scroll or let me select a style. The steps to reproduce the problem:
Open an .htm topic in MadCap Flare 12.
In the XML Editor view, right-click on a P tag.
From the pop up menu, select Style Class > and wait.
After a few seconds, the style class menu pops up on the left but it's covering three-quarters of the screen from left to right, and covering the entire screen from top to bottom. The style items in the menu are so huge that only four of them are visible. I can't scroll through them nor select one.
Until recently the menu acted normally, popping up in a much smaller size and letting me scroll through it and select styles.
I haven't found any mention of this in my searches online.
Edit: Adding a few more pieces of info:
Resetting MadCap Flare layouts doesn't help.
This only happens on paragraph tags, I notice. If I right click on a li or h2 or any other kind, the style class menu acts normally.

The styles in the class menu come from a CSS file that might be corrupt or contain invalid syntax that Flare is parsing incorrectly.
Locate the CSS file (Default location within Flare: Content Explorer > Resources > Stylesheets > Styles.css).
Right-click the file and select Open with > NOTEPAD.EXE.
Copy the contents of the CSS file and validate it here: http://jigsaw.w3.org/css-validator/#validate_by_input
Fix the validation errors, then copy the results back into the CSS file and save you changes.

This seems to have been just a matter of the WYSIWIG popup styles menu expanding to display the one heading that the previous writer had set up to a large font size. In displaying the one heading style at 96 pt, Flare increases the height of all of the style menu entries to that height, which unfortunately makes the menu pretty much unusable.
The solution was just to use the other ways of accessing the styles, displaying the styles window for example which doesn't seem to have this problem, and avoiding using the popup styles feature.
I went through everything else, validating the CSS file and etc, before finding the solution or at least the workaround.

Related

Printing an HTML page (the FULL page!)

I have a web page which has many divs (listed like table rows), and the rows exceed the length of the page (within view, before you have to scroll down). I am using some JavaScript to toggle what information is displayed on my page (for example, number of rows.)
I have made a print.css file and have manaed to edit the style that is presented upon printing the page, however, only the window in view on my screen is printing (so loads of my records, which have to scroll down in the browser to view, are being left out of my printed document!!)
Does anyone have any ideas. Even when I hit print preview through FireFox and IE, it's only previewing the exact screen. Any help here is much appreciated!
One possible cause of problem is that some block element is positioned absolutely and has scroll bars (overflow set to auto). When printing, overflown content will be hidden. You need to disable absolute positioning in your print.css. Example of this: http://pastehtml.com/view/1bo7tje.html
It is hard to tell without example reproducing the problem. You don't need to show the whole page with all the styles. Giving the simplest example still reproducing the bug will be enough. You can even locate the problem while you simplify the code.

Accessibility issues with modifying DOM with JavaScript/jQuery

I am developing a website for a report. The majority of the report fits within a column that can be no larger than 800px. However there are a couple of sections of the report that include tables that are just so detailed it is impossible to fit within that space.
The solution I am considering is to use JavaScript/jQuery to detect tables that are too large for the column and turn them into links, that when clicked, brings up a light box using more available screen space and displays the table.
This does not seem to difficult to do… but then I started considering accessibility.
So after detecting the oversized tables should I cut them out of the DOM and store them in a variable or should I hide them?
Do accessibility devices such as screen readers use the original source or do they respect changes made by Javascript?
If you hide the content with display:none then the screen reader will not see it until you toggle that attribute.
You could also rip the content out of the DOM as the screen reader only looks at the rendered DOM.
When you create a lightbox, you will have to set focus into the lightbox in order for the screen reader to read the content.

custom css select menu gets cut off at the bottom in chrome

Here's a link to my page:
http://2plygraphics.com/im-here/
I have custom select menus and form elements using the :before and :after pseudo tags. There is also a lot of javascript making things hide/show etc.
If you view the page in Chrome you will notice that on the first click of any select menu in the page, the contents of the menu get cut off at the bottom. Once you have clicked once, all menus work as designed. It also appears to be a compounding issue, in that, if a menu has 11 items it is cut off more than one with 2 items. Once the page is refreshed the issue happens again...
I have tried changing or removing line heights, padding, margins, the overflow method etc. Starting to lose perspective...any help would be appreciated.
OK, here is an image of it in action:
http://i59.tinypic.com/33ljm35.png
I have tested this in windows 7 using Chrome Version 33.0.1750.154 m
Update
Does anyone have any suggestions for working around this? I'm thinking maybe faking a click on one of the select menus to get it to "activate" after the page has loaded...
I had the same problem in Chrome/Win8.1 and i could solve that by removing the font-family setting on the select-element in my css. Without that everything was working like it should.

Accordian hide/show layout isn't working well in IE7

there's this piece of code on our web site that dynamically creates a new div with additional videos that are hidden (or shown) when you click on the hide/show button. The problem is that in IE7, the thumbnails aren't loaded onto the page properly - they show up on top of the link text instead of on the left, like the rest of the thumbnails in the top accordion div.
There's an examply on this page:
http://www.asme.org/kb/news---articles/media/2012/05/video-early-disease-detection-using-nanotechnology
I've fixed some of the css issues, but i think the problem here isn't CSS - it's the javascript code that's on the article.js page.
Can anybody point me in the direction of a solution?
I think your problem is that the element doesn't have a visible container at the time the image is inserted, so it throws it in at the very top of the container, and doesn't respect the rules defined.
I'd play around with inserting it after the container is visible, or try changing the traits during/after the slide down occurs... I know that's pretty generic, but that's my best advice for the time being. I hope this helps some.

Bad Css Design causing third party menu to mess the images and LI tags

Hello I am working on website. On adding a 3rd party menu css or Jscript it messes the <li> tags of my website.
I read somewhere that my div tags should be properly closed in the css. But I am unable to do this after wasting 2 days. I tried to Jscripts menu and also the CSS menus but they all seem to mess up everything.
Here is the link to website.. You can see on default.aspx page the three big images have stopped sliding. Moreover in gallery.aspx page, the images slide as
I do not use the same menu there.
Website home page link : http://gkainc.somee.com/default.aspx
Gallery link(working): http://gkainc.somee.com/gallery.aspx
I am adding a part of the css file. Please take a look at this.
css can be seen here in the resources of the website.
The reason is that your div #menuh-container is huge and has a higher z-index than other elements, meaning it appears above them. You might notice you also can't highlight the search field.
You should give your other elements a higher z-index than the menu container so that they are layered above it, or even better edit your menu container to be smaller (ideally just the size of the actual menu and no bigger).
Hope that helps.
Your problem is line 16 of animated-menu.css. You are setting margin: 40em to position your menu relative to the left of the screen (why not use position:absolute;right:0?) and that is adding a huge margin at the bottom of the menu that makes the menu cover up the images, blocking the click.
If you update this to margin-left: 40em, that eliminates the extra margin and corrects the issue.

Resources