[Pro] CSS Menu chopping off button images

I’m having a problem where the CSS Menu action is chopping off the bottom of my button images. This was happening under FWP 5.3.1 and still is present under 5.3.2.

If you look at page http://sjcars.org/testwithnewmaste.php you will see the menu buttons on the left have a slight amount of the bottom cut off. If you hover over the button it is much more pronounced. The images on the server are complete. For example, here is the hover button http://sjcars.org/Resources/btn-hover.gif

Any ideas as to what might be causing this?

Jim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Jim,

The link wasn’t working but I know what you mean. The menu items don’t
(and can’t) know anything about the size of the images you use. Also,
the menus will display at different heights depending on the browser,
so there is no way to guarantee that it will always be correct for the
image. You would be better off using something like the Menu Bar
Action if you wanted to make the menu a fixed height and width, or
using Rollovers.

I’ll add your name to the current feature request to add specific
sizing to the menus though,

Regards,

Joe

On 12 Mar 2009, at 12:59, Starfish Jim wrote:

I’m having a problem where the CSS Menu action is chopping off the
bottom of my button images. This was happening under FWP 5.3.1 and
still is present under 5.3.2.

If you look at page http://sjcars.org/testwithnewmaste.php you will
see the menu buttons on the left have a slight amount of the bottom
cut off. If you hover over the button it is much more pronounced.
The images on the server are complete. For example, here is the
hover button http://sjcars.org/Resources/btn-hover.gif

Any ideas as to what might be causing this?

Jim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe,

Sorry about the link. Between posting and when you tried it I had promoted the test page to be the new beta page http://sjcars.org/beta.php.

I understand from comments I’ve seen posted by waltd that the freewaytalk.net site uses CSS Menu for the buttons. These aren’t chopped off. Perhaps I was mistaken about what was used to publish the page. The source sure doesn’t look like CSS Menu source.

I had initially looked at the Menu Bar Action, but the documentation recommends using CSS Menu instead. So that is where I went. Also, Menu Bar seems to only offer clunky boxes with no facility for graphic buttons. Or perhaps I missed something in reading the docs.

Jim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve been looking at the HTML on Jim’s page and think I may have found
a work around for him. As you mention Joe IE has problems with the
background images in the list items - I assume because of the
browser’s box model bugs.
What I did was to first take the page and host it here;
http://www.freewayactions.com/test/css-menu-backgrounds/
Next I added the following code in the head of the document just
before the end-head tag;

The first style declaration simply sets the height of the menu items
to 27 pixels.
The second block uses IE conditional tags to overwrite this previous
value. The !important part simply tells the browser to wake up and
take notice.
The last block attempts to fix IE 5.5 which also collapses the menu
height by setting the menu height to 33 pixels (the original 27 pixels

  • the 6 for combined padding).

You can see that the menu appears to render well using the Net
Renderer tool;

I’m sure this can be improved as the multiple conditional comments
seem somewhat overkill. However it should allow Jim to keep his
existing menus without having to remake them as tables.
Regards,
Tim.

On 12 Mar 2009, at 22:37, Joe Billings wrote:

Hi Jim,

The link wasn’t working but I know what you mean. The menu items
don’t (and can’t) know anything about the size of the images you
use. Also, the menus will display at different heights depending on
the browser, so there is no way to guarantee that it will always be
correct for the image. You would be better off using something like
the Menu Bar Action if you wanted to make the menu a fixed height
and width, or using Rollovers.

I’ll add your name to the current feature request to add specific
sizing to the menus though

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The FreewayTalk site is hand-coded from top to bottom, and it uses a
technique called CSS Sprites to animate the rollovers. So sorry, not
the case on either point. Paul Dunning just released a CSS Rollovers
Action that uses Sprites, you might want to try that. But then you
would have to make your own menu bar.

Walter

On Mar 13, 2009, at 11:19 PM, Starfish Jim wrote:

I understand from comments I’ve seen posted by waltd that the
freewaytalk.net site uses CSS Menu for the buttons. These aren’t
chopped off. Perhaps I was mistaken about what was used to publish
the page. The source sure doesn’t look like CSS Menu source.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 13 Mar 2009, 5:38 am, Joe Billings wrote:

Hi Jim,

The link wasn’t working but I know what you mean. The menu items don’t
(and can’t) know anything about the size of the images you use. Also,
the menus will display at different heights depending on the browser,
so there is no way to guarantee that it will always be correct for the
image. You would be better off using something like the Menu Bar
Action if you wanted to make the menu a fixed height and width, or
using Rollovers.

I’ll add your name to the current feature request to add specific
sizing to the menus though,

Regards,

Joe

On 12 Mar 2009, at 12:59, Starfish Jim wrote:

I’m having a problem where the CSS Menu action is chopping off the
bottom of my button images. This was happening under FWP 5.3.1 and
still is present under 5.3.2.

If you look at page http://sjcars.org/testwithnewmaste.php you will
see the menu buttons on the left have a slight amount of the bottom
cut off. If you hover over the button it is much more pronounced.
The images on the server are complete. For example, here is the
hover button http://sjcars.org/Resources/btn-hover.gif

Any ideas as to what might be causing this?

Jim

Is this still the case with CSS menus in FW 5 and using graphic images with specific X/Y dimensions as the background images?

Or has this been addressed now and a possibility as I want to create a menu that use’s graphic items 167W pixels x 60H pixels with background and hover states differing.

The sub menus will remain the same width, however the height may change.

Or is there a work around now, looked in past topics and can’t find any reference to this??

Thanks guys


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is this still the case with CSS menus in FW 5 and using graphic images with specific X/Y dimensions as the background images?

Thanks Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can anyone shed some light on this please?

Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Worm,

It has been addressed in the most recent version yes - you can now specify a pixel width, the height you will need to increase or decrease with padding top and bottom though. This is so that the text in the menu can increase in size without outgrowing the menu item (the height of the menu would stay at say 25px but the text would grow and grow if it was a fixed height).

Hope this helps,

Joe

On 19 Jan 2010, at 09:13, Mr worm wrote:

Can anyone shed some light on this please?

Thank you


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Joe, that helps.

However, I have a few questions if I may:

  1. In main menu, I want to specify the pixel width in my case 162W which I have, the height is 60 H pixels. How can I tell how much I need to pad it out to fit exact, as I’m guessing atm.

  2. I want to use a ‘specific’ text style within my navigation bar, ‘Eurostyle’ with force graphic character applied. How do I align the text centrally both X/Y within the 60H main menu & 30H sub menu respectively.

  3. Is it possible to make the entire button a clickable link, rather than just the text. Or will I need to use the old method to achieve this and use graphic items as the buttons.

  4. Submenu width. Is it possible to set each column to a defined width rather than a generic size for all. This is so it looks more professional and aligned, say you have a 15 ems width with ‘2009’ written in it, the empty space looks unsightly.

  5. sub menu alignment. Can this be set to left, central, right etc?

Thank you

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Worm,

Sorry, very busy here.

  1. Trial and error

  2. Using graphic text in the menus is not recommended, it will give unexpected results since CSS can’t be applied to graphic text. Use regular text and center it in the usual way, as long as you have equal top and bottom padding then it will sit centrally.

  3. Doing what I mentioned in step 2 will make the entire item a link

  4. This isn’t possible no since there would be no way to assign a width to a specific submenu in Freeway’s interface

  5. Yes, you can select the indented text (which defines a submenu) and set its alignment in the usual way.

Hope this helps,

Joe

On 19 Jan 2010, at 12:11, Mr worm wrote:

Thanks Joe, that helps.

However, I have a few questions if I may:

  1. In main menu, I want to specify the pixel width in my case 162W which I have, the height is 60 H pixels. How can I tell how much I need to pad it out to fit exact, as I’m guessing atm.

  2. I want to use a ‘specific’ text style within my navigation bar, ‘Eurostyle’ with force graphic character applied. How do I align the text centrally both X/Y within the 60H main menu & 30H sub menu respectively.

  3. Is it possible to make the entire button a clickable link, rather than just the text. Or will I need to use the old method to achieve this and use graphic items as the buttons.

  4. Submenu width. Is it possible to set each column to a defined width rather than a generic size for all. This is so it looks more professional and aligned, say you have a 15 ems width with ‘2009’ written in it, the empty space looks unsightly.

  5. sub menu alignment. Can this be set to left, central, right etc?

Thank you

Worm


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options