Extra Character & Menu Alignment

[jwrudasill]

I created a horizontal menu with a few drop down menus under two of the main buttons. When the menu is inserted in the desired cell in FrontPage 2003 the menu has a space above it which makes the menu appear one line below where it should be. When I remove the space the menu does not function. I did a lot of testing and looking at the html code and found that the space is being caused by the following code: <script type="text/javascript" src="menu-files/dhtmlmenu_m3_scr.js">
</script>, which I assume is what invokes the menu script.

Can anyone make a suggestion as to what to do to correct this problem.

Thanks,
John

[Sebastian]

Hello,

The <script> tag is inserting the menu script file but it actually shouldn't do any newline. Do you have any styles set for the script tag that would cause the newline? Or maybe you have another newline-making element above the menu. Could you send us at helpdesk.xtreeme.com a link to the menu page where we could take a look at it?

[jwrudasill]

Sebastian,

I don't have the site published, so I don't have a link to provide at this time. I'm not aware of any styles that I have set for the script tags, but then it's possible that I have done it and am not aware of it. I have attached a screen shot of my FrontPage window which shows the extra space that is being inserted (see the arrow). The dark blue menu should be up against the light gray line above it. The screen shot also shows the html code above the page in a split window. Line 136 is the line when deleted makes the extra line go away, but when deleted makes the menu stop working.

I hope this is enough to give you a clue as to what is going on with this particular menu.

Thanks for all of your assistance.

Regards,
John

[Sebastian]

Could you use an external browser to preview the page? Build-in preview modules can be sometimes misleading. If the problem still exists, could you zip the page together with the menu-files folder and send them to us at helpdesk.xtreeme.com?

[jwrudasill]

Sebastian,

I have attached a zip file with the dynamic web template that I am using as well as the page that is build from it and the menu.dms file. I have been viewing the page in a browser, as the preview in FrontPage gets an error.

Hopefully you will be able to tell something from the files being sent. I really appreciate you assistance.

Thanks,
John

[Sebastian]

Hi,

I used your template file and the index.htm page in my test FrontPage project and it seems to work fine here. I opened index.htm in FireFox and IE8 and there is no extra space above the menu on my machine. Please see the attached preview.png file. It doesn't look the same as your page since I don't have your images but the space before the menu doesn't appear.

Could you try creating a new page and make it attached to the index.dwt template? Next, preview it in FireFox or IE and see if the space appears.

[jwrudasill]

You are correct, but it puts the space below the menu when it is displayed as you can see in your example. In the FrontPage design screen it shows it above the menu, but when you save the htm file and open it with a browser the space shows below the menu. The gray line below the menu should be up against the bottom of the menu.

Thanks again for your help.

John

[Sebastian]

You are right. Still, when I remove the menu completely and put the a sample text in its place, the <td> cell is as high as it was before. This means that there is something else that is keeping the height of the <td> cell. When I remove the content of the cell at all, its height is still the same.

[jwrudasill]

I agree that the cell is still the same size as when the menu was inserted, however the cell height can be changed when the text is inserted, where as it cannot be reduced when the menu is in place. The cell size with the menu is 52 pixels where the menu is only 35 pixels high. The size cannot be reduced to less than 52 pixels except when the menu is removed and the text is inserted. This resizing to 35 pixels occurs when the characters above the menu are deleted.

I did a little experimenting with the html code to see if I could isolate the character causing the problem. I placed the cursor at the beginning of the line directly after the script line (e.g. <script type="text/javascript" src="menu-files/dhtmlmenu_m3_scr.js"></script>) that I thought was causing the problem. I did one backspace which moved the line on which I was positioned to just after the script line shown above. The extra line associated with the menu went away, but the menu didn't work when displayed in a browser. I'm not sure what the character was that I deleted, but it appears to be in the middle of the code generated by the DHTML menu addin. I have attached images below of the FrontPage screen split between code and design mode so you can see how the screen looked before and after I did the backspace. You should be able to replicate this with the index.dwt and index.htm files that were sent previously.

I'm not sure if this helps, but I think we are getting closer.

Thanks again,
John

I apologize for the last part of the post above. I just realized that the backspace I did actually took out the script line shown above which resulted in the proper alignment of the menu, but a menu that did not function, which is what I had mentioned in previous posts. The first part of the post is what should be considered, but the screen shots still might be useful, so I have left them. Thanks.

XtreemeMenu-Before.gif (75.66 KiB) Viewed 18 times

XtreemeMenu-After.gif (78.34 KiB) Viewed 18 times

[Sebastian]

After I removed the height=52 setting in the first table, height=100% in the second table and deleted the &amp;nbsp; entity following the menu from your template, then height of the menu cell is the same as the menu itself. I'd like to mention that I am not using the FrontPage build-in preview mode which is used when you turn on the split view. I am using an external browser. To do that you should right click in the Folder list on the left the file you want to preview, choose 'Open With' and then pick FireFox or IE. My general advice is not using tables and switching to <div> elements. They are more predictable and considered to work faster in latest browsers. Tables will also work, they just need a bit more effort.

[jwrudasill]

Thanks again for responding. I do need a little clarification though. I assume the 52 that you refer to as the first table is the cell where the menu is located. What are you refering to when you say the second table? I'm not sure which part of the page this is and do you mean that this cell should show a specified height of 100% which should be removed. Also, I did a search on the html code and could not find the &amp;nbsp; anywhere in the page.

Thanks,
John

[Sebastian]

Hi,

I mean the two lines of the parent <td> and a <table> element inside it where the menu is located. The 'nbsp' could be an activity of my Dreamweaver where I was working on your page so this doesn't matter. The two lines look like this:

Code: Select all

<td valign="top" colspan="3" height="52">
      <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">

What I did is I remove the 52 height setting of the <td> and 100% from height of the table. See the attached file. The result is that the height of the cell is the same as of the menu. There is a space that appears below the cell, still this is a result of other code.

If it still doesn't work on your side, the simplest way to debug this is creating a new page containing only the menu. Next, you can put a simple table around the menu, and add other elements of your code one by one. This way you can see when the problem appears and which code is causing it.

[jwrudasill]

Thanks Sebastian for all of your help. I'll try a couple of these things and see how they work out.

Regards,
John