Background images (arrgh) - stumped and humbled

Poster: mfrie01
Dated: Tuesday August 9 2005 - 1:45:16 BST

Everything was working fine until the damn client wanted yet another change in the home page design. The page is at http://www.cowlesgraphicdesign.com/vista_test/

You can see the old menu by clicking on any link, the new menu is only on the home page until I get it all working. As you can see, they now want a drop shadow above the item, and boxed menu items with space between.

In Mozilla and Firefox the menu text appears at the top left edge of the background image. I've added padding=2; which helps the text position in IE - BUT - in IE the image repeats, which is why there's a drop shadow at the bottom - that's actually another image being repeated in the y-axis.

I'm sure I can push the text to the right by adding a clear spacer image to the item, but how do I lower the text reliably in IE and Non-IE browsers?

And, is the menu resizing my images, because no matter how much space I leave around my box, I always get about the same spacing between items? Nothing I've been able to do has affected the space between menu items. It's acceptable now, but I'm just stumped as to how some of these setting work (or don't). The graphic is 140 pixels wide, but the menu doesn't seem to care.

Very humbled by this latest development and greatful for your help.

Thanks,
Michael

Poster: Ruth
Dated: Tuesday August 9 2005 - 4:11:45 BST

Hi,

Hope I understood all this:



I have IE and I do not see any repeat on the bgimage. The bottom of your overimage is a black border, and the drop down menu has a black border so when you open the dropdown it looks as if it increases the border at the bottom, but it's just the two meeting so the border now seems 2 pixels instead of one. There's no way to offset the 1st level submenu on a horizontal menu. If that is the problem, there is a solution using css.

1. copy and paste [or use copyOf] the subMenuStyle so you have two copies of it in your menu_data file, and rename one to subMenuStyle1. You would use that style for all 2nd level and more subs and the original one for the 1st level drop downs, the ones that drop from the main horizontal menu.

2. place this in your index.css file, name the classes whatever you want, I just put names that remind me of the use:



3. In your menu_data.js file in the subMenuStyle [the original one] eliminate all reference to borders and add this instead


4. in all first level submenus that drop from the main one, go to the last item of each of them and put

What that does is elimate the top border of that 1st level sub so the only border you see is the one from the main item image. The reason for the two different classes is, if you just tried to use the first one and put in 1px for the bottom border, then instead of the menu having a border all around it with no top border, each item would have a border around it with no top border.



Probably since you have specified menuwidth=770; and the images are used as bgimages not images. You can increase the menu width and the items will get wider. Be aware that in Mozilla and Firefox that won't be 'fixed' since those browsers actually link the text zoom function to accessibility instead of requiring a user specific stylesheet to override the site's setup, whereas in IE it should remain the same size unless the user has assigned an ignore fontsize under the accessibility tab. That is why IE doesn't automatically change the font using the text size tool. The itemwidth will only be as wide as the menuwidth minus the padding px [24 in this case, I think] divided by number of items. In other words you need to make sure your menuwidth is equal to the itemwidth you specify plus your padding x 2 for each item.



Nope, it doesn't It is focused on the menuwidth you put in, since the image is a bgimage it looks at menuwidth and sizes the menu items accordingly, even if you put in itemwidth, it seems to take the menuwidth as the dominant. If you were to put iamges into the item instead of bgimages, it seems to then ignore the menuwidth if the images added together are wider and make them the dominant.

On the first issue of the darker 'shadow' at the bottom, if anyone resizes the fonts in any browser set to allow that, then you will get a background repeat. I'll play around and see if I can find a solution or workaround.

Hope that helps.

Ruth

Poster: mfrie01
Dated: Tuesday August 9 2005 - 4:45:51 BST

Ruth,

Thanks for your help. Unfortunately, your assessment of the double borders isn't actually what's going on. I've changed the "off" graphic by adding the drop shadow. I now see a shadow top and bottom, and I know it's the graphic repeating because if I enlarge the height I can start to see the box. You should see what I mean in IE. If I set the padding to 0 it doesn't happen. I can't leave it as 0 padding because then the text isn't positioned correctly.

The repeat does not happen in Non-IE browsers, however the other browsers don't line up the text correctly either. I think it's the way IE handles container sizing, which is different in other browsers. Also for some things like lists, IE needs padding and Mozilla needs margin. But adding margin in the menu doesn't fix the text positioning within the graphic in Mozilla.

I'd like to use HTML text in the menus instead of images with text, but I might not have a choice if I can't find a solution.

Thanks,
Michael

Poster: Ruth
Dated: Tuesday August 9 2005 - 7:44:25 BST

Actually, I'm using IE5.5 and I don't get a background repeat. It looks the same in all my browsers, IE, Netscape, Firefox. I will see what I can figure out. I do see the repeat if I resize the text in Netscape or Firefox; IE doesn't change the text size on my browser. You might keep the changing of text size in mind since anyone who resizes the text will have the background repeat. If I figure out anything I'll post back.

Ruth

Poster: Ruth
Dated: Tuesday August 9 2005 - 22:04:13 BST

Hi,

OK, this is what I've found. The menu doesn't honor the background no-repeat.

You can fix your problem because of the images you are using. If you increase your image size to 260 wide by 100 high putting the extra pixels at the right and bottom, the image won't repeat because that extra white takes up any space.

Ruth

Poster: mfrie01
Dated: Tuesday August 9 2005 - 23:19:21 BST

Ruth,

Thank you. I did think about doing exactly what you recommended, but I've decided to switch to images with the labels as embedded text. I didn't want to take a chance on what would happen if, as you said, the fonts were resized or if it was on another platform. I just finished the changes a few minutes ago and everything seems to work in all browsers.

Regarding the classes you mentioned to fix the border overlap - I did use them with my images and they work like a charm. One caveat however, you do need to turn off any decoration by setting up all the new class link states, otherwise the first-level menu items come up with default link properties. Mine were all underlined.



And you do the same for the other class as well. There might be a shorter way to write that CSS, but I'm not sure.

Thanks again. Another problem solved by a great support team.
Michael