Putting a left border on <html> to stretch the entire topic

nickatwork · Post by **nickatwork** » Tue Jun 12, 2012 7:02 am

Hi all,
Think this is more of a styles issue than a webhelp skin issue.
The topic divider in WebHelp is annoying me, the frameborder is ugly and I dont want it. Instead I want a 1px line to seperate my topic pane from the toc etc.
I added a left border to the <html> tag and it almost works. But for topics that only fill half the page, the border stops half way, it does not stretch to the bottom of the window. I tried setting the height property to 100% and that worked, but then when I have a topic with content that goes beyond the whole page the border only extends down to what is shown, but when you scroll further down the border doesnt continue to render - it works more like a set pixel size instead.

Any ideas?

Thanks,
Nick

Post by **LTinker68** » Tue Jun 12, 2012 7:43 am

I don't have Flare open at the moment, but can't you style that border between the nav pane and the topic pane in the skin (under Styles)?

nickatwork · Post by **nickatwork** » Tue Jun 12, 2012 8:14 am

Unfortunately not. Unless someone knows where it is set because I spent quite a while looking for it.

Post by **LTinker68** » Tue Jun 12, 2012 12:30 pm

I think you need to submit a feature request --> http://www.madcapsoftware.com/bugs/submit.aspx

nickatwork · Post by **nickatwork** » Wed Jun 13, 2012 1:04 am

From what I can tell, that border is set using the frameborder tag, which in IE is either on or off. Doesn't seem to let you set a pixel width from what I can see in the htm page after its built. This is why I need to try and use a border instead.

i-tietz · Post by **i-tietz** » Wed Jun 13, 2012 1:58 am

Well - I suppose you can apply a border to the topic, but you cannot get rid of the frameborder anyway. So what would it help?

nickatwork · Post by **nickatwork** » Wed Jun 13, 2012 6:33 am

So far I can remove the frame border by editing the index.htm (or whatever name you give it) after building my output. I 'can' set a border in this frame tag in the htm file, but it doesnt show in FF, only IE. Not ideal at all.
Setting the border at the topic, using either <html> or <body> tags does work so well. Using <body> stretches the border the whole length of the topic even with drop-down hotspots, but if the content is only say half of the page then the border stops half way down. So it doesnt really work. Still trying to figure something out.

i-tietz · Post by **i-tietz** » Wed Jun 13, 2012 6:50 am

Tried to set the height of body or html to 100%?

Edit:
Add to your body tag in the stylesheet:
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

nickatwork · Post by **nickatwork** » Wed Jun 13, 2012 7:16 am

Yep tried that, but it wont extend down the page when I open drop-down hotspots. Tried html, body and both together.
still no joy.

There must be a way to fudge this.

Post by **LTinker68** » Wed Jun 13, 2012 8:47 am

Ok, I can get you partway there. This works in IE8 but only partly works in Firefox (don't know about IE9). In FF, the border around the body disappears, which may or may not be acceptable. So you might have to get a bit trickier with the style definitions to get it to work in both browsers. I only did an inline style to see if I could get it to work, so you'll probably want to refine it.

Basically, you need to modify the Default.htm and Default_Left.htm files in the output. At the bottom of the page, set the frameset borders to 0 and add a left and top border to the body frame. You'll need to make this modification every time you build the output, unless you modify the same files in the Flare program files. Or make a copy of the modified files outside the project then copy them over the generated versions every time you do a build.

The resulting code at the bottom of those two .htm files looks similar to the following:

Code: Select all

<frameset rows="28, *" border="0" framespacing="0" >
     <frame name="mctoolbar" title="Toolbar" src="Skin/Toolbar.htm" frameborder="0" scrolling="no" noresize="noresize" />
     <frameset border="0" framespacing="0" cols="200, *">
         <frame name="navigation" title="Navigation" src="Skin/Navigation.htm" frameborder="0" scrolling="no" onresize="frames['navigation'].SetIFrameHeight();"  />
         <frame name="body" title="Topic" frameborder="0" src="Skin/Blank.htm" style="border-left:1px #000000 solid;border-top:1px #000000 solid;" />
     </frameset>
</frameset>

nickatwork · Post by **nickatwork** » Thu Jun 14, 2012 1:16 am

Yeah this is what I did initially, but the fact it doesnt work in FF is a total issue for us - I'm not sure about chrome or safari (dont have them to test). Our platform is multi-browser compatiable and to have the help not work or appear in FF the same it does in IE isn't nice.

I found a few posts online related to FF and some error with frameborders but haven't found anything that helps with a solution.

Thats why I am looking at the topic border option instead.

I'm sure that I can just put a border on either the html or body to have it stretch the entire length of the page, not just the content, but no matter how much I play with the CSS I can't get it sorted - the border only ever seems to stretch to the length of the content - but not the white space between content and the bottom of the page if it is a short paragraph.

Thanks,
Nick.

nickatwork · Post by **nickatwork** » Thu Jun 14, 2012 1:44 am

SOLVED.
2 steps to get this sorted.

First, the removal of all frameborder and border settings in the index.htm and index_left.htm as LTinker has posted above.
Then, set min-height in the <html> tag to 100% and <height> in the body tag to 100%. The border-left attribute is then applied to the body tag and it all seems to work in FF and IE. Not sure about older versions of IE, I hear, but haven't tested that IE6 does not support min-height values.

Thanks for all the help,

Nick.

Post by **LTinker68** » Thu Jun 14, 2012 7:51 am

nickatwork wrote:Not sure about older versions of IE, I hear, but haven't tested that IE6 does not support min-height values.

IE6 definitely doesn't support the min- and max- attributes. Can't remember if IE7 does or not. I think it does.

wbrisett · Post by **wbrisett** » Tue Jun 19, 2012 2:41 am

nickatwork wrote:Yeah this is what I did initially, but the fact it doesnt work in FF is a total issue for us - I'm not sure about chrome or safari (dont have them to test).

Safari is becoming something people need to start thinking about more, as the iTouch/iPad devices all use it. Talking with our corporate web team, the amount of traffic seen via Safari over the past couple of years has increased significantly. A lot of our stuff apparently is built to work with IE since that was (and still is) the dominate browser used, but hacks/workarounds that work only with IE need to be done with caution in the future.

Wayne

i-tietz · Post by **i-tietz** » Tue Jun 19, 2012 3:07 am

wbrisett wrote:Talking with our corporate web team, the amount of traffic seen via Safari over the past couple of years has increased significantly.

To look at you own web logs is the only way I recommend, but you have to keep watching it over the years. The direction of development is rather a political question for the project manager, because the implicit or explicit adding of another browser to your system requirements needs a lot of additional research, implementation, test and support - invested time and/or personnel are resources to be taken care of!

IE so far survived the attacks of Netscape and Firefox - general statements about the future of browsers are too short-sighted for my taste.

MadCap Software Forums

Putting a left border on <html> to stretch the entire topic

Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic

Re: Putting a left border on <html> to stretch the entire topic