I’m having a problem using a CSS menu with the BAM action. I’ve started to build the site, and a sample page can be found below (no links working on this version):
All was fine until I made my first link to another page from within the BAM item. You’ll see on the following page, under the first menu item "About Tai Chi’ that the ‘More’ button has gone pear shaped. All I did was add a link to the ‘more’ image within the BAM item and suddenly the menu has become messed up.
The BAM item is a HTML box with a background image, a table inside it (so I can keep all my text neat and tidy) and a simple ‘more’ button graphic pasted into one of the cells. It’s OK until I click the graphic and make a link to another page. I’ve also tried simply selecting some text in the table and linking that, and the same happens. Tearing my hair out now!
If anyone can shine a light on what I’m doing wrong I’d appreciate it. Original site collect is available here if it helps:
We never really imagined the CSS Menus Action being used this way when we first wrote it. The cause of the problem is that the browser thinks the links in the BAM area are part of the CSS Menus, so it’s blowing the layout out. The only way to prevent this from happening is by applying some more CSS styling to the page to fix it.
Here are the steps:
Open the Edit Styles dialog (Edit>Styles)
Click the + at the bottom left of the styles column.
In the Tag field, enter the following: #BAM1 a, #BAM2 a, #BAM3 a
Delete the text from the Name field
Click the Extended button
Click New or press Command-N
Enter “display” in the Name field and “inline !important” in the Value field
Click Ok, and then New/Command-N again
Enter “padding” in the Name field and “0 !important” in the Value field
Click Ok, you should see this: http://cl.ly/1K2E3q3M2J3v2U422m24
Ok the rest of the dialogs and preview to check that everything works as expected.