jqDock (jquery Dock) issues. Spacing and images being "smushed"

Question

I am using the jqDock from wizzud.com/jqdock and I was hoping that someone here had some experience with it.

Here is what my dock looks like:

My first issue is that my client is INSISTING that the dock should fill the entire width of the page, but nothing that I change makes that happen. The dock stays the same width no matter what I do.

The second issue is that 3rd from last image. Notice how it is smashed vertically? Each of these images has a second image associated on rollover to display text to the user. That looks like this:

Now each of those images is 64x75 (width x height) pixels. The small images are that same width, but are constrained by the dock to be 48 pixels tall. The only image that is different is the "Companion Animals" hover image, which is 64x83 pixels (so that it can fit the 2 lines of text). I can't do this without having 2 lines of text on that image. But I can't figure out why the first image (which is the exact same dimensions as the other images) would be "smushed" because the 2nd image is a different height.

Any help would be appreciated.

Answer 1

2nd issue first :

You are constraining the height (height being the minor axis in a horizontal menu) to 48px. Images are constrained proportionately, so a full image size of 64x75 results in an 'at rest' (ie. constrained) size of 41x48. But an image size of 64x83 results in an 'at rest' size of 37x48, ie. narrower than the others by 4px.

One thing to bear in mind here is that the ability to provide separate small images for the at rest state is purely and simply for clarity of images - ie. not having to rely on the browser's size reduction rendition of the reduced 'larger' image. It is always the 'large' image that is the important one and the one that is constrained; the 'smaller' image merely replaces the reduced 'large' image when that image is completely 'at rest' in the dock.

Back to the 1st issue :

I'm not entirely clear on exactly what is required to 'fill the entire width of the page', nor am I certain of what that page is, but I assume it's a fixed width website design, eg. 900px (for sake of argument), and that the 'at rest' dock needs to fill the entire 900px (presumably you're allowed half the inter-image gap at either end!).

You have a problem! Because as soon as any image in the dock is hovered over, the ends of the dock are going to exceed your 'page' width! That is the nature of the dock; that is what it does.

If that really is what you need to do, you have 2 ways of getting the 'at rest' dock to match the required width:

• set your image sizes and constraint size such that they fit, and/or

• apply css left/right padding to each menu item (better if all images are contained in anchors, then just evenly pad the anchors).