I am using CMSMS 1.0.6. to make a new website for my small business: http://www.carlislefoodsystems.com/ComingSoon/
I wanted the horizontal CSS menu centered on the page, so i put the navigation in a table in my template which is based off of CSSMenu top + 2 columns:
Navigation
{menu template='cssmenu.tpl'}
This works, but the menu doesn't always stay inline after pressing Back in Firefox on Mac 10.4. This problem seems to randomly occur about half of the time.
To attempt to fix, I tried in Navigation: CSSMenu - Horizontal:
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
}
I'm looking for suggestions on how to force the menu to stay inline and/or to use css to center the menu rather than shoving it in a table. Help is greatly appreciated.
CSSMenu-Horizontal doesn't stay inline after Back on Firefox
Re: CSSMenu-Horizontal doesn't stay inline after Back on Firefox
What I've done in the past was to add a container div for the menu like this:
and styled my menuwrapper like this:
Nullig
Code: Select all
<!-- Start Navigation -->
<div style="background-color: #ECECEC;width: 100%;"> <-- Added a container div
<div id="menu_horiz">
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl'}
<hr class="accessibility" />
</div>
</div>
<!-- End Navigation -->
Code: Select all
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #ECECEC;
border-bottom: 1px solid #C0C0C0;
margin: 0 0 0 23%; <-- You have to adjust these
width: 75%; <-- percentages for your needs
text-align: left;
}
Re: CSSMenu-Horizontal doesn't stay inline after Back on Firefox
Correct me if I am wrong, but wouldn't that hold the menu in a certain position, which may be visually close to center, but isn't actually centered?
Re: CSSMenu-Horizontal doesn't stay inline after Back on Firefox
#menu_vert {
display: table;
margin-left: auto;
margin-right: auto;
text-align:center;
}
This did a nice job of getting rid of the table for Firefox, but IE6 still puts it to the left. It still goes out of line on "Back" in any browser. Grrrrr.....
display: table;
margin-left: auto;
margin-right: auto;
text-align:center;
}
This did a nice job of getting rid of the table for Firefox, but IE6 still puts it to the left. It still goes out of line on "Back" in any browser. Grrrrr.....