Problem: Text in the menu items moves down too far when previewed in a browser.
The menu may look normal in GoLive, but is shifted up or down in the browser. First check the text padding options to make sure you have used them to adjust the offset of the text to suit the size of the menu item. If this doesn't help, check the following solution.
Solution: Check the line-height attributes in your CSS.
If you have applied a line-height attribute to the body element (either in a linked extenal CSS or in the page), this affects the menu text as well.
For example, this menu looks normal in GoLive layout view:
But when tested in a browser, it looks like this:
On the page which contains this menu, a line-height value has been applied to the body element in the CSS editor.
If we look at the source code of the page, in the <head> section, we can see this:
body { line-height: 36px }
If a style sheet contains an element or class with a line-height attribute, and that style is applied to the menu's placeholder, (the little yellow square), the style attributes are applied to the menu's <div> tag if the menu layer is moved around on the page.
If the line-height attribute is applied to <body> element in the CSS, moving the menu anywhere on the page will make the styles apply to the menu as the whole page is affected.
The best prevention is to NOT have a line-height attribute applied to the <body> element and not to apply any style to the menu's placeholder.
Even if the menu is in a component with no CSS link, the <body> style is applied to the menu when the component is placed into a page linking to the CSS.
If you wish to keep the line-height attribute in the <body> element, you need to manually edit the source code if you move the menu around.
But I don't have a line-height applied to my menu or to the body element!
Sometimes a line-height attribute will accidentally be applied to the menu's layer even if the attribute is not in the CSS and this will also cause the text-shift problem.
You will need to switch to Source view to find this.
Locate the menu code which looks a bit like this:
<div id="bbML" style=" color: white; font-size: 13.5px; font-family: FontName, Arial, Helvetica, Verdana; font-weight: normal; line-height: 227.5px; visibility: visible; display: block; position: absolute; z-index: 1000; top: 108px; left: 0; width: 175px; height: 227px">
This can be trimmed to remove all the font attributes (bolded above) to leave:
<div id="bbML" style="visibility: visible; display: block; position: absolute; z-index: 1000; top: 108px; left: 0; width: 175px; height: 227px">
This will fix the line-height issue.
|
